<!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>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--可以通过Mustache语法(也就是双大括号)
Mustache: 胡子/胡须.
使用：在标签的内容处使用-->
<div id="app" v-cloak>
<!--不常用，做了解
v-cloak不希望在页面一加载出现 {{}}
在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak -->
<h2 v-pre>{{message}}</h2>
<!-- 即跳过编译标签内容 -->
<!-- 直接显示标签内的内容 此处显示{{message}} 也就是不解析 -->
<h2>{{message}}</h2>
<!-- v-once作对比 -->
<h2 v-once>{{message}}</h2>
<!-- 即不需要响应 -->
<!-- 在console中输入app.message = '哈哈哈' 上面的改变 ，带有v-once的内容不会跟随改变，只显示初始的内容 -->
<h2>{{url}}</h2>
<!-- 对比 -->
<h2 v-html="url"></h2>
<!-- 将标签的html内容解析并渲染出来 -->
<h2>{{message}},影子</h2>
<!-- 对比 此处直接拼接 -->
<h2 v-text="message">,影子</h2>
<!--不太好使，一般不用
message直接覆盖掉标签内容 -->
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '来了来了',
url: '<a href="http://www.baidu.com">来 百度一下</a>'
}
})
</script>
</body>
</html>