刚刚学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”的缩写
<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx 同样要写 js 表达式，可以直接读取到 data 中的所有属性
如果属性没有加v-bind指令，那么属性中""里的值就是普通字符串，如果加了v-bind指令，就会把""里的值解析为JS表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>插值语法</h2>
<h4>你好，{{ name }}</h4>
<hr />
<h2>指令语法</h2>
<a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{{ tencent.name }}1</a>
<a :href="tencent.url" x="hello">点我去看{{ tencent.name }}2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: 'jack',
tencent: {
name: '开端',
url: 'https://www.baidu.com',
}
}
})
</script>
</html>
:（v-bind) 区分与v-model
Vue中有2种数据绑定的方式
a单向绑定v-bind数据只能从 data 流向页面
b双向绑定v-model数据不仅能从 data 流向页面，还可以从页面流向 data
备注
a双向绑定一般都应用在表单类元素上，如 <input><select><textarea>等
bv-model:value可以简写为v-model，因为v-model默认收集的就是value值
2 @ 符号示例：
- v-on 给标签绑定事件, 一般是点击事件绑定： (v-on:click="clickFn") 其简写：
<template>
<div class="all-sort-list2" @click="goSearch"/>
</template>
<script>
export default{
data(){
}
methods:{
goSearch(){
console.log('gosearch methods.')
}
}
}
</script>
没有参数,回调函数参数e
有参数,就用$event占位,在回调中e接收
在@click后面还可以加扩展参数：事件修饰符
.prevent 阻止浏览器默认行为(@click.prevent="clickFn")
.stop 阻止冒泡(@click.stop="clickFn")
@ 用在按键上：按键修饰符
.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：
<template >
<template #header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</template>4 插值语法：{{}}
功能：用于解析标签体内容
：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域
<h3 class="fl">{{ list.name }}</h3>
<script>
export default{
data(){
list:{
name:'Test'
}
}
}
</script>5 $:符号的理解
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $ ，以便与用户定义的属性区分开来；$ mount是 Vuex 源码中挂载到 Vue 根实例上去的
2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；
3）在事件总线中，添加全局总线是$bus, 用$on $emit $off方法去绑定、触发和解绑事件
new Vue({
...
beforeCreate() {
Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
},
...
})4）templeta里面动态绑定的事件，默认情况是传递的参数$event
<template>
<button @click="getData($event)">按钮</button>
</template>
<script>
export default {
name:'',
methods:{
getData = (e) => {
console.log(e)
}
}
}
</script>
![[Android]视图的控触操作-MotionEvent](https://img-blog.csdnimg.cn/7fd8fd978751449383a4485f8d52d5ba.gif)
