【08】Vue基础：其他指令

前端

发布日期: 2020-10-23

更新日期: 2020-10-23

文章字数: 501

阅读次数:

v-once 指令

只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-once</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-once>{{ msg }}</div>
            <input v-model="msg" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        msg: 123
                    }
                }
            })
        </script>
    </body>
</html>

在浏览器中运行代码时可以发现，在文本框中输入内容时，div元素中的内容并没有跟着改变，这是因为在浏览器运行时，DOM元素已经渲染完成了。

v-pre 指令

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-pre</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-pre>{{ msg }}</div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        msg: 123
                    }
                }
            })
        </script>
    </body>
</html>

在浏览器中运行代码时可以看到，页面显示的内容为。

v-cloak 指令

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
css写法：

[v-cloak] {
    display: none;
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-cloak</title>
        <style type="text/css">
            [v-cloak] {
                display: none;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="app">
            <div v-cloak>{{ msg }}</div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data() {
                    return {
                        msg: 123
                    }
                }
            })
        </script>
    </body>
</html>