Vue入门
vue内部指令---------v-pre & v-cloak &v-once指令
- v-pre指令：跳过vue的编译，直接输出原始值。在标签中加入v-pre就不会输出vue中的data值了
- v-cloak指令：在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
- v-once指令：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
v-pre指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>这是data里面的数据：{{messages}}</p>
<p v-pre>这是data里面的数据，但是加了v-pre指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-pre指令测试'
}
})
</script>
</body>
</html>
运行结果：
使用了v-pre指令后，将直接输出原始值，不进行vue编译
v-cloak指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>这是data里面的数据：{{messages}}</p>
<p v-cloak>这是data里面的数据，但是加了v-cloak指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-cloak指令测试'
}
})
</script>
</body>
</html>
运行结果：
附：
因为加载的原因，可能看不出v-cloak指令的效果，但是v-cloak指令是在整个DOM渲染完才显示的。
可以使用 v-cloak 指令来解决屏幕闪动的问题
例子：
在css中：
[v-cloak]{
display: none;
}
<div id="app" v-cloak>
{{context}}
</div>
v-once指令
v-once指令只进行一次渲染，渲染完成后就是静态的了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre指令&v-cloak指令&v-once指令</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<p>这是data里面的数据：{{messages}}</p>
<p v-pre>这是data里面的数据，但是加了v-cloak指令之后，直接跳过vue编译，所以直接显示内容: {{messages}}</p>-->
<p v-once>这是vue的测试内容:{{messages}}</p>
<input type="text" v-model="messages"/>
<p>这是vue的测试内容，实现了数据源的绑定：{{messages}}</p>
</div>
<script>
var demo=new Vue({
el:'#app',
data:{
messages:'我是一个v-cloak指令测试'
}
})
</script>
</body>
</html>
运行结果：
