标签：viewport 渲染 doc inpu 跳过 显示 pre 绑定 dev
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>
这时我们就无法获得message的值了，会直接输出{{message}}。
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
<div v-cloak>
{{ message }}
</div>
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-pre & v-cloak & v-once 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre & v-cloak & v-once实例</h1>
<hr>
<div id="app">
<div v-pre> {{message}} </div>
<div v-cloak> 渲染完成后，才显示 {{message}} </div>
<div v-once> {{message}} </div>
<div> <input type="text" v-model="message"> </div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:‘Hello World!‘
}
})
</script>
</body>
</html>
标签：viewport 渲染 doc inpu 跳过 显示 pre 绑定 dev
原文地址：https://www.cnblogs.com/xiaofandegeng/p/9001679.html
