Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用

vue的生存周期：(1.0版本)
vue自身提供钩子函数：
1)created-->实例已经创建(实例创建完成执行)
2)beforeCompile-->在实例编译之前执行
3)compiled-->在编译之后执行
4)ready-->把数据插入到文档中时执行 相当于jquery中的window.onload
5)beforeDestroy-->销毁之前
6)destroyed-->销毁之后

--------------------------------------------------------------------------
vue计算属性的使用：
computed:{ //1.放的是属性(也是data里面的数据)，放一些业务逻辑代码
　　b:function(){ //2.不写默认为调用get方法，此时b并不是函数，是一个属性，使用的时候就和data里的数据使用方法一样
　　　　return this.a+1; //3.return的值返回b的值，否则b没有值，即如果想改变b的值必须改变get方法的return值
　　}
}

computed完整写法:
computed:{
　　b:{
　　　　get:function(){ //得到值
　　　　　　return 值
　　　　},
　　　　set:function(val){ //设置值
　　　　　　alert(val);
　　　　}
　　}
}

computed里的get方法使用示例：

　　a => { {a}}
　　

　　b => { {b}}

computed里的set方法使用示例：

　　a => { {a}}
　　

　　b => { {b}}

computed:放的是一些业务逻辑代码，一定要记得return
-------------------------------------------------------------------

vue实例方法总结:(实例vm)
1) vm.$el -->就是获取的元素

2) vm.$data -->是一个对象，就是data
vm.$data.msg -->data对象里的属性

3)vm.$mount('#box') -->手动挂载vue程序 在不写el时，需要手动挂载上去

4)vm.$options -->获取自定义属性或方法
var vm = new Vue({
　　aa:11, //自定义属性或方法
　　show:function(){
　　　　alert(1);
　　},
　　data:{
　　　　msg:'well'
　　}
}).$mount('#box');
console.log(vm.$options.aa);
vm.$options.show();

5) vm.$destory -->销毁对象

6) vm.$log() -->查看现在数据的状态 console.log(vm.$log());

7)vm.$watch()-->监听数据变化
a)浅度监听:只监听一个数据的变化
　　vm.$watch('name',fnCb):

　　var vm = new Vue({
　　　　el:'#box',
　　　　data:{
　　　　　　a:111,
　　　　　　b:2
　　　　}
　　});
　　vm.$watch('a',function(){
　　　　alert('发生变化了')
　　});
　　document.οnclick=function(){
　　　　vm.a=100;
　　}

b)深度监视:需要加第三个参数(如json里面内容发生变化，不加deep:true就监听不到变化)
　　vm.$watch('name',fnCb,{deep:true}):

　　

　　　　{ {a|json}} //这里使用了json过滤器,使json对象能够显示出来
　　　　

　　　　{ {b}}
　　

　　var vm = new Vue({
　　　　el:'#box',
　　　　data:{
　　　　　　a:{name:'yufan',age:16},
　　　　　　b:2
　　　　}
　　});
　　vm.$watch('a',function(){
　　　　alert('发生变化了')
　　},{deep:true});
　　document.οnclick=function(){
　　　　vm.a.name='xioaming';
　　}

 

vue结合动画使用：
本质用的是CSS3:transition animation

1)自己写的动画：(自己写的不好看)
第一步： transition="fade"

第二步：添加 .fade-transition{
　　　　　　　　//transition:1s all ease;
　　　　　　　}
第三步：添加进入动画 .fade-enter{
　　　　　　　　　　　　//opacity: 0;
　　　　　　　　　　　}
第四步：添加离开动画 .fade-leave{
　　　　　　　　　　　　//opacity: 0;
　　　　　　　　　　　　//transform: translateX(200px);
　　　　　　　　　　}

动画示例：

 1 
 2 
 3 
 4     
 5     
 6     
 7     
25 
26 
27     

28         
29         

30     
31 
32     
45 
46 

2)利用插件animate.css (class="animated" transition="bounce")
　　下载插件:bower install animate.css

　　

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8     
19 
20 
21     

22         
23         

24     
25 
26     
45 
46