Vue 内置指令

在Vue中，指令其实就是特殊的属性

v-for

基于源数据多次渲染元素或模板块 :key="item.id "是 v-for 的核心 如果没有这个:key 我们的 Vue 就会报错 , 那么为什么会有 Key , Key 要给的参数是什么呢？ Key 的参数是唯一的 , 也就是我们不管循环几次 , 每次循环的 key 不能有重复 , 这里我们不推荐用 index 来当你的 Key , 说到底，key 的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。在渲染简单的无状态组件时，如果不添加 key 组件默认都是就地复用，不会删除添加节点，只是改变列表项中的文本值，要知道节点操作是十分耗费性能的。而添加了 key 之后，当对比内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。

<li v-for="(item,index) in arr" :key="item.id">
     {{ item.name }}
</li>

v-show

v-show 根据表达式的真假值，切换元素的display值，用于控制元素的展示和隐藏，他的原理其实是控制 css 样式来使得我们对应的组件或者盒子显示 ，隐藏 dispaly:"none" ，显示 dispaly:"block"

v-if

v-if 是根据条件创建和销毁 Dom

v-else

v-if 条件不成立的时候就会直接走到 v-else 上去,组件之前必须要跟 v-if

<div v-if="false"> 看不到  </div> // 我条件不成立不创建Dom
<div v-else> 能看到 </div>

v-else-if v-if 条件不成立的时候就会直接走到 v-else-if 上去看条件判断成立不成立 , 条件成立就渲染组件,组件之前必须要跟 v-if

<p v-if="score>=90">优秀</p>
<p v-else-if="score>=60">及格</p>

v-once

它的作用就是定义它的元素或组件只会渲染一次 , 当第一次渲染之后也不会随着数据的更新而来进行重新渲染,就相当于一个静态内容

v-text

以文本的方式来插入数据 , 是用于操作纯文本 , 他是会替代本身元素上面的内容，如果数据更新随之试图也会发生改变

<p v-text="str">xxxxxx</p>  // xxxxxx并不会显示，被替代了

data(){
    retrun {
        str:'v-text文本内容'
    }
}

v-html

v-html用于更新元素的 innerHTML，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

v-on

v-on 有一个简便的写法就是@ 简单来说v-on就是绑定事件 ， 可以在一个标签绑定多个事件 , v-on:第一个是事件 ， 事件后面跟着一个自定义方法

 <button v-on:mouseenter='onenter' @click='leave'>click me</button>

v-bind

v-bind 也有一个简便的写法就是: 简单来说v-on就是用于绑定数据和元素属性 ， 最常用的方法就是用于动态绑定class

v-model

v-model是Vue双向绑定指令 ， 它可以在页面是输入的状态同时改变绑定data属性 ， 也会在data属性发生改变的时候也更新页面的状态 ， 我们经常在input上面能发现他的存在 ， 他的本质上其实是绑定了<input :value="test" @input="test = $event.target.value"> ，

• v-model后面可以跟修饰符比如 .lazy 、.trim 和 .number 这些修饰符一起使用
  • .lazy 将input的实时更新改为一个change事件 ， 只有失焦的时候input才会触发事件
  • .trim 去除字符串首尾的空格
  • .number 将数据转化为值类型

<input v-model="test">
<input v-model.lazy="msg" >
<input v-model.trim="msg">
<input v-model.number="age" type="number">

v-cloak

v-cloak指令主要用于解决插值表达式在页面闪烁问题

<div v-cloak>
  {{ message }}
</div>

[v-cloak] {
  display: none;  
  /* 这样div只会在编译结束后显示 */
}