只在一個(gè)div里面添加了點(diǎn)擊事件，為什么所有msg都改變了
<html>
<head>
<meta charset="UTF-8">
<title>Vue入門</title>
<script src="vue.js"></script>
</head>
<body>
<!-- vue實(shí)例的掛載點(diǎn) -->
<!-- 模版可以寫在掛載點(diǎn)里面，也可以寫在實(shí)例里的template屬性里面 -->
<div id="root">
<!-- 插值表達(dá)式 -->
<h1>{{msg}}</h1>
<h2 v-text="number"></h2>
<h3 v-html="number"></h3>
<!-- 轉(zhuǎn)義,顯示<h1>hello</h1> -->
<div v-text="content"></div>
<!-- 不轉(zhuǎn)義，顯示hello -->
<div v-html="content"></div>
<!-- 綁定事件v-on: -->
<div @click="handleClick">{{msg}}</div>
</div>
<script>
// 創(chuàng)建一個(gè)vue實(shí)例，讓vue實(shí)例接管id=root元素里面的內(nèi)容，這個(gè)vue實(shí)例就和id為root的dom進(jìn)行了綁定
new Vue({
el:"#root",
// 模版可以寫在實(shí)例里面
// template:'<h1>hello {{msg}}</h1>',
data:{
msg:" world",
number:123,
content:"<h1>hello</h1>"
},
methods:{
handleClick:function(){
this.msg = "hello"
}
}
})
</script>
</body>
</html>
2020-08-17
因?yàn)槠溆嗨械膁iv都在id = root 這個(gè)掛載點(diǎn)下，里面的msg的值全由你實(shí)例data里msg的值決定，而this.msg改變的是實(shí)例里msg的值，數(shù)據(jù)源頭改變了，自然全部改變
2019-07-09
因?yàn)閙sg都是vue實(shí)例data下的msg，點(diǎn)擊事件只有一個(gè)div有，但是改變的是data中的數(shù)據(jù)，所有 所有的msg都變了，點(diǎn)擊事件唯一，msg唯一，msg的值的引用可以多個(gè)?