當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

笔记三 vue中封装复用过滤器自定义组件 vue中component选项

發(fā)布時(shí)間：2024/9/30 vue 59 豆豆

生活随笔收集整理的這篇文章主要介紹了笔记三 vue中封装复用过滤器自定义组件 vue中component选项小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

題外話(huà)：
npm install -g express-generator
npm安裝express框架

封裝復(fù)用

Vue中關(guān)于封裝復(fù)用的內(nèi)容，屬于Vue中的進(jìn)階知識(shí)，在實(shí)戰(zhàn)中對(duì)開(kāi)發(fā)者的抽象和泛化能力有一定的要求。

.3.1 過(guò)濾器

filters選項(xiàng)用于定義在當(dāng)前組件或?qū)嵗饔糜蛑锌捎玫倪^(guò)濾器，可在雙括號(hào)插值（Mustache語(yǔ)法）中添加在Javascript表達(dá)式的尾部，以管道符號(hào)“|”與表達(dá)式隔開(kāi)，表達(dá)式的值將作為參數(shù)傳入filter中。下面來(lái)看一段示例代碼：

<body> <div id="app"><h1>{{ title }}</h1><h2>{{ title | supplyTitle1 }}</h2><h3>{{ title | supplyTitle1 | supplyTitle2 }}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',data () {return {title: 'Test#%for#%Filter.'}},filters: {supplyTitle1 (value) { // 表達(dá)式的值將作為形參傳入console.log('Supply Title 1')return value.replace(/#/g, ',')},supplyTitle2 (value) {console.log('Supply Title 2')return value.replace(/%/g, ' ')}}}) </script></body>

當(dāng)存在多個(gè)filter時(shí)，Vue將從左向右執(zhí)行過(guò)濾，并將上一次過(guò)濾的結(jié)果作為下一次過(guò)濾的輸入值。 除在組件中定義filter之外，Vue還允許開(kāi)發(fā)者在全局定義filter，全局filter的使用方法與選項(xiàng)filter一致，定義的方法如以下代碼：

<body> <div id="app"><h1>{{ title }}</h1><h2>{{ title | title1 }}</h2><h3>{{ title | title1 | title2 }}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">Vue.filter('title1',value=>{console.log('title1')return value.replace(/#/g,' ')})Vue.filter('title2',value=>{console.log('title2')return value.replace(/%/g,' ')})//表達(dá)式的值將作為形參傳入let vm = new Vue({el: '#app',data () {return {title: 'Test#%for#%Filter.'}},</script>

與選項(xiàng)filter不同，全局filter可以在任何組件和實(shí)例中起作用。

3.2自定義指令

在之前的章節(jié)中，我們接觸過(guò)一些Vue提供的“開(kāi)箱即用”的指令，如v-bind、v-on、v-model等。除了這些指令外，Vue也允許我們使用一些自定義的指令。在組件和實(shí)例中，這些自定義指令應(yīng)該被聲明在directives選項(xiàng)中。
Vue為自定義指令提供了如下幾個(gè)鉤子函數(shù)（均為可選）： ●bind：指令與元素綁定時(shí)調(diào)用。
●inserted：指令綁定的元素被掛載到父元素上時(shí)調(diào)用。 ●update：指令所在VNode更新時(shí)調(diào)用，可能發(fā)生在其子VNode更新之前。
●componentUpdated：指令所在VNode及其子VNode全部更新后調(diào)用。
●unbind：指令與元素解綁時(shí)調(diào)用
同時(shí)，鉤子函數(shù)會(huì)被傳入以下參數(shù)：
●el：指令所綁定元素，可用于操作DOM。
●binding：包含指令相關(guān)屬性的對(duì)象。binding包含以下屬性：
●name：指令名稱(chēng)。
●value：指令綁定的值，如在v-some=“22”中，綁定值為4。
●oldValue：指令值改變前的值，僅在update和componentUpdated鉤子函數(shù)中可用。
●expression：字符串類(lèi)型的指令表達(dá)式，如在v-some=“22”中，值為“2*2”。
●arg：傳給指令的參數(shù)，如在v-some:someValue中，值為“someValue”。
●modifiers：修飾符對(duì)象，如在v-some.upper中，值為{upper: true}。
●vnode：虛擬節(jié)點(diǎn)。
●oldNode：虛擬節(jié)點(diǎn)更新前的值，僅在update和componentUpdated鉤子函數(shù)中可用。
下面筆者將演示一個(gè)相關(guān)示例，同學(xué)們可以參照著示例進(jìn)行理解，示例代碼如下：

