【Vue】内置指令

1、v-bind与v-model指令

v-bind用于数据的单项绑定，有两种写法。一种是v-bind:value=“name”，另一种写法是它的简写形式，:value=“name”

v-model用于数据的双向绑定也有两种写法，一种是v-model:value=“name”，另一种是它的简写形式，v-model=“name”

这两个指令中""号内的name是通过data配置项中的属性来绑定的

2、v-text与v-html指令

v-text指令用于向其所在的节点渲染文本内容，与插值语法有区别v-text指令 会替换掉文本中的所有内容，而插值语法默认是拼接。它不能解析标签，如在data配置项中配置一个属性，str:'<h3>你好啊</h3>'，页面上对应的节点处会输出<h3>你好啊</h3>而并非

你好啊

v-html指令可以识别标签，用于向指定节点中渲染包含html结构的内容。v-html会替换掉节点中所有的内容，插值语法{{xx}}不会。一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上，存在安全隐患，容易被xss注入。

3、v-cloak指令

v-cloak指令本质是一个特殊的指令，没有值，在Vue创建完并接管实例后删除该指令。常常和CSS的属性选择器配合使用，可以解决网速慢时页面展示出{{xxx}}的问题。

<style>
        [v-cloak]{
            display: none;
        }
</style>

<div id="root">
            <h2 v-cloak>{{name}}</h2>
</div>
<script>
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'Clean',

                }
            })
</script>

4、v-once指令

v-once指令也是一个特殊指令，没有赋值，在Vue完成初次渲染后就视为静态内容了，所在的节点只渲染一次。以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

5、v-pre指令

v-pre指令所在的节点不会被Vue解析，可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译速度

6、v-if和v-show指令

两者都属于条件渲染的方式，都用于控制所在节点的可见性。

v-show指令本质上使用了display属性，v-show="true"则显示v-show="false"则隐藏，当然true和false也可以用表达式来代替。

v-if指令语法与v-show基本一致，但是他本质上用的不是display属性，v-if="false"时，在经过Vue解析完成后会删除所在节点。也可以配合v-else-if与v-else使用，使用方法和if类似。

<h1 v-if="n === 1">Angular1</h1>
<h1 v-else-if="n === 1" >React2</h1>
<h1 v-else-if="n === 2" >Vue3</h1>
<h1 v-else >哈哈哈哈哈哈啊哈哈哈</h1>

注意：中间不能穿插其它节点，否则会破坏结构。只显示符合条件的一个节点

v-for指令

v-for指令用于列表渲染，本质上对所在节点进行遍历。可遍历数组、对象、字符串（用的少）、制定次数（用得少）

 <li v-for="(p,index) in persons" :key="p.id" >

        p是形参，可以是任意字符.
        在用了v-for这种遍历的方式，生成了多个同样结构的数据，必须给他每一个结构起一个名字，或者打个标识，这个key就是每一个结构的标识
        如li用了v-for遍历，则需要用：key，确保生成的三个li都有唯一标识符
        也可以用v-for="p on persons"
        index是对应的索引值