Vue基本指令-1

Mustache标签

格式如

<div>
	<p>{{message}}</p>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'Hello world!'
        }
    });
</script>

message是Script标签里的数据。
在浏览器不会显示{{message}}，而是显示Hello world！

v-once 一次性渲染

<div id="app">
    <h4>{{message}}</h4>
    <h4 v-once>{{message}}</h4>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'Hello world!'
        }
    });
</script>

如上代码所示，在浏览器的控制台界面可以修改message的值，若增加v-once指令，则不能修改。

v-html 输出html元素

<div id="app">
    <h4>{{message}}</h4>       
    <h4 v-html="message"></h4>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'<a href="http://www.baidu.com">百度一下</a>'
        }

    });
</script>

v-pre 用于跳过编译

{{message}}，直接显示Mustache标签。

<div id="app">
    <h4>{{message}}</h4>
    <h4 v-pre>{{message}}</h4>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'<a href="http://www.baidu.com">百度一下</a>'
        }

    });
</script>

v-text 显示文本内容

<div id="app">
    <h4>{{message}}</h4>
    <h4 v-text="message"></h4>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'<a href="http://www.baidu.com">百度一下</a>'
        }

    });
</script>

div标签内的两句实际上等价。

v-cloak 设置样式（cloak n.斗篷）

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<div id="app">
    <h4>{{message}}</h4>
</div>

<script>
    const app=new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
            message:'Hello'
        }

    });
</script>

如上，有一秒可能显示出 {{message}} ，而非 Hello 。

<div id="app">
    <h4 v-cloak>{{message}}</h4>
</div>

css中：

[v-cloak]{
    display: none;
}

在原来可能会显示{{message}}的那一秒，就会显示空白。

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令了。