生命周運算期鉤子
- 所有的生命周期鉤子自動綁定 this 上下文中的實例
- 訪問數(shù)據(jù)
- 對屬性和方法進行
- 不能使用es6中的箭頭函數(shù)來定義生命周期函數(shù)
生命周期鉤子函數(shù)
生命周期鉤子函數(shù)視圖.png
- 初始之前 / 初始之后
- beforeCreate
- created
- 掛載之前 / 掛載之后
- beforeMount
- mounted
- 更新之前 / 更新之后
- beforeUpdate
- updated
- 銷毀之前 / 銷毀之后
- beforeDestroy
- destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聲明周期鉤子</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="app">
<div>
<button
@click="change"
type="button"
class="btn btn-info btn-lg"
>
點擊更新
</button>
<h1>{{msg}}</h1>
</div>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
msg: 'Hello World !'
},
methods: {
change(){
this.msg = '數(shù)據(jù)更新';
}
},
beforeCreate(){
alert('初始之前');
},
created(){
alert('初始之后');
},
beforeMount(){
alert('掛載之前');
},
mounted(){
alert('掛載之后');
},
beforeUpdate(){
alert('更新之前');
},
updated(){
alert('更新之后');
},
beforeDestroy(){
alert('銷毀之前');
},
destroyed(){
alert('銷毀之后');
}
});
// 在以上三個狀態(tài)正確調(diào)用后使用
// vm.$destroy();
</script>
</body>
</html>
下面為代碼執(zhí)行的狀態(tài)
-
初始之前
初始之前.png -
初始之后
初始之后.png -
掛載之前
掛載之前.png -
掛載之后，點擊確定后正常顯示頁面
掛載之后.png
掛載之后點擊確定，正常顯示頁面.png -
更新之前
點擊跟新按鈕之后-更新之前.png -
更新之后，點擊確定后頁面更新
更新之后.png
確定數(shù)據(jù)更新之后.png -
銷毀之前
銷毀之前.png -
銷毀之后
銷毀之后.png
自定義過濾器
- vue1 自帶過濾器
- vue2 可以自己定義，設(shè)置需要的過濾器
- 簡介：自定義過濾器就類似于自定義指令，可以用全局的Vue.filter() 注冊一個自定義過濾器
- 參數(shù)
- ID
- 函數(shù)
- 函數(shù)的參數(shù)為值，返回轉(zhuǎn)換后的值
- 可以為任意數(shù)量的值
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義過濾器</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="container" style="padding: 50px 0;">
<ul class="list-group h3">
<li v-for="(item,i) in lists" :class="{active:index===i}" class="list-group-item">{{item | suffix}}</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('suffix',val=>(`￥${val}.00 元`));
let vm = new Vue({
el: "#app",
data:{
lists: [100,200,300,400,500],
index: 0
}
})
</script>
</body>
</html>
瀏覽器渲染結(jié)果：
自定義過濾器.png
自定義過濾器就相當于自定了一個模板，優(yōu)化代碼，提高代碼的重用性
自定義指令
- 簡而言之就是自己向Vue添加自己定義的指令
- 通過v-XXX 確定指令名稱
- 通過Vue.directive('XXX',function(){}) 一個參數(shù)注冊指令名稱，第二個參數(shù)注冊行為
demo 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義指令-drag</title>
<style>
span{
position: absolute;
display: inline-block;
top: 100px;
left: 100px;
margin: 20px;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<span class="drag" v-drag></span>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('drag',el=>{
console.log(el);
el.onmousedown = e=>{
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = e=>{
el.style.left = e.clientX - disX + 'px';
el.style.top = e.clientY - disY + 'px';
};
document.onmouseup = e=>{
document.onmousemove = null;
document.onmouseup = null;
}
}
})
let vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
頁面渲染結(jié)果：
自定義指令-drag.png
- READEME：根據(jù)上面的demo
- v-drag ： 自定義指令名稱
- Vue.directive("drag",el=>{}) ： 注冊指令和指令對應(yīng)的行為
- Vue.directive("drag",function(){console.log(arguments)}) ，通過arguments了解具體的參數(shù)（上demo）
- 第一個參數(shù)：設(shè)置指令的元素
- arguments的打印結(jié)果
- Vue.directive("drag",function(){console.log(arguments)}) ，通過arguments了解具體的參數(shù)（上demo）
arguments打印結(jié)果.png
demo 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-border="blue">sdljlsjd</h1>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('border',function($1,$2){
console.log(arguments);
$1.style.border = `dashed 2px ${$2.value}`;
})
let vm = new Vue({
el: '#app',
data: {
blue: 'red'
}
})
</script>
</body>
</html>
頁面渲染結(jié)果：
自定義指令.png
- READEME：根據(jù)上面的demo
- 在 頁面標簽中自定義指令，demo中的自定義指令為 v-border
- 自定義指令的值自定義的值，demo中的自定義值為 blue，對應(yīng)vue實例中對象名 blue
- vue實例中自定義屬性名的值為自定義屬性值， demo中的自定義屬性值為 red
- 實現(xiàn)自定義的指令通過 Vue.directive() 實現(xiàn)
- 參數(shù)
- 第一個參數(shù)：ID ，自定義指令 v- 后面的值
- 第二個參數(shù)：函數(shù)
- 函數(shù)有5個值 （所用到的）
- 第一個參數(shù)：定義指令的元素
- 第二個參數(shù)：Object對象，可以獲取到我們設(shè)置的ID名：border，指令名：v-border，屬性值：red，屬性名：blue
- 函數(shù)有5個值 （所用到的）
- 參數(shù)
自定義動畫
- 簡單說就是 讓誰動，就把誰用<transition></transition>包裹起來
- 一組動畫就用<transition-group></transition-group>包裹起來，當然，transition-group中的每一個動畫單獨提都需要一個獨一無二的key值
- 動畫部分，根據(jù)name值，按照css3的動畫去編寫 ，動畫 可到animate.css官網(wǎng)學些：https://daneden.github.io/animate.css/
- name值的四個狀態(tài)：name="move"
- move-enter：在進入動畫之前
- move-enter-active：在進入動畫之后
- move-leave：在離開動畫之前
- move-leave：在離開動畫之后
- name值的四個狀態(tài)：name="move"
<transition name="move">
<div></div>
</transition>
<transition-group name="move">
<div v-for="(item,i)" key="item._id">
<span></span>
<p></p>
</div>
</transition-group>
- 自定義動畫配合animate.css (不需要name
<transition
enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown
>
<div></div>
<transition>
<transition-group
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeInRight"
>
<div key="1"></div>
<div key="2"></div>
</transition-group>
