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方法使用示例：
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//业务逻辑代码
return this.a+1;
}
}
});
document.onclick=function(){
vm.a=101; //点击页面之后，a=101,b=102
};
</script>
computed里的set方法使用示例：
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
});
document.onclick=function(){
vm.b=10; 当点击页面时，a=10,b=12,这是10作为参数传给set方法。
};
</script>
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.onclick=function(){
vm.a=100;
}
b)深度监视:需要加第三个参数(如json里面内容发生变化，不加deep:true就监听不到变化)
vm.$watch('name',fnCb,{deep:true}):
<div id="box">
{{a|json}} //这里使用了json过滤器,使json对象能够显示出来
<br/>
{{b}}
</div>
var vm = new Vue({
el:'#box',
data:{
a:{name:'yufan',age:16},
b:2
}
});
vm.$watch('a',function(){
alert('发生变化了')
},{deep:true});
document.onclick=function(){
vm.a.name='xioaming';
}
vue结合动画使用：
本质用的是CSS3:transition animation
1)自己写的动画：(自己写的不好看)
第一步： transition="fade"
<div id="box1" v-show="bsign" transition="fade"></div>
第二步：添加 .fade-transition{
//transition:1s all ease;
}
第三步：添加进入动画 .fade-enter{
//opacity: 0;
}
第四步：添加离开动画 .fade-leave{
//opacity: 0;
//transform: translateX(200px);
}
动画示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="bower_components/vue/dist/vue.js"></script>
7 <style>
8 #div1{
9 width:100px;
10 height:100px;
11 background: red;
12 }
13
14 .fade-transition{
15 transition: 1s all ease;
16 }
17 .fade-enter{
18 opacity: 0;
19 }
20 .fade-leave{
21 opacity: 0;
22 transform: translateX(200px);
23 }
24 </style>
25 </head>
26 <body>
27 <div id="box">
28 <input type="button" value="按钮" @click="toggle">
29 <div id="div1" v-show="bSign" transition="fade"></div>
30 </div>
31
32 <script>
33 new Vue({
34 el:'#box',
35 data:{
36 bSign:true
37 },
38 methods:{
39 toggle(){
40 this.bSign=!this.bSign;
41 }
42 }
43 });
44 </script>
45 </body>
46 </html>
2)利用插件animate.css (class="animated" transition="bounce")
下载插件:bower install animate.css
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="bower_components/vue/dist/vue.js"></script>
7 <link rel="stylesheet" href="bower_components/animate.css/animate.css">
8 <style>
9 #box{
10 width:400px;
11 margin: 0 auto;
12 }
13 #div1{
14 width:100px;
15 height:100px;
16 background: red;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="box">
22 <input type="button" value="按钮" @click="toggle">
23 <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
24 </div>
25
26 <script>
27 new Vue({
28 el:'#box',
29 data:{
30 bSign:true
31 },
32 methods:{
33 toggle(){
34 this.bSign=!this.bSign;
35 }
36 },
37 transitions:{ //定义所有动画名称
38 bounce:{
39 enterClass:'zoomInLeft',
40 leaveClass:'zoomOutRight'
41 }
42 }
43 });
44 </script>
45 </body>
46 </html>
