vue的生命週期鉤子函數
所謂鉤子函數:
* 在vue的不同階段 會暴露出一個個 回調函數
* 可以讓使用vue的人 進行不同時期做不同事情
// vm.$destroy();//銷燬當前vue對象 會觸發beforeDestroy destroyed鉤子函數
var vm=new Vue({
// el:'#app',
data:{
msg:'Hello Vue!',
},
// 鉤子函數
beforeCreate(){
alert("初始化之前!")
},
created(){
alert("初始化完成")
},
beforeMount(){
alert("掛載之前!")
},
mounted(){
alert("掛載成功!")
},
beforeUpdate(){
alert("data裏面的變量即將要更改!");
},
updated(){
alert("data裏面的變量值更改成功!")
},
beforeDestroy(){
alert("vue對象即將銷燬!");
},
destroyed(){
alert("vue對象銷燬成功!")
}
})
vm.$mount("#app"); //通過方法 動態掛載
vue對象本身自帶的方法 自定義屬性和方法
那麼vue本身自帶的屬性跟方法:
// vm.$el vm.$data vm.$mount() vm.$destroy() vm.$options
我們看到的data和el其實本質上來說 並不是vue對象
本身的屬性 而是Vue對象裏面傳入的option對象的屬性
所以正常訪問el應該是 vue對象.option.el
但是mv.option也沒有
vue對象給我們提供了訪問這個對象的屬性:
vm.$options 就是方法括號裏面這個配置對象
console.log(vm.$options);
console.log(vm.$options.el);
// vm.$el=vm.$options.el;//vue源碼中 有這句代碼
console.log(vm.$el);//返回js的dom對象 掛載的那個目標
console.log(vm.$data);*/
自定義屬性和方法 實際上定義在$options
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
},
// 自定義方法
show(){
alert("vue自定義方法")
},
location:"文化大廈"
});
vm.$options.show();
console.log(vm.$options.location);
computed計算屬性
所謂計算屬性 就是一個變量的值是根據另一個變量的值計算出來的
也就是當前這個變量的值由一堆代碼計算出來
因爲data裏面定義的變量 值 只能是簡單的表達式
而不能是複雜代碼
還有 data裏面無法使用this
所以我們要用計算屬性的方法 定義變量
從而讓這個變量擁有 計算結果的功能:
在Vue對象的大括號裏面 定義computed屬性
computed:{
要渲染到頁面的變量1:function(){
計算的代碼
return 這個變量計算後的值
}
}
看起來computed裏面像是定義了一個函數
實際上不是!!!!! 這個函數是爲了寫代碼 並計算出當前這個變量的值
return就是返回這個變量計算後的值
ps: computed裏面定義的變量 在頁面上也能正常渲染
跟data裏面定義的變量沒有區別 唯一多的功能就是 computed裏面的變量可以寫代碼
一旦computed裏面 引入了 data的變量(只要調用了就算)
那麼就會進行自動關聯 data的這個變量值發生變化時
該computed方法也會被觸發
ps: 計算屬性 既然是根據 其他變量的變化而變化的 那麼自己本身 並不能直接修改值
<div id="app">
<h1>我是a變量:{{a}}</h1>
<h1>我是b變量:{{b}}</h1>
<h1>我是c變量:{{c}}</h1>
<h1>我是f變量:{{f}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
a:25,
c:88
// b:this.a*10 此處vue對象沒有創建完成 this還不能使用
},
computed:{
// 此處不能寫箭頭函數 否則 this就指向了computed本身 而不是vue對象
b:function () {
// console.log(this.a+":a變量發生了變化,b變量的計算屬性方法被觸發");
// console.log("1");
// return 999;
return this.a*10
},
f(){
return this.c*100;
}
}
});
</script>
過濾器
ps: 過濾器可以使用的地方: mustache語法(雙花括號位置) v-model
專門針對某一個變量的值的一個過濾作用
定義好過濾器 在哪一個變量旁邊引入 就檢查哪一個變量
一旦變量的值不符合過濾器 則過濾器裏面會進行自定義代碼處理
格式:
在Vue的大括號裏面 定義filters屬性
filters:{
過濾器的名字:function(過濾器監聽的那個變量的新值){
寫檢查的代碼
return 該變量的新值
}
}
使用過濾器:
{{data裏面的變量 | 過濾器名字}}
ps: 過濾器所監聽的變量 一旦發生改變時 當前data裏面的其他變量
也會重新刷新值 如果其他變量也用到了過濾器 那麼也會被觸發
<div id="app">
<p>
<input type="text" v-model="msg">
<button @click="show">獲取</button>
</p>
<h1>我是a變量:{{a | check}}</h1>
<h1>我是b變量:{{b | check}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
a:10,
msg:"",
b:69
},
methods:{
show(){
this.a=parseInt(this.msg)
}
},
filters:{
check:function(newVal){
// console.log(newVal);
if(newVal<100){
return newVal;
}
alert("數字太大了,給你變成最大可操作值!")
return 99;
}
}
});
</script>
過濾器和計算屬性的區別:
計算屬性:
至少兩個變量 其中一個變量的值是根據另一個變量的值變化而變化
過濾器:
當前一個變量 引入過濾器後 針對這個變量額值一個監聽
一旦不符合規則 則做對應處理
過濾器可以同時用在多個變量上
可以使多個變量 進行同一個規則的檢查
watch監聽器
監聽指定變量的變化 一旦發生值的改變 監聽器的回調就會被觸發
格式:
在vue的大括號裏面 定義watch
watch:{
被監聽的變量名稱:function(新值,舊值){
// 變量值發生改變時 觸發的回調
}
}
watch如果監聽的是基本數據類型 那麼 默認值改變時 監聽器就會被觸發
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
per:{
name:"小砌牆",
age:16
}
},
watch:{
msg(newVal,oldVal){
console.log("msg的值發生了改變:",newVal,oldVal);
},
}
});
watch如果監聽的是引用數據類型(對象)
那麼默認是淺層監聽
watch的深層監聽格式:
watch:{
被監聽的對象變量:{
handler:function(新值,舊值){
數據發生改變時 觸發的回調
},
deep:true //深層監聽 默認false
}
}
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
per:{
name:"小砌牆",
age:16
}
},
watch:{
/*per(newVal,oldVal){
// 默認淺層監聽
console.log("per的值發生了改變:",newVal,oldVal);
}*/
per:{
handler(newVal,oldVal){
console.log("per的值發生了改變:",newVal,oldVal);
},
deep:true
}
}
});
過濾器的全局引入方式
Vue.filter("自定義過濾器的名字",回調函數(參數是新值))
//filter方法是Vue的靜態方方法(構造函數名調用的)
Vue.filter("check",function (newVal) {
return newVal+"xx";
})
全局註冊監聽器
Vue對象調用自帶的$watch方法(默認淺層監聽)
vm.$watch("a",function (newVal,oldVal) {
console.log("a變量發生了變化",newVal,oldVal);
})
深層監聽
vm.$watch("per",{
handler:function (newVal,oldVal) {
console.log("per變量發生了變化",newVal,oldVal);
},
deep:true
})
Vue2.0動畫實現有兩種方式:
1.結合css3的動畫來實現
移動端項目時 具體結合實際例子去講
2.結合animate.css庫實現動畫(簡單)
主要是針對元素的進入和離開實現動畫
前提: 首先保證自己有一個元素是進入和離開切換的元素
其次: 把顯示隱藏的元素外面套一個 transition標籤
然後: 在transition標籤的開始標籤上面 定義兩個屬性
enter-active-class="animated animate.css裏面的一個動畫類名" (進入的class)
leave-active-class="animated animate.css裏面的一個動畫類名" (離開的class)
ps: 要記得 前邊引入 animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: hotpink;
}
</style>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="app">
<button @click="change">切換顯示</button>
<!--enter-active-class="animated bounceIn"-->
<!--leave-active-class="animated fadeOut"-->
<transition
enter-active-class="animated rotateIn"
leave-active-class="animated zoomOutUp"
>
<div id="box" v-show="boo"></div>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
boo:true
},
methods:{
change(){
this.boo=!this.boo;
}
}
});
</script>
</body>
</html>