vue @click 赋值_从零玩转Vue全家桶（三）

点点关注不迷路，江哥带你上高速~

本系列文章为Vue.js的学习，《Vue全家桶+项目实战》和《手写Vue全家桶》系列课程已完结，请在知播渔官网(www.it666.com)上点击查看学习哦。

本章内容为Vue.js内置指令的使用，请配合前两章结合食用，效果更佳哦~

Vue 指令

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for，之后再讨论)。指令的职责是当其表达式的值改变时相应地将某些行为应用到 DOM 上。主要在条件渲染、列表渲染、Class 与 Style 绑定、表单输入绑定等几方面会用到 Vue 中的重要指令。

Vue.js 本身提供了大量的内置指令来进行对 DOM 的操作，当数据变化时，指令通过改变表达式的值从而响应式地改变 DOM。我们也可以开发自定义指令。今天这部分先来讲讲内置指令的使用。

v-once

1.Vue 数据绑定的特点是只要数据发生变化，界面就会跟着变化，而v-once让界面不要跟着数据变化，只渲染一次。

"app">

{ { name }}

{ { name }}





2.结果：

3.解析：

添加了v-once指令的标签，当实例中的 name 修改之后，渲染内容没有变化；而未添加v-once指令的标签，实例中的 name 修改之后，渲染内容也随之变化。

v-cloak

1.Vue 数据绑定过程

1.1 先将未绑定数据的界面展示给用户；

1.2 再根据模型中的数据和控制的区域生成绑定数据之后的 HTML 代码；

1.3 最后再将绑定数据之后的 HTML 渲染到界面上。

注意：在最终的 HTML 被生成渲染之前会先显示模板内容，所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容

2.解决

利用 v-cloak 配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面，等到生成 HTML 渲染之后再重新显示。

"app">

{ { name }}






v-html 和 v-text

1.v-text 读取文本，参数类型为 String，作用是更新元素的 textContent。v-text 需要绑定在某个元素上，能避免未编译前的闪现问题。

2.v-html 读取 html 标签。参数类型为 String，作用为更新元素的 innerHTML，接受的字符串不会进行编译等操作，按普通 HTML 处理。v-html也需要绑定在某个元素上且能避免编译前闪现问题。

"app">

"name">

"msg">