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>