{{}} (文本插值)
使用 {{...}}(双大括号)的文本插值

v-html (Html内容渲染指令)
用于输出 html 代码

v-model(双向绑定)
v-model指令,能让数据双向绑定

v-if、v-else (条件渲染)
v-if、v-else 条件指令,可以让我们使用if-else逻辑动态显示内容

v-show (条件显示指令)
适合频繁切换的场景,v-show指令为更改元素的display属性来达到显示、隐藏,而v-if、v-else指令为DOM操作,并不适合频繁地切换

v-for (列表遍历)
列表标签可以说是最常用的元素


v-bind(属性绑定)
可以绑定属性和样式,简写:


v-on (事件处理)
可绑定点击事件,简写@

. (修饰符)
以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

网友评论