<body> <div id="application"><h1 v-some.upper>{{ title }}</h1><h2 v-some.lower>{{ title }}</h2><h3 v-style="style">{{ title }}</h3><button @click="handlestyle">進(jìn)行修改v-style的值(＾Ｕ＾)ノ~ＹＯ~~ </button></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el:'#application',data(){return {title:'this is for directive',style:{fontStyle:'italic'}}},methods:{handlestyle(){this.$set(this.style,'color','#c3e330')this.$set(this.style,'transform','rotateX(45deg)')}},directives:{style: //用于為節(jié)點(diǎn)綁定樣式{bind(el, binding, vnode) {console.log('%c-----bind參數(shù):el,binding,vnode-----', 'font-size:18px;')console.log('%o\n\n%o\n\n%o',el,binding,vnode)let styles=binding.value //獲取指令綁定的值Object.keys(styles).forEach(key => el.style[key]=styles[key])},update(el,binding,vnode,oldVnode){console.log('%c----updateCanshu :el,bind,vnode,oldVnode----','font-size: 18px;')console.log('%o\n\n%o\n\n%o\n\n%o', el, binding, vnode, oldVnode)let styles=binding.valueObject.keys(styles).forEach(key => el.style[key] = styles[key])}},// 在bind和update時(shí)觸發(fā)相同行為，且無(wú)需定義其他鉤子函數(shù)// 指令可以簡(jiǎn)寫(xiě)為以下形式some (el, binding) {let text = el.innerTextlet modifiers = binding.modifiersif (modifiers.upper) { // 如果帶有upper后綴，則大寫(xiě)文本el.innerText = text.toUpperCase()}if (modifiers.lower) { // 如果帶有l(wèi)ower后綴，則小寫(xiě)文本el.innerText = text.toLowerCase()}}}}) </script> </body>

點(diǎn)擊按鈕：

3.3組件的注冊(cè)

組件的注冊(cè) components選項(xiàng)用于為組件注冊(cè)從外部引入的組件，由于子組件并非在全局定義，因此不可以直接在父組件的作用域內(nèi)使用。選項(xiàng)常見(jiàn)的應(yīng)用場(chǎng)景有引入第三方庫(kù)中的組件和自定義組件等。下面來(lái)看一段示例代碼：

<div id="app"><easy-title></easy-title><easy-wish></easy-wish><easy-motto></easy-motto></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script type="text/javascript">let EasyTitle = { // EasyTitle組件name: 'EasyTitle',template: '<h1>大器當(dāng)成</h1>'} let EasyMotto = { // EasyMotto組件 name: 'EasyMotto', template: '<p>過(guò)一方水土，歷一番人事，方知天地不仁，萬(wàn)物芻狗</p>' } let EasyWish = { // EasyWish組件 name: 'EasyWish', template: '<p>白發(fā)漁樵隱深山，浮名窮利豈愿沾。</p>' } let vm = new Vue({ // Vue實(shí)例 el: '#app', components: { EasyTitle, EasyMotto, EasyWish } }) </script>

在這個(gè)示例中定義了EasyTitle、EasyWish和EasyMotto三個(gè)組件，并使用components選項(xiàng)將其注冊(cè)到實(shí)例中。在vue-devtools中，我們可以看到組件的結(jié)構(gòu)。

與components選項(xiàng)相似，mixins（混入）選項(xiàng)也用于注冊(cè)在外部封裝好的代碼，不過(guò)這些代碼更加碎片化，并不如組件一樣成體系，混入的目的在于靈活地分發(fā)組件中一些可復(fù)用的功能。 mixins可以將一些封裝好的選項(xiàng)混入另一個(gè)組件中。在混入過(guò)程中，如果沒(méi)有發(fā)生沖突，則執(zhí)行合并；如果發(fā)生沖突且用戶(hù)沒(méi)有指定解決策略，Vue將采用默認(rèn)策略

可以看到，組件合并了mixin混入的選項(xiàng)。在處理data選項(xiàng)沖突時(shí)，Vue選用了組件數(shù)據(jù)；在處理mounted鉤子函數(shù)時(shí)，Vue先行調(diào)用mixin的鉤子函數(shù)，同時(shí)，Vue也將mixin中的computed和filters選項(xiàng)合并到組件中。
點(diǎn)擊按鈕以后，**mixin和組件的watch方法都被調(diào)用，**這意味著Vue在處理watch選項(xiàng)時(shí)，采用了和處理mounted等鉤子函數(shù)一樣的策略。

總結(jié)

以上是生活随笔為你收集整理的笔记三 vue中封装复用过滤器自定义组件 vue中component选项的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：解决启动springboot项目时loc
下一篇： VUE内置组件 vue使用插槽分发内容