Vue指令语法汇总

笔记总结来源于尚硅谷张天禹老师的Vue教程，感谢天禹老师❤

一、内置指令

1.v-bind 指令

v-bind用于给标签里的标签属性动态绑定值

语法 v-bind:标签属性="xxx"
简写 :标签属性="xxx"

引号中的xxx要写js表达式

⭐注意区分： js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’

2.js代码(语句)
(1). if() {}
(2). for() {}

2.v-model 指令

v-bind用于表单类元素(输入类元素)的双向数据绑定

语法 v-model:value="xxx"
简写 v-model="xxx"

⭐Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

3.v-on 指令

v-on用于绑定事件监听

语法 v-on:xxx="yyy" 其中xxx是事件名，yyy是事件的回调
简写 @xxx="yyy"

绑定事件的时候，yyy也可以写一些简单的语句

⭐事件的基本使用：
1.事件的回调需要配置在methods对象中，最终会在vm上；
2.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
3.methods中配置的函数，都是被Vue所管理的函数，this的指向是 vm 或 组件实例对象；
4.只有配置在data里的数据，vue才会做数据劫持和数据代理，methods里的则不会，因为methods中的函数只是用来被调用而不需要做修改，所以不需要做数据代理；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参，(@click=“demo” 时默认传递了 $event)；
6.如果在传参时仍想使用事件对象，则用 $event在实参中占位。

4.v-show 指令

v-show 用于条件渲染（动态控制节点是否展示）

语法 v-show="表达式"

5.v-if 指令

v-if 用于条件渲染（动态控制节点是否存在）

语法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"

⭐Vue中有2种条件渲染的方式：
1.v-show
适用于切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
2.v-if
适用于切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if 可以和 v-else-if、v-else一起使用，但要求结构不能被“打断”。

备注：
1.使用v-if 的时候，元素可能无法获取到，而使用v-show一定可以获取到。
2.v-else后面不用写表达式，写了也不会奏效。
3.多个结构应用同一判断条件时，可以用template进行包裹，不影响结构，但是只能配合v-if 使用，不能配合v-show。

6.v-for 指令

v-for 用于展示列表数据，遍历数组/对象/字符串

语法