Vue 内部指令

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作，循环渲染，显示和隐藏。

基本指令

v-text

v-text 解析文本，更新元素的 textContent 。
用 {{}} 在 HTML中输出 data的值时， 有一个问题： 当网速慢或者JavaScript出错时，会暴露 {{xxx}}，而 v-text 可以避免这个问题

v-html

v-html 解析 html ， 更新元素的 innerHTML。

v-bind

v-bind通常用来动态绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值"

   
v-bind绑定 class

v-bind 可以缩写为 : ，所以上面的也可以写作:

   
v-bind绑定 class

v-bind 应用

绑定 class

1. 变量语法

v-bind:class = "变量"
这里的变量的值，通常是在css定义好的类名

2. 对象语法

v-bind:class = {classname1：boolean，classname2：boolean}
对象的键是类名，值是布尔值。

• 这里的classname1，classname2其实就是样式表中的类名
• 这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。

demo

当 class 的表达式过长或逻辑复杂时，可以绑定一个计算属性，这是一种很友好和常见的用法 ： demo

3. 数组语法

把一个数组传给 v-bind:class，以应用一个 class 列表，在数组语法中也可以使用对象语法： demo

绑定内联样式

demo

v-on

v-on 用来绑定事件监听器， 它的缩写是 @

  

    {{count}}
    add
  
      

v­- cloak

v­- cloak 在 Vue 渲染完指定的整个DOM后才进行显示， 一般与display：none进行结合使用，解决初始化慢导致的页面闪动问题。

[v-cloak] {
  display: none;
}

  {{ message }}

v­-once

只渲染元素和组件一次。
渲染完成后，元素/组件及其所有子节点将被视为静态内容并跳过，可以用于优化更新性能。

  

    
这里没有使用 v-once :{{onceData}}
    
这里使用了 v-once :{{onceData}}
  
  
  

在控制台输入app.onceData = 90看看会发生什么~~

条件渲染指令

v-­if, v­-else-­if ,v­-else

    

      用户名：
      
    
    

      密码：
      
    
    点击切换
  

v-if 的弊端

在上面的例子中，在输入框中输入任何值，点击切换后，发现我们输入的值仍在.....
这是因为： Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙，只会渲染变化的元素，也就是说，input元素被复用了（仅仅是替换了它的 placeholder）。

针对 v-if 的弊端的解决办法 --- 用 key 管理可复用的元素

Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

    

      用户名：
      
      
    
    

      密码：
      
       
    
    点击切换

v­-show

v-show 实际上是改变display 属性，带有 v-show 的元素始终会被渲染并保留在 DOM 中。

  

   
v-show 实际上只是简单地切换元素的 CSS 属性 display
    点击切换
  
  
  

v-if 和v-show 比较

• v-if 有更高的切换开销 —— 判断是否加载DOM，需要就渲染，不需要时移除）
• v-show有更高的初始渲染开销 —— 始终保留在DOM中，切换CSS display

列表渲染指令v­-for

当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-­for。

用法： v-for 写在要遍历的元素上，类似于下面这样：

 

    {{ item.message }}
  

当 v-if 和 v-for一起使用时。v-for 比 v-if 优先级更高

遍历一个数组

参数： item 、index(可选）

  

    

      
 {{index}} -- {{item.bookname}} -- {{item.author}}
    
  
  
  

遍历一个对象

参数： value、 key（可选） 、index（可选）
注意： 顺序不可改变 ，必须是 value,key,index 这样的顺序

  

    

      

       {{index}} - {{key}} - {{value}}