v-text 作用和 Mustache 比较相似：都是用于将数据显示在界面中
v-text 通常情况下，接受一个 string 类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="d1"></h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
d1:'你好!'
},
});
</script>
</body>
</html>
v-pre 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法。
比如下面的代码：
第一个 h2 元素中的内容会被编译解析出来对应的内容
第二个 h2 元素中会直接显示 {{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{d1}}</div>
<div v-pre>{{d1}}</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
d1:'你好'
},
});
</script>
</body>
</html>
在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签。
cloak : 斗篷
v-cloak理解：
代码从上往下执行，当执行完dom，没来得及执行<script>，网页显示出来的就是{{d1}}
很难看，所以加个v-cloak属性
在Vue解析之前，这个属性存在，<style>里设置display不可见
在Vue解析之后，这个属性就没了，网页正常显示
<div id = "app">
<h2 v-clock> hello, {{name}}</h2>
</div>
<script>
setTimeout (() => {
let app = new Vue({
el: 'app',
data: {
name : 'vuejs'
}
})
},10000)
</script>
<style>
[v-clock] {
display: none
}
</style>
