每个Vue.js应用都是通过构造函数vue创建一个Vue的根实例启动的
var vm = new Vue({
//选项
})
在实例化Vue时,需要传入一个选项对象
el: '',挂载对象
data: Object || Function(组件的定义只接受function),Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对),data应该只能是数据。
重点:data必须写成这种形式data: function{ return {} } ----防止所有的实例共享引用同一个数据对象!
var vm = new Vue({
data: function{
return {
} } })
props: Array|| Object,用于接收来自父组件的数据,允许高级配置,如类型检测,自定义校验和设置默认值
举例:
//简单语法:
Vue.component('props-demo-simple', {
props: ['size','myMessage']
})
//对象语法,提供校验
Vue.component('props-demo-simple', {
props: {
//只检测类型
height: Number,
//检测类型+其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value) {
return value >= 0
}}}})
propsData:{ [key: string]: any} ,只适用于new创建的实例中,创建实例时传递props,主要作用是方便测试computed: 监听数据的变动动态计算
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
data: {
a:1
},
computed: {
b: function() {
return this.a+1
}}})
vm.b ===> 2
vm.a = 2;
vm.b ===> 3
methods: 事件方法
watch: 监听数据的变动(通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调)
实例生命周期:(所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行设置)
created 这个钩子在实例被创建之后被调用
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。