<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="vue.js"></script>
</head>
<body>
<!-- vue实例的挂载点 -->
<!-- 模版可以写在挂载点里面，也可以写在实例里的template属性里面 -->
<div id="root">
<!-- 插值表达式 -->
<h1>{{msg}}</h1>
<h2 v-text="number"></h2>
<h3 v-html="number"></h3>
<!-- 转义,显示<h1>hello</h1> -->
<div v-text="content"></div>
<!-- 不转义，显示hello -->
<div v-html="content"></div>
<!-- 绑定事件v-on: -->
<div @click="handleClick">{{msg}}</div>
</div>
<script>
// 创建一个vue实例，让vue实例接管id=root元素里面的内容，这个vue实例就和id为root的dom进行了绑定
new Vue({
el:"#root",
// 模版可以写在实例里面
// template:'<h1>hello {{msg}}</h1>',
data:{
msg:" world",
number:123,
content:"<h1>hello</h1>"
},
methods:{
handleClick:function(){
this.msg = "hello"
}
}
})
</script>
</body>
</html>
因为其余所有的div都在id = root 这个挂载点下，里面的msg的值全由你实例data里msg的值决定，而this.msg改变的是实例里msg的值，数据源头改变了，自然全部改变
因为msg都是vue实例data下的msg，点击事件只有一个div有，但是改变的是data中的数据，所有 所有的msg都变了，点击事件唯一，msg唯一，msg的值的引用可以多个