只在一個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>
<!-- 轉(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)建一個vue實例,讓vue實例接管id=root元素里面的內(nèi)容,這個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>
2020-08-17
因為其余所有的div都在id = root 這個掛載點下,里面的msg的值全由你實例data里msg的值決定,而this.msg改變的是實例里msg的值,數(shù)據(jù)源頭改變了,自然全部改變
2019-07-09
因為msg都是vue實例data下的msg,點擊事件只有一個div有,但是改變的是data中的數(shù)據(jù),所有 所有的msg都變了,點擊事件唯一,msg唯一,msg的值的引用可以多個?