Vue其他指令（v-cloak和v-text,v-html,v-pre,v-once）

1.v-once指令

日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-once 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- msg不会改变 -->
            <p v-once>{{msg}}</p>

            <!-- msg会改变 -->
            <p>{{msg}}</p>

            <p> <input type="text" v-model="msg" name=""> </p>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
    });
</script>

 

2.v-text指令

和插值表达式（双花括号）相似，渲染标签内容。

初始标签内没内容，不会出现插值表达式的闪烁问题。

v-test对应的数据会完全覆盖标签中的内容；插值表达式只会替换自己的占位符，其他内容不变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-text 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 
            在指令中不要写插值语法
            直接写对应的变量名称
            在 v-text 中 赋值的时候不要在写
            插值语法 一般属性中不加 {{}}
            直接写 对应 的数据名 -->
            <p v-text="msg"></p>
            <p v-text="word"></p>

            <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
            <p>{{msg}}</p>
            <p>{{word}}</p>

        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello",
            word:"<h1>hello</h1>"
        },
    });
</script>

 

3.v-html指令

v-html对应的数据会完全覆盖标签中的内容，但会把对饮数据当作html解析到页面上，而插值表达式和v-text只会把数据当作普通文本加载到页面上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-html 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <p v-html="msg"></p>
            
            <p>{{msg}}</p>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: '<h1>我是一个html标签！</h1>'
        },
    });
</script>

 

4.v-pre指令

显示原始信息跳过编译阶段，跳过这个元素和他的子元素编译过程，一些静态的内容不需要编译加这个指令可以加快渲染。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-pre 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <span v-pre>{{ 我不需要被编译 }}</span>
            <!--  显示的是{{ 我不需要被编译 }}  -->
            <span v-pre>{{msg}}</span>
            <!--  即使data里面定义了msg这里仍然是显示的{{msg}}  -->
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: 'Hello Vue',
        },
    });
</script>

 

5.v-cloak

网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-cloak 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        /*通过属性选择器 选择到带有属性v-cloak的标签 让他隐藏 */
        [v-cloak] {
            /* 元素隐藏*/
            display: none;
        }
    </style>
    <body>
        <div id="app">
            <!--让带有插值 语法的   添加 v-cloak 属性 
                在数据渲染完场之后，v-cloak 属性会被自动去除，
                v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
                也就是对应的标签会变为可见
            -->
            <div v-cloak>{{msg}}</div>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: 'Hello Vue',
        },
    });
</script>

 

posted @ 2020-05-12 23:36  杵臼  阅读(203)  评论(0)  编辑  收藏  举报