vue 给标签添加data属性_vue之data属性

培训代码

在new Vue()的时候，是可以给data直接赋值为一个对象的。

但是在组件中，data必须是一个函数,注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。

因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数

  data属性的三种写法及区别：

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

}

}

})

两个实例：

1.用function return 其实就相当于申明了新的变量，相互独立

点击的次数{{counter}}

Vue.component('my-btn', {

template: '#myBtn',

data() {

return {

counter: 0

}

}

})

new Vue({

// el: '#app',

}).$mount('#app')

2.如果不用function return 每个组件的data都是内存的同一个地址let data2，那一个数据改变其他也改变了，

点击的次数{{counter}}

let data2 = {

counter:0

}

Vue.component('my-btn2', {

template: '#myBtn2',

data() {

return data2;

}

})

new Vue({

// el: '#app2',

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