培訓(xùn)代碼

在new Vue()的時(shí)候，是可以給data直接賦值為一個(gè)對(duì)象的。

但是在組件中，data必須是一個(gè)函數(shù),注冊(cè)組件其實(shí)并不產(chǎn)生新的組件類，但會(huì)產(chǎn)生一個(gè)可以用來(lái)實(shí)例化的新方式。

因?yàn)榭赡茉诙嗵幷{(diào)用同一組件，所以為了不讓多處的組件共享同一data對(duì)象，只能返回函數(shù)

data屬性的三種寫法及區(qū)別：

var app=new Vue({

el:'#ap',

data:{

isLogin: false

}

})

var app=new Vue({

el:'#ap',

data: function(){

return {

isLogin: false

}

}

})

var app=new Vue({

el:'#ap',

data() {

return {

isLogin: false

}

}

})

兩個(gè)實(shí)例：

1.用function return 其實(shí)就相當(dāng)于申明了新的變量，相互獨(dú)立

點(diǎn)擊的次數(shù){{counter}}

Vue.component('my-btn', {

template: '#myBtn',

data() {

return {

counter: 0

}

}

})

new Vue({

// el: '#app',

}).$mount('#app')

2.如果不用function return 每個(gè)組件的data都是內(nèi)存的同一個(gè)地址let data2，那一個(gè)數(shù)據(jù)改變其他也改變了，

點(diǎn)擊的次數(shù){{counter}}

let data2 = {

counter:0

}

Vue.component('my-btn2', {

template: '#myBtn2',

data() {

return data2;

}

})

new Vue({

// el: '#app2',

}).$mount('#app2');

總結(jié)

以上是生活随笔為你收集整理的vue 给标签添加data属性_vue之data属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。