1.mustache语法：mustache翻译过来就是胡子，而它的语法就是一对{{}}，像极了胡子。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Mustache语法</title>
</head>
<body>
<div id="app">
<h3>{{message}}</h3>
<!--Mustache语法中不仅可以写变量，还可以写简单的表达式-->
<h3>{{firstName + lastName}}</h3>
<h3>{{count *6}}</h3>
<h3>{{firstName + ' ' + lastName}}</h3>
<h3>{{firstName}} {{lastName}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀~',
count: 100,
firstName: 'Luffy',
lastName: 'Harris'
}
});
</script>
</body>
</html>2.v-onece指令：该指令后面不需要跟任何表达式，表示元素或组件只需要渲染一次，不会随着数据的改变而改变。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-once指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<!--v-once 表示只渲染一次DOM，不会随着数据的变动而变动-->
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀~'
}
});
</script>
</body>
</html>
3.v-html指令：当后台给我们返回的数据是一个html字符串时，需要用到该指令。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-html指令的使用</title>
</head>
<body>
<div id="app" v-html="url"></div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
url:'<a href="https:www.baidu.com">百度一下，你就知道</a>'
}
});
</script>
</body>
</html>4.v-text指令：类似于mustache语法，但它是有缺陷的，因为它会覆盖掉标签里面的内容，不建议使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-v-text指令的使用</title>
</head>
<body>
<div id="app">
<h3>{{message}},熊大</h3>
<!-- v-text指令与Mustche语法类似，但它有缺陷，会覆盖掉后面的内容，一般不建议使用-->
<h3 v-text='message'>熊大</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀~'
}
});
</script>
</body>
</html>5.v-pre指令：当我们想展示mustache原本的内容时，可用该指令跳过Vue编译，很少用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-v-pre指令的使用</title>
</head>
<body>
<div id="app">
<h3>{{message}}</h3>
<h3 v-pre>{{message}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀~'
}
});
</script>
</body>
</html>6.v-cloak指令：翻译过来是斗篷的意思，在某些情况下，比如网络延迟导致数据延迟获取，此时网页上就会展示未经Vue解析的mustache内容，此时我们就可以通过v-cloak指令处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-cloak指令的使用</title>
<style>
/*
-在某些情况下，我们浏览器可能会直接显示出未经Vue解析的mustache内容
-在Vue解析之前，div中有一个v-cloak属性，解析之后会删除这个属性，
于是我们可以根据属性的有无来判断Vue是否解析完成，进而控制界面
内容的隐藏和展示
*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
<!-- 模拟网络延时一秒后获取到数据-->
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好呀~'
}
})
}, 1000);
</script>
</body>
</html>
