[JavaScript知识库]Vue：渲染，key的作用，指令

一、渲染

? ? ? ? ? 条件渲染：

? ? ? ? ? 1.v-if ：适用于切换频率较低的

??????????????????????不展示的dom元素会直接删除?

? ? ? ? ? ?2.v-show：适用于切换频率较高的

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?不展示的dom元素会被隐藏

? ? ? ? ? ?3.注意：(1)使用v-if时，元素可能无法获取到，而使用v-show一定可以

? ? ? ? ? ? ? ? ? ? ? ? ?(2)template只能与v-if使用

? ? ? ? ? ?4.v-if可以与v-else-if以及v-else使用

        <h2 v-if="false">{{name}}</h2>  
        <h2 v-else-if="false">{{name}}</h2>  
        <h2 v-else>{{name}}</h2>  

? ? ? ? ? ? 5.注意：v-if必须写在最前面，并且语句中间不能被打断

? ? ? ? ? ? 列表渲染：? v-for

二、key的作用

1。虚拟DOM中key的作用:

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

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

2。对比规则：

????????????????????(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

????????????????????????1.若虚拟DOM中内容没变，直接使用之前的真实DOM?!

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

????????????????????(2).旧虚拟DOM中未找到与新虚拟DOM相同的key：

?????????????????????????创建新的真实DOM,随后渲染到到页面。

3。用index作为key可能会引发的问题:

????????????????????1。若对数据进行:逆序添加、逆序删除等破坏顺序操作:

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

????????????????????2.如果结构中还包含输入类的DON:

????????????????????????????会产生错误DOM更新==>界面有问题。

?4.开发中如何选用key：

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

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

三、指令

• 内置指令：

  ? ? ? ? ? v-?bind:单向绑定解析表达式，可简写为:xxv-model?:双向数据绑定

  ? ? ? ? ? v-for:遍历数组/对象/字符申

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

  ? ? ? ? ? v-if:?条件渲染(动态控制节点是否存存在)

  ? ? ? ? ? v-else:条件渲染(动态控制节点是否存存在)

  ? ? ? ? ? v-show:条件演染(动态控制节点是否展示)

  ? ? ? ? ? v-text指令:

  ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.作用:向其所在的节点中渲染文本内容。

  ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.与插值语法的区别:?v-text会?替换掉节点中的内容，{{xx}则不会?。

  ????????v-html指令:??????????????????

  ??????????????????1.作用:向指定节点中渲染包含htm1结构的内容。

  ??????????????????2.与插值语法的区别:

  ????????????????????????????????????(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

  ????????????????????????????????????(2).v-?html可以识别html结构。

  ??????????????????3.严重注意:?v-html有安全性问题!?!?!?!

  ????????????????????????????????????(1).在网站上动态演染任意HTML是非常危险的。容易导致女ss攻击。

  ????????????????????????????????????(2).”定要在可信的内容上使用v-html.永不要用在用户提交的内容上!

  ????????v-cloak指令(没有值)?:

  ? ? ? ? ? ? ? ? ? ?1.本质是个特殊属性，Vue实例创建完毕并接管容器后，公制掉v-cloak属性。

  ? ? ? ? ? ? ? ? ? ?2.使用css属性选择器配合v-cloak可以解决网速慢时页面展示出(?{xxx}}的问题。

  ???????????v-once指令:

  ? ? ? ? ? ? ? ? ? ?1.v-once所在节点在初次动态渲染后。就视为静态内容了。

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

  ????????????v-pre指令:

  ????????????????????1.跳过其所在节点的编译过程。

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

• 自定义指令：

  ? ? ? ? ?一、定义语法:

  ? ? ? ? ? ? ? ? ? ? ? (1).局部指令:

  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new?Vue({? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new?Vue({

  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? directives:{指令名:配置对象}???或????????????directives{指令名:回调两数}

  ????????????????????????????????????????????})? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })????????

  ? ? ? ? ? ? ? ? ? ? ? ? (2).全局指令:

  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Vue?.?directive(指令名,配置对象)或Vue.?directive(指令名,回调函数)

  ? ? ? ? ? ?二、配置对象中常用的3个问题

  ????????????????????????????????????????????(1).bind:指令与元素成功绑定时调用。

  ????????????????????????????????????????????(2).inserted:指令所在元素被插入页而时调用。

  ????????????????????????????????????????????(3).update:指令所在模板结构被重新解析时调用。

  ? ? ? ? ? ? ?三备注:

  ????????????????????????????1.指令定义时不加v-，但使用时要加Iv-:

  ????????????????????????????2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。