Vue中常用的指令

Vue中常用的指令

v-bind 单向绑定，简写为"冒号"

 

v-model 双向绑定

 

v-on 绑定事件监听，简写为@

 

 

v-show  条件渲染

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式 隐藏掉

<h2 v-show="false">欢迎来到{{name}}</h2>

 

v-if  条件渲染

写法：

　　（1）v-if="表达式"

　　（2）v-else-if="表达式"

　　（3）v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和：v-else-if、v-else 一起使用，但要求结构不能被打断

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

 

v-for  列表渲染

 用于展示列表数据

语法：

　　v-for="(item,index) in xxx" :key="yyy"

可遍历：数组、对象、字符串(用的比较少)、指定次数(用的很少)

<ul>
    <li v-for="(p,index) of persons" :key="user_id">
        {{p.name}}-{{p.age}}
    </li>
</ul>

面试题：react、vue中key有什么作用？（key的内部原理）

（1）虚拟DOM中key的作用：

　　key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，

　　随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下

（2）对比规则

　　a.旧虚拟DOM中找到了与新虚拟DOM相同的key：

　　　　若虚拟DOM中内容没变，直接使用之前的真实DOM；

　　　　若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

　　b.旧的虚拟DOM中未找到与新建虚拟DOM相同的key

　　　　创建新的真实DOM，随后渲染到页面

（3）用index作为key可能会引发的问题：

　　a.若对数据进行：逆序添加，逆序删除等破坏顺序操作；

　　　　会产生没有必要的真实DOM更新，界面效果没问题，但效率低

　　b.如果结构中还包含输入类的DOM

　　　　会产生错误DOM更新，界面有问题

（4）开发中如何选择key？

　　a. 最好使用每条数据的唯一标识作为key，比如：id，手机号、身份证号、学号等唯一值

　　b. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示、使用index作为key是没有问题的

 

v-text指令

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

与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}} 则不会

 

v-html指令

作用：向指定节点中渲染包含html结构的内容

与插值语法的区别：

  （1）v-html会替换掉节点中所有的内容，{{xxx}}则不会

  （2）v-html可以识别html结构

严重注意：v-html有安全问题！！

  （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

  （2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

 

v-cloak指令

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除掉v-cloak属性

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

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

<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>

 

v-once指令

v-once指令所在节点在初始动态渲染后，就视为静态内容了

以后数据的改变不会引起v-once所在结构的更新，可以用于 优化性能

 

v-pre指令

跳过其所在节点的编译过程

可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译