Vue文檔筆記系列——可複用性&組合

可複用性&組合

mixins混入

用我的話來解釋就是包含了一些組件選項的對象，然後可以在不同的組件中引用。一個例子來演示：

<code>    Vue.component('tooltip', {      template: `        
            <button>鼠標滑過/<button>            
我是內容1
        
      `,      methods: {        show: function () {          this.visible = true        },        hide: function () {          this.visible = false        }      },      data: function () {        return {          visible: false        }      }    })    Vue.component('popup', {      template: `      
        <button>點擊切換/<button>        <button>關閉/<button>        
我是內容2
      
`,      data: function () {        return {          visible: false        }      },      methods: {        toggle: function () {          this.visible = !this.visible        },        hide: function () {          this.visible = false        }      }    })    new Vue({      el: '#app'    })/<code>

<code>  
    <tooltip>    <popup>  
/<code>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。

例子中兩個組件，重複的功能太多，比如data中的visible,methods中的hide方法。此時我們要讓代碼變得簡約，就用到了mixins，定義一個對象，然後在組件中用數組來引入。代碼改進如下：

<code>    var myMix = {      methods: {        show: function () {          this.visible = true        },        hide: function () {          this.visible = false        },        toggle: function () {          this.visible = !this.visible        }      },      data: function () {        return {          visible: false        }      }    };    Vue.component('tooltip', {      template: `         
            <button>鼠標滑過/<button>            
我是內容1
        
      `,      mixins: [myMix]    })    Vue.component('popup', {      template: `      
        <button>點擊切換/<button>        <button>關閉/<button>        
我是內容2
      
`,      mixins: [myMix]    })/<code>

值得注意的是，在組件中定義和mixins相同的選項時，會覆蓋mixins中的選項。比如我在popul組件中定義data，默認visible：ture，則會覆蓋掉mixins中默認的visible:false.

自定義指令

跟自定義組件類似，還是用一個例子來看比較明白：

<code>  
    
      <button>切換/<button>      我是相片    
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor suscipit ad consequuntur quia ipsam eius consequatur eum    sint, minima adipisci nemo error, delectus quaerat sit magni non praesentium maiores? Voluptas. Lorem ipsum dolor sit    amet consectetur adipisicing elit. Ipsa, molestias, a dicta commodi harum, ducimus iusto quo natus eos reprehenderit    est ipsam nemo error tempora? Reprehenderit iure ipsum at similique! Lorem, ipsum dolor sit amet consectetur adipisicing    elit. Asperiores saepe iusto dolore, magnam ex earum illo. Non, necessitatibus dignissimos libero sed dolorem ipsa ea    sunt quo optio omnis praesentium atque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quibusdam ratione,    quisquam dolorem doloribus delectus deserunt ab sit error placeat explicabo, ea, animi magnam. Ad, aperiam temporibus.    Eos, exercitationem laborum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus fugiat incidunt sit    deserunt consequatur molestias dicta praesentium corrupti autem nostrum dolorum facilis, quidem ipsa obcaecati ipsum    saepe? Aliquid, inventore suscipit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptatem debitis    delectus veritatis, laboriosam repudiandae, ea non minima ipsam eligendi nam tempora porro id quae maxime doloribus nulla,    accusantium animi. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste temporibus molestias ratione. Porro    itaque aperiam vero, voluptatum natus animi adipisci necessitatibus, quidem ipsam possimus molestias officiis, fugit    velit quibusdam soluta! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis minus commodi architecto    consectetur nesciunt totam sit aspernatur quas placeat fugit aut esse dolorum sed doloribus fugiat, nihil hic possimus    rerum.  
/<code>

<code>.card {      background: #ccc;      padding: 15px;      margin: 15px;      width: 80px;      height: 80px;      text-align: center;    }/<code>

<code>    Vue.directive('pin', function (el, binding) {      var val = binding.value;      if (val) {        el.style.position = 'fixed';      } else {        el.style.position = 'static'      }    })    new Vue({      el: '#app',      data: {        pinned: false      }    })/<code>

在本例子中，點擊按鈕就可以切換相片的position屬性。
解釋一下，例子中pin是自定義指令的名字，在全局中用v-pin來表示。函數中el代表指令所在的DOM元素，binding是指令的值的一些屬性，這裡直接從官網上copy了：

• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
• oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
• arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

好，比如我們在指令上添加一些修飾符：

<code>  
<code> Vue.directive('pin', function (el, binding) {      var val = binding.value;      var position = binding.modifiers;      var warning = binding.arg;      if (val) {        el.style.position = 'fixed';        for(var key in position) {          if(position[key]){            el.style[key] = '20px'          }        }        if (warning === 'true') {          el.style.background = 'red'        }      } else {        el.style.position = 'static';        el.style.background = '#ccc'      }    })/<code>
這樣點擊按鈕，相片就變為紅色，位置移到了右下方。
過濾器filter
過濾器其實就是作一個優化的作用。它可以用在雙花括號插值和 v-bind 表達式。來個例子吧：
<code>  
    毫米   {{length | meter}}    
     {{price | current}}  
/<code> 
<code>    Vue.filter('meter', function (val, unit) {      var val = val || 0;      var unit = unit || '米';      return (val / 1000).toFixed(3) + unit    })    Vue.filter('current', function (val, unit) {      var val = val || 0;      var unit = unit || '元';      return val + unit    })    new Vue({      el: '#app',      data: {        price: 10,        length: 10      }    })/<code>
 
第二個小例子中，默認的單位就是元，如果我們把過濾器後面加個括號，加了美元符號。就可以變更視圖。
<code>  {{price | current('$')}}/<code>
 
簡單的一些單位換算可以用過濾器，如果比較複雜， 最好還是用計算屬性computed


從小就很瘦
鏈接：https://www.jianshu.com/p/34a875d11244

"
/<code> 

閱讀更多 小白沖沖沖沖 的文章

關鍵字: 組件 複用 程序員