<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
上面是创建了一个vue实例,创建vue实例时,数据的定义方式是以对象的形式在实例中给出,在创建实例时,也会定义方法,同样以对象的形式。这里的实例与app绑定,所以可以在div中直接使用这个数据。
2.自定义组件
自定义组建中的data和vue实例中的data常常混淆。
自定义组件是可复用的实例,
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
自定义组件时,需要的数据也会被定义,但是data是一个函数。返回的变量数据,在组件中自己使用,data部分还可以像简写成以下形式
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data() {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
如果组件里想用的数据在父组件里,就要用props,声明
pros:[]