VUE大神的成长之路--VUE实例

每个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 事件配置之前被调用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容