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命名。