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” 时默认传递了