只在一个div里面添加了点击事件,为什么所有msg都改变了
<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>