1、文本类指令
{{}}、v-text 都是用于绑定节点的文本;
二者区别：{{}}这种绑定值的方式在页面会出现“{{}}”一闪而过的效果
解决{{}}在页面出现一闪而过的办法:
// css:
[v-cloak] {
display: 'none'
}
// html
<h1 v-cloak>{{msg}}</h1>
v-once 用于指令节点的内容只绑定一次，当前节点中所对应的变量变化，视图不更新。
通常情况下，v-once只能和{{}}一起用
v-html 用于绑定动态的html节点，相当于DOM中的innerHTML，这个指令默认已经做了"防注入攻击XSS"的处理。
v-once和v-cloak都不需要接收表达式来作为值
2、动态属性指令
v-bind 用于动态绑定节点属性(如：title,value,class,style等);经常简写成":属性名"
动态class语法1 <div :class="变量1 变量2"></div> 动态class语法2 <div :class="[表达式1,表达式2,...]"></div> 动态class语法3 <div :class="{类名1:布尔值1,类名2:布尔值2,...}"></div> 动态class语法1 <div :style="`color:red;fontSize:20px`"></div> 动态class语法2 <div :style="[{k1:v1,k2:v2},{k3:v3},...]"></div> 动态class语法3 <div :style="{k1:v1,k2:v2,....}"></div> 这三种语法可以交叉使用，但实际上很少有人交叉使用。 3、事件绑定v-on 用于给视图绑定各种js事件，比如：click，mouseenter,blur等,简写成: "@事件名"
事件修饰符：.stop 阻止冒泡 ，.enter等，可以链式调用。
4、表单绑定
v-model 用于表单取值（表单双向绑定），比如input/select/textarea等。
表单三个修饰符：.trim自动去除文本首尾空格
.number只能输入数字
.lazy 用于性能，当表单失去焦点时再进行双向绑定
5、列表渲染
v-for 用于渲染列表、对象等。
6、条件渲染
v-show 相当于控制节点的display: none/block
v-if / v-else-if / v-else 这是真正的移除或插入视图节点，比较耗费性能,不建议和v-for一起使用。
v-for的优先级比v-if更高。
7、其它指令
v-pre 用于调试，可以阻止vue编译器对指令的编译
v-slot 指定具名插槽
标签：vue,绑定,class,语法,指令,动态,节点 From： https://www.cnblogs.com/cz-basic/p/16908283.html