一、Vue2笔记--基础篇--15-Vue内置指令v-text、v-html、v-cloak、v-once、v-pre

目录

       v-text指令： ---------------   （相当于innerText）

       v-html指令（慎用）： --------------------   （相当于innerHTML）

       v-cloak指令（没有值）：

       v-once指令（没有值）：

       v-pre指令（没有值）：

---

                我们学过常见的指令：

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

                        v-model : 双向数据绑定

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

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

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

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

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

•        v-text指令： ---------------   （相当于innerText）

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

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

    
    

        
你好，{{name}}
        

        

        
{{str}}
        

    

•        v-html指令（慎用）： --------------------   （相当于innerHTML）

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

                        2.与插值语法的区别：

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

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

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

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

                                    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

                        Cookies 在页面检测的 Application 中，登录网站后，网站所在的数据库会携带cookie过来，只要拿到别人在这个网站的cookie，就可以登录别人的账号

                        cookie导入所有键值键的插件 : Cookie-Edior

•        v-cloak指令（没有值）：

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

                        2.使用css配合v-cloak可以解决网速慢时页面展示出未解析模板{{xxx}}的问题。

                                        [v-cloak] {
                                                display: none;
                                        }

                        延迟加载，如果放上最上面，那么会发生堵塞，下面全部不会加载，如果放在页面最后，会先加载上面的模板，
                        这个时候，我们需要用 v-cloak 来隐藏它，使页面不会在加载等待中出现模板变量
                        一旦加载到Vue实例，就会自动把v-cloak去掉

    
    

        
        
{{name}}
    

    
    
    

•        v-once指令（没有值）：

                        1.v-once所在节点在初次动态渲染后，就视为静态内容了。也就是后面它怎么变，设置v-once的都不会改变

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

                        3.它是没有值的

•        v-pre指令（没有值）：

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

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

                        3.也就是说，加了之后，Vue将不会对该标签进行解析，加快编译的速度