當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/9/30 vue 41 豆豆

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

題外話：
npm install -g express-generator
npm安裝express框架

封裝復用

Vue中關于封裝復用的內容，屬于Vue中的進階知識，在實戰中對開發者的抽象和泛化能力有一定的要求。

.3.1 過濾器

filters選項用于定義在當前組件或實例作用域中可用的過濾器，可在雙括號插值（Mustache語法）中添加在Javascript表達式的尾部，以管道符號“|”與表達式隔開，表達式的值將作為參數傳入filter中。下面來看一段示例代碼：

<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) { // 表達式的值將作為形參傳入console.log('Supply Title 1')return value.replace(/#/g, ',')},supplyTitle2 (value) {console.log('Supply Title 2')return value.replace(/%/g, ' ')}}}) </script></body>

當存在多個filter時，Vue將從左向右執行過濾，并將上一次過濾的結果作為下一次過濾的輸入值。 除在組件中定義filter之外，Vue還允許開發者在全局定義filter，全局filter的使用方法與選項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,' ')})//表達式的值將作為形參傳入let vm = new Vue({el: '#app',data () {return {title: 'Test#%for#%Filter.'}},</script>

與選項filter不同，全局filter可以在任何組件和實例中起作用。

3.2自定義指令

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

<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">進行修改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: //用于為節點綁定樣式{bind(el, binding, vnode) {console.log('%c-----bind參數: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時觸發相同行為，且無需定義其他鉤子函數// 指令可以簡寫為以下形式some (el, binding) {let text = el.innerTextlet modifiers = binding.modifiersif (modifiers.upper) { // 如果帶有upper后綴，則大寫文本el.innerText = text.toUpperCase()}if (modifiers.lower) { // 如果帶有lower后綴，則小寫文本el.innerText = text.toLowerCase()}}}}) </script> </body>

點擊按鈕：

3.3組件的注冊

組件的注冊 components選項用于為組件注冊從外部引入的組件，由于子組件并非在全局定義，因此不可以直接在父組件的作用域內使用。選項常見的應用場景有引入第三方庫中的組件和自定義組件等。下面來看一段示例代碼：

<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>大器當成</h1>'} let EasyMotto = { // EasyMotto組件 name: 'EasyMotto', template: '<p>過一方水土，歷一番人事，方知天地不仁，萬物芻狗</p>' } let EasyWish = { // EasyWish組件 name: 'EasyWish', template: '<p>白發漁樵隱深山，浮名窮利豈愿沾。</p>' } let vm = new Vue({ // Vue實例 el: '#app', components: { EasyTitle, EasyMotto, EasyWish } }) </script>

在這個示例中定義了EasyTitle、EasyWish和EasyMotto三個組件，并使用components選項將其注冊到實例中。在vue-devtools中，我們可以看到組件的結構。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：解决启动springboot项目时loc
下一篇： spring项目属性注入和bean管理x