Promise
Promise出現(xiàn)的原因： 就是為了解決回調地獄問題（將回調函數(shù)的寫法進行了更新，之前是傳參現(xiàn)在可以通過then）
Promise的使用
Promise的狀態(tài)說明
pendding: 異步操作還未結束
fullfilled / resolved: 異步操作已經(jīng)結束并且成功了
rejected : 異步操作已經(jīng)結束并且失敗了
別人提供的Promise的api我們可以直接使用then方法來寫回調！
axios().then(res=>{})
- 我們可以通過Promise來給別人提供相應的回調函數(shù)的改進寫法
function timeOut(time){
return new Promise(function(resolve, reject){
//resolve就是將當前promise對象的狀態(tài)更改為成功， 會調用then里面的第一個函數(shù)
//reject就是將當前promise對象的狀態(tài)更改為失敗，會調用then里面的第二個函數(shù)，或者catch里的函數(shù)
setTimeout(function(){
resolve();
}, time);
})
}
timeOut(1000).then(_=>console.log("1s后做的事情"))
自定義指令
指令的基本格式
指令名:參數(shù).修飾符="表達式"
自定義指令什么時候用？
在Vue中如果遇到需要進行DOM操作的情況，就使用自定義指令
如何注冊自定義指令
- 全局注冊
Vue.directive("指令名不帶v-", {
bind(el, binding){
//el 就是當前指令所在的元素dom對象
//binding： 就是和指令相關的所有的信息（上面的指令的格式中的所有的內容）
//指令名： binding.name binding.rawName
//參數(shù)： binding.arg
//修飾符: binding.modifiers
//表達式：binding.expression
//表達式的值： binding.value
},
inserted(){},
update(){},
componentUpdated(){},
unbind(){}
})
//平時使用的時候 并不一定5個鉤子都會用到，最常用的是bind和update
//所以下面的簡寫形式，就是同時設置了bind和update兩個鉤子函數(shù)
Vue.directive("指令名不帶v-", function(){})
- 局部注冊
var vm = new Vue({
directives: {
"指令名": {},
"指令名": function(){}
}
})
自定義指令練習（3遍?。。?/h3>
自定義過濾器
概念？？
過濾器可以接收一個數(shù)據(jù)，并且加工之后返回一個新的數(shù)據(jù)
本質就是一個函數(shù)，接收參數(shù)，并且有返回值
html中如何用？？
{{data | 過濾器名稱(arg1...argN)}}
如何注冊過濾器
Vue.filter("過濾器名稱", function(value, arg1...argN){
//value指的就是|前面的內容，也就是要被過濾的內容
//arg1...argN就是過濾器名稱后面?zhèn)魅氲膮?shù)
//過濾器一定要有返回值
})
var vm = new Vue({
filters:{
"過濾器名稱": function(value, arg1...argN){
}
}
})
過渡
過渡的6個狀態(tài)
進入前 進入時 進入后
離開前 離開時 離開后
實現(xiàn)方式
自定義類樣式實現(xiàn)
1.1 在css樣式表中，添加6個類樣式 name-enter name-enter-to name-enter-active
name-leave name-leave-to name-leave-active
1.2 在要實現(xiàn)過渡的元素上包裹一個transition標簽，將name設置為類樣式開頭的name，如果不設置name，默認會找v-打頭的類樣式-
第三方css庫實現(xiàn)
<transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <div></div> </transition> -
js鉤子函數(shù)實現(xiàn)
3.1 8個鉤子函數(shù)
before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled3.2 一般我們會在 before-enter中設置進入前的樣式 enter中設置進入后以及過渡時的樣式， enter中需要先觸發(fā)一次重繪 el.offsetWidth
單頁面應用
本質： 根據(jù)hash值的改變，切換顯示頁面中的內容??！
練習（自己實現(xiàn)一個簡單的單頁面應用?。?/h3>
組件
組件化
將頁面按照功能，進行拆分，創(chuàng)建成組件，每需要一個頁面的時候，只需要把創(chuàng)建好的組件拿過來組裝成一個新的頁面即可
組件
包含html，css，js的功能代碼！
組件的注冊
Vue.component("組件名（不能用駝峰命名）", {
template: "html模板字符串",
data(){
return {
// 這里就是數(shù)據(jù)
}
}
})
var vm = new Vue({
components: {
"組件名（不能用駝峰命名）": {
template: "html模板字符串",
//data為什么是個函數(shù)（仔細思考?。。。? data(){
return {
// 這里就是數(shù)據(jù)
}
}
}
}
})
var obj = Vue.extend({
template: "html模板字符串",
data(){
return {
// 這里就是數(shù)據(jù)
}
}
})
Vue.component("組件名", obj)
如何在頁面中使用一個組件
<組件名></組件名>
<組件名/>
預習組件！
- 組件之間的切換
- 組件之間的通信
