Vue2 新手上路无处不在的特殊符号,让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
背景
刚刚学vue没多久,经常分不清情况什么时候用什么符号:
“:” 是指令 “v-bind”的缩写
“.”是修饰符
“@”是指令“v-on”的缩写 ,它用于监听 DOM 事件
“#”是v-slot的缩写;
"{{}}" 插值语法
"$" :Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ 。
简写
Vue中有很多的指令,且形式都是 v-xxx。
v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写
1 “:” 是指令 “v-bind”的缩写
或简写为,xxx 同样要写 js 表达式,可以直接读取到 data 中的所有属性
如果属性没有加v-bind指令,那么属性中""里的值就是普通字符串,如果加了v-bind指令,就会把""里的值解析为JS表达式
模板语法 插值语法
你好,{{ name }}
指令语法
点我去看{{ tencent.name }}1点我去看{{ tencent.name }}2

冒号":" (v-bind) 区分与v-model
Vue中有2种数据绑定的方式
- 单向绑定v-bind数据只能从 data 流向页面
- 双向绑定v-model数据不仅能从 data 流向页面,还可以从页面流向 data
备注
- 双向绑定一般都应用在表单类元素上,如 等
- v-model:value可以简写为v-model,因为v-model默认收集的就是value值
2 @ 符号示例:
- v-on 给标签绑定事件, 一般是点击事件绑定: (v-on:click="clickFn") 其简写:
没有参数,回调函数参数e
有参数,就用$event占位,在回调中e接收。
在@click后面还可以加扩展参数:事件修饰符
@click.prevent 阻止浏览器默认行为(@click.prevent="clickFn")
@click.stop 阻止冒泡(@click.stop="clickFn")@click.once 事件只触发一次(常用)
@click.capture:使用事件的捕获模式
@click.self:只有event.target是当前操作的元素时才触发事件。
@click.prevent函数会阻止触发dom的原始事件,而去执行特定的事件
@click.passive 事件的默认行为立即执行,无需等待事件回调执行完毕
.passive 和 .prevent 不能一起使用 .prevent 将会被忽略
@ 用在按键上:按键修饰符
.enter 回车(@keyup.enter="keyupFn")
.esc (@keyup.esc="keyupFn")
3 “#”是v-slot的缩写;
什么是插槽? Slot 与,v-slot
在vue中,引入的子组件标签中间是不允许写内容的。为了解决这个问题,官方引入了插槽(slot)的概念。
从 vue@2.6.x 开始,Vue 为具名和范围插槽引入了一个全新的语法,v-slot 指令。目的就是想统一 slot 和 slot-scope 语法,使代码更加规范和清晰。既然有新的语法上位,很明显,slot 和 scope-slot 也将会在 vue@3.0.x 中彻底的跟我们说拜拜了。而从 vue@2.6.0 开始,官方推荐我们使用 v-slot 来替代后两者。
跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
4 插值语法:{{}}
功能:用于解析标签体内容
:写法:{{xxx}},xxx 是 js 表达式,可以直接读取到 data 中的所有区域
{{ list.name }}
5 $:符号的理解
1)$ mount:vue内部除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ,以便与用户定义的属性区分开来;$ mount是 Vuex 源码中挂载到 Vue 根实例上去的
2)$(形参){方法体}:js的方法名定义规则比较广泛,可以是方法名的定义;
3)在事件总线中,添加全局总线是$bus, 用$on $emit $off方法去绑定、触发和解绑事件
-
$bus
下面是在vue2项目程序主入口main.js运行时,一开始就加入$bus的写法示例:
new Vue({store: store, //组件会包含:$storerouter: router, //路由组件,自动产生2个属性:$route: 一般用于获取路由信息, $router:用于编程式导航配置[push|replace]render: h => h(App),beforeCreate() {Vue.prototype.$bus = this// 全局事件总线,万能:一般用于兄弟组件通信,安装全局事件总线,$bus 就是当前应用的 vm},
}).$mount('#app')
-
$event
- $event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event
- 在原生事件中,$event是事件对象 可以点出来属性
- 在原生事件中,$event是事件对象,在自定义事件中,$event是传递过来的数据(参数)
- 在自定义事件中,$event是传递过来的数据
- $event 这个名字是固定,是不能可以修改。
|--- 原生vue里的$event例子
4)templeta里面动态绑定的事件,默认情况是传递的参数$event
自定义事件使用$event
这里$event是Child子组件传递过来的8900这个参数值。
SyncTest不使用修饰符sync
补充:区别css对应的特殊符号的使用:
https://blog.csdn.net/LlanyW/article/details/128492530?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128492530%22%2C%22source%22%3A%22LlanyW%22%7D
https://blog.csdn.net/LlanyW/article/details/128492530?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128492530%22%2C%22source%22%3A%22LlanyW%22%7D
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
