可複用性&組合

mixins混入

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

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

    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: `        <div>            <button @mouseenter="show" @mouseout="hide">滑鼠滑過</button>            <div v-if="visible">我是內容1</div>        </div>      `,      mixins: [myMix]    })    Vue.component('popup', {      template: `      <div>        <button @click="toggle">點選切換</button>        <button @click="hide">關閉</button>        <div v-if="visible">我是內容2</div>      </div>`,      mixins: [myMix]    })

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

自定義指令

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

  <div id="app">    <div v-pin="pinned" class="card">      <button @click="pinned = !pinned">切換</button>      我是相片    </div>    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.  </div>

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

    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      }    })

在本例子中，點選按鈕就可以切換相片的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 }。

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

  <div v-pin:true.bottom.right="pinned" class="card">

 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'      }    })

這樣點選按鈕，相片就變為紅色，位置移到了右下方。

過濾器filter

過濾器其實就是作一個優化的作用。它可以用在雙花括號插值和 v-bind 表示式。來個例子吧：

第二個小例子中，預設的單位就是元，如果我們把過濾器後面加個括號，加了美元符號。就可以變更檢視。

簡單的一些單位換算可以用過濾器，如果比較複雜， 最好還是用計算屬性computed

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