vue中的内置指令

一、v-bind

单向绑定解析表达式，v-bind:xxx简写为:xxx

单向数据绑定：<input type="text" :value="name">

二、v-model

双向数据绑定，v-model:xxx简写v-model

双向数据绑定：<input type="text" v-model="name">

三、v-for

遍历数组、对象、字符串；

<ul>
     <li v-for="(p,index) in filterPersons" :key="index">
         {{p.name}}-{{p.age}}-{{p.sex}}
     </li>
</ul>

四、v-on

绑定事件监听，可简写为@，例：@click="..."

五、v-if、v-else-if、v-else

条件渲染（动态控制节点是否存在）

<div v-if="n===1">html</div>
<div v-else-if="n===2">css</div>
<div v-else-if="n===3">js</div>
<div v-else>hhhh</div>

六、v-show

条件渲染（动态控制节点是否展示）

 <div v-show="n===1">html</div>
<div v-show="n===2">css</div>
<div v-show="n===3">js</div>

七、v-text

向其所在的节点中渲染文本内容

与插值语法的区别：如果文本中原本存在内容，则会替换掉原本的内容，而插值语法不会

<h2 v-text="text"></h2>

ps：text是new Vue中定义的一个变量

八、v-html

能够向指定节点中渲染html结构的内容，与v-text类似，都能够替换节点已存在的所有内容

下面例子结构相当于：<h3><a>...</a></h3>

<div id="root">
        <h3 v-html="text"></h3>
</div>

new Vue({
        el:"#root",
        data:{
            text:"<a href='http://www.baidu.com'>点我跳转到百度<a>"
        }
})

存在安全性问题：

（1）在网站上任意渲染html结构是危险的，容易导致xss攻击；

（2）一定要在可信的网站上才使用，永远不要用在用户输入提交的内容上；

cookie：

用于保存用户账号等个人信息，获取cookie就能够在其他浏览器登录某一个用户的账号，是非常重要的信息；

九、v-cloak

该属性没有值，会在vue实例接管容器的一瞬间自动销毁，配合css样式用于防止vue代码直接显示在页面上；

<style>
        [v-cloak]{
            /* 当vue实例未接管节点时，所设置的v-cloak属性存在，display为none，实现将vue原代码隐藏的功能 */
            display: none;
        }
</style>

<div id="root">
        <!-- 当vue实例解析完毕接管节点，v-cloak瞬间销毁，display不等于none，就可以显示在页面上 -->
        <h2 v-cloak>{{name}}</h2>
</div>

十、v-once

该属性没有值，设置了v-once的节点在初次动态渲染后就会成为静态内容，之后数据的改变不会影响v-once的内容；

下面例子的第一个n设置了v-once，一直都等于1；第二个n没有设置v-once，会随着按钮的点击逐渐增加；

<div id="root">
        <h3 v-once>n的初始值为：{{n}}</h3>
        <h3>n的实时变化值为：{{n}}</h3>
        <button @click="n++">点我实现n+1</button>
</div>

十一、v-pre

作用于静态内容，用于跳过解析，加快编译速度；

<div id="root">
        <h2 v-pre>这个部分没有用到vue语法，不需要解析</h2>
        <!-- 如果给下面的语句加v-pre，就会跳过而无法解析 -->
        <h2>{{text}}</h2>
</div>