v-cloak： 解决屏幕闪现的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令。
v-pre： 跳过这个元素和它的子元素的编译过程，直接显示。
v-once： 只加载一次 ，后面数据改变也不会改变
我是分割线
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--编译才显示 避免闪现 {{ message }} 注意加在根vue控件上-->
<div id="app" v-cloak>
<!-- v-pre 跳过编译直接显示 {{ message }}-->
<div v-pre>{{ message }}</div>
<div>{{ message }}</div>
<!-- 只加载一次 ，后面数据改变也不会改变-->
<div v-once> {{ message }} </div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hi',
},
methods: {
}
});
</script>
</body>
</html>
我是分割线
前台效果：
vue指令 {{ message }}{{ message }}{{ message }}