vue的生存周期和计算属性
钩子函数:
created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √
beforeDestroy -> 销毁之前
destroyed -> 销毁之后
var vm=new Vue({
el:'#box',
data:{
msg:'well'
},
created:function(){
alert('实例已经创建');
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
/*点击页面销毁vue对象*/
document.onclick=function(){
vm.$destroy();
};
计算属性的使用(data中不适于写一些逻辑性代码所以放在computed中，注意最后要return)
computed:{ //相当与data:{a:1,b:2}
b:function(){
//业务逻辑代码
return this.a+1;
}
}
document.onclick=function(){
vm.a=101;//当我点击一下的时候 data:{a:101,b:102}
};
原理是computed中有get，set方法 默认调用了get
computed:{
b:{
get:function(){ //相当于data：{a:1,b:3}
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
document.onclick=function(){
vm.b=10;//当我点击一下的时候 data:{a:10,b:12} 自动执行了 反向思维
};
vue实例的简单方法
vm.$el -> 就是元素 //vm是实例化的名字
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序
vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
app.$children[0] -> 它的子组建
var vm=new Vue({
aa:1,//自定义属性
show:function(){//自定义方法
alert(1);
},
data:{
a:1
}
}).$mount('#box');//手动挂载
vm.$options.show();//1 自定义方法
vm.$options.aa//获取自定义属性
vm.$log()//data{a:1}
