Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“

背景

刚刚学vue没多久，经常分不清情况什么时候用什么符号：

“:” 是指令 “v-bind”的缩写 “.”是修饰符 “@”是指令“v-on”的缩写 ，它用于监听 DOM 事件 “#”是v-slot的缩写；

"{{}}" 插值语法

"$" ：Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ 。

简写

Vue中有很多的指令，且形式都是 v-xxx。

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 ( ) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - page ) 时，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种数据绑定的方式

备注

2 @符号示例：

没有参数,回调函数参数e

有参数,就用$event占位,在回调中e接收。

在@click后面还可以加扩展参数：事件修饰符

@click. 阻止浏览器默认行为(@click.="")

@click.stop 阻止冒泡(@click.stop="")

@click.once事件只触发一次（常用）

@click.：使用事件的捕获模式

@click.self：只有event.是当前操作的元素时才触发事件。

@click.函数会阻止触发dom的原始事件，而去执行特定的事件

@click.事件的默认行为立即执行，无需等待事件回调执行完毕

. 和 . 不能一起使用. 将会被忽略

@ 用在按键上：按键修饰符

.enter 回车(@keyup.enter="")

.esc (@keyup.esc="")

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: 可以被重写为 #：

4 插值语法：{{}}

功能：用于解析标签体内容

：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域

{{ list.name }}

5 $:符号的理解

1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ，以便与用户定义的属性区分开来；$ mount是 Vuex 源码中挂载到 Vue 根实例上去的

2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；

3）在事件总线中，添加全局总线是$bus,用$on $emit $off方法去绑定、触发和解绑事件

下面是在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')

|--- 原生vue里的$event例子

4）里面动态绑定的事件，默认情况是传递的参数$event

自定义事件使用$event

这里$event是Child子组件传递过来的8900这个参数值。

花钱

补充：区别css对应的特殊符号的使用：

%7B%%22%3A%%22%2C%%22%3A%%22%2C%22rId%22%3A%%22%2C%%22%3A%%22%7D

%7B%%22%3A%%22%2C%%22%3A%%22%2C%22rId%22%3A%%22%2C%%22%3A%%22%7D