指令的本质就是 HTML 自定义属性
Vue.js 的指令就是以 v- 开头的自定义属性
内容处理
- v-once 指令
- v-text 指令
- v-html 指令
v-once指令
- 使元素内部的插值表达式只生效一次。
v-text指令
元素内容整体替换为指定纯文本数据。
v-html 指令
元素内容整体替换为指定的 HTML 文本。
属性绑定
- v-bind 指令
- Class 绑定
- Style 绑定
v-bind 指令
用于动态绑定 HTML 属性。
Vue.js 还为 v-bind 指令提供了简写方式。
<p v-bind:title="mytitle">这里不写html没有文字</p>
<p :title="mytitle">这里不写html没有文字</p>
- 与插值表达式类似,v-bind 中也允许使用表达式。
- 如果需要一次绑定多个属性,还可以绑定对象。
Class 绑定
- class 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 class 属性共存。
- 对于 class 绑定, Vue.js 中还提供了特殊处理方式。
style 绑定
- style 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 style 属性共存。
- 当我们希望给元素绑定多个样式对象时,可以设置为数组。
渲染指令
v-for 指令
- 用于遍历数据渲染结构,常用的数组与对象均可遍历。
- 通过