一、自定義指令的創(chuàng)建和使用
Vue自帶的指令很多升薯，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...
但是這些指令都是比較偏向于工具化卸留，有些時(shí)候在實(shí)現(xiàn)具體的業(yè)務(wù)邏輯的時(shí)候膏燃，發(fā)現(xiàn)不夠用割捅，如何來(lái)自定義指令恩掷。
①注冊(cè)自定義指令
new Vue({
directives: { //注冊(cè)指令碧囊，類似于注冊(cè)組件
change: { //定義名為change的指令
bind: function () {},
update: function () {},
unbind: function () {}
}
}
})
在自定義指令時(shí)树灶，在指令對(duì)應(yīng)的配置對(duì)象中有3個(gè)處理函數(shù)指令對(duì)應(yīng)的操作
bind：指令在綁定到元素要執(zhí)行的操作，只調(diào)用一次
update：如果在調(diào)用指令時(shí)候糯而，傳了參數(shù)天通，當(dāng)參數(shù)變化時(shí)候，就會(huì)執(zhí)行update所指定的方法
unbind：解綁要執(zhí)行的操作
②使用自定義指令
v-change
注意事項(xiàng)：
建議在給指令的命名采用小駝峰式的命名方式熄驼，比如changeBackgroundColor,在使用的時(shí)候像寒，采用烤串式寫法 v-change-background-color
練習(xí)：實(shí)現(xiàn)自定義指令v-time烘豹，在微博朋友圈中常見(jiàn)的將用戶發(fā)布某些內(nèi)容的時(shí)間改為“剛剛”，“XX分鐘前”等诺祸。
時(shí)間轉(zhuǎn)換邏輯：
1分鐘以前：顯示“剛剛”
1分鐘-1小時(shí)之間：顯示“XX分鐘前”
1小時(shí)-1天之間：顯示“XX小時(shí)前”
1天-1個(gè)月(31天)之間携悯，顯示“XX天前”
大于1個(gè)月，顯示“XX年XX月XX日”
二筷笨、自定義過(guò)濾器的創(chuàng)建和使用
vue支持在{{}}插值的尾部添加一個(gè)管道符“|”對(duì)數(shù)據(jù)進(jìn)行過(guò)濾憔鬼，經(jīng)常用于格式化文本比如字母大小寫，貨幣千位使用逗號(hào)分隔等等胃夏。
過(guò)濾器的作用：實(shí)現(xiàn)數(shù)據(jù)的篩選轴或、過(guò)濾、格式化仰禀。
vue1.版本是有內(nèi)置的過(guò)濾器照雁，但是在vue2.所有的版本都已經(jīng)沒(méi)有自帶的過(guò)濾器了。
1悼瘾、過(guò)濾器創(chuàng)建
過(guò)濾器的本質(zhì)是一個(gè)有參數(shù)有返回值的方法囊榜。
export default {
data() {
return {
price:500,
};
},
filters: {
myCurrency: function (myInput) {
return myInput+100; //返回處理后的數(shù)據(jù)
}
}
};
2、過(guò)濾器使用
<any>{{price | myCurrency}}</any>
3亥宿、過(guò)濾器高級(jí)用法
在使用過(guò)濾器的時(shí)候卸勺，還可以指定參數(shù)，來(lái)告訴過(guò)濾器按照參數(shù)進(jìn)行數(shù)據(jù)的過(guò)濾烫扼。
①如何給過(guò)濾器傳參曙求？
<h1>{{price | myCurrency('￥',true)}}</h1>
②如何在過(guò)濾器中接收到？
export default {
data() {
return {};
},
filters: {
//myInput是通過(guò)管道傳來(lái)的數(shù)據(jù)
//arg1在調(diào)用過(guò)濾器時(shí)在圓括號(hào)中第一個(gè)參數(shù)
//arg2在調(diào)用過(guò)濾器時(shí)在圓括號(hào)中第二個(gè)參數(shù)
myCurrency: function (myInput, arg1, arg2) {
return 處理后的數(shù)據(jù);
}
}
};
常用過(guò)濾器鏈接 https://blog.csdn.net/dylan_zeng92/article/details/77850143
三映企、組件
w3c為什么有組件概念悟狱？
現(xiàn)在的前端領(lǐng)域，對(duì)于代碼的質(zhì)量和數(shù)量有著非常高的要求堰氓，特別容易出問(wèn)題挤渐。
通過(guò)組件的方式來(lái)完成代碼的管理和編寫。
組件：是一個(gè)可以被反復(fù)使用的 帶有指定功能的 視圖
組件化編程 一切都是組件component双絮，把可以被反復(fù)使用的任何的視圖 都可以封裝成組件
組件化的好處（封裝）:
①提高了代碼的復(fù)用率
②提高開(kāi)發(fā)速度
③降低測(cè)試難度
④降低整個(gè)應(yīng)用的耦合度
1浴麻、組件的創(chuàng)建
組件需要注冊(cè)以后才可以使用，注冊(cè)分為全局注冊(cè)和局部注冊(cè)囤攀，全局注冊(cè)软免，任何Vue實(shí)例都可以使用。
Vue.component('my-component', {//全局注冊(cè)
template: '<h1>it is a component</h1>'
})
export default {//局部注冊(cè)
data() {
return {
};
},
components: {
'my-component':myComponent
},
};
2焚挠、組件的使用
組件的使用就像是使用普通的html標(biāo)簽一樣
<my-component> </my-component>
建議：組件的命名和使用建議來(lái)使用烤串式命名規(guī)則膏萧。
(如果組件的名字寫成駝峰式 myComponent,使用依然還得是烤串式）
注意：
①如果一個(gè)組件要渲染多個(gè)元素，將多個(gè)元素放到一個(gè)頂層標(biāo)簽；否則會(huì)報(bào)錯(cuò)榛泛。
3蝌蹂、復(fù)合組件
組件可以像vue實(shí)例那樣使用其他選項(xiàng)，比如data,computed,methods,只是在使用data時(shí)和實(shí)例稍有區(qū)別挟鸠，這里的data必須是函數(shù)叉信，然后將數(shù)據(jù)return出去。
組件可以像html一樣來(lái)使用艘希，復(fù)合組件并不是一個(gè)新的概念硼身，就是一個(gè)組件，只不過(guò)該組件中又調(diào)用了其它的組件覆享。
一個(gè)完整的Vue的項(xiàng)目佳遂，可以比作是一顆組件樹(shù)，組件樹(shù)的根 就是 根組件（my-article）....
組件樹(shù)可以幫助我們降低業(yè)務(wù)的復(fù)雜度撒顿，避免出現(xiàn)一些錯(cuò)誤丑罪，提高開(kāi)發(fā)速度。
4凤壁、組件的生命周期
分為4個(gè)階段：create/mount/update/destroy,每一個(gè)階段都對(duì)應(yīng)著有自己的處理函數(shù)吩屹。
create: beforeCreate created 初始化
mount: beforeMount mounted 和掛載相關(guān)的處理
update: beforeUpdate updated 根據(jù)要更新的數(shù)據(jù) 做邏輯判斷
destroy:beforeDestroy destroyed 清理工作
在Vue的實(shí)例或者在組件，都有哪些屬性拧抖？
el
data
methods
directives
filters
watch
