04-Vue指令

image

什么是指令

官方解释: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

其实指令就是Vue内部提供的一些自定义属性,
这些属性中封装好了Vue内部实现的一些功能
只要使用这些指令就可以使用Vue中实现的这些功能

Vue中常用的指令

1. v-once

在将这个指令之前我们先来回顾Vue数据绑定的特点: 只要数据发生变化, 界面就会跟着变化。
而这个指令的作用就是让界面不要跟着数据变化, 只渲染一次, 这样可以优化更新性能。
例如:

原始数据: {{message}}

当前数据: {{message}}

在这个代码中, 无论你这么修改message的值, 第一个 P标签 中的数据总是 v-once指令 , 而第二个 P标签 中的数据会随着message的值的改变而改变

2. v-cloak

v-cloak指令的作用: 数据渲染之后自动显示元素

在讲这个指令之前我们先来回顾一下Vue数据绑定过程

  1. 会先将未绑定数据的界面展示给用户
  2. 根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
  3. 将绑定数据之后的HTML渲染到界面上

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

{{message}}

在这里如果网速比较慢会先看到{{message}}, 过一段时间才会看到v-cloak指令,所以这样的话用户体验不是很好。
如何解决这个问题
利用 v-cloak 配合 [v-cloak]:{display: none} 默认先隐藏未渲染的界面,等到生成HTML渲染之后再重新显示。
具体用法请看下面的例子:




    
    06-常用指令v-cloak
    


{{message}}

3. v-model

这个指令用于在表单上创建双向数据绑定
只有在