可復用性&組合
mixins混入
用我的話來解釋就是包含了一些組件選項的對象，然后可以在不同的組件中引用刑巧。一個例子來演示：
Vue.component('tooltip', {
template: `
<div>
<button @mouseenter="show" @mouseout="hide">鼠標滑過</button>
<div v-if="visible">我是內(nèi)容1</div>
</div>
`,
methods: {
show: function () {
this.visible = true
},
hide: function () {
this.visible = false
}
},
data: function () {
return {
visible: false
}
}
})
Vue.component('popup', {
template: `
<div>
<button @click="toggle">點擊切換</button>
<button @click="hide">關閉</button>
<div v-if="visible">我是內(nèi)容2</div>
</div>`,
data: function () {
return {
visible: false
}
},
methods: {
toggle: function () {
this.visible = !this.visible
},
hide: function () {
this.visible = false
}
}
})
new Vue({
el: '#app'
})
<div id="app">
<tooltip></tooltip>
<popup></popup>
</div>
例子中兩個組件，重復的功能太多，比如data中的visible,methods中的hide方法哈恰。此時我們要讓代碼變得簡約只估，就用到了mixins，定義一個對象着绷，然后在組件中用數(shù)組來引入蛔钙。代碼改進如下：
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">我是內(nèi)容1</div>
</div>
`,
mixins: [myMix]
})
Vue.component('popup', {
template: `
<div>
<button @click="toggle">點擊切換</button>
<button @click="hide">關閉</button>
<div v-if="visible">我是內(nèi)容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來表示里烦。函數(shù)中el代表指令所在的DOM元素凿蒜，binding是指令的值的一些屬性，這里直接從官網(wǎng)上copy了：
- name：指令名胁黑，不包括 v- 前綴废封。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中丧蘸，綁定值為 2漂洋。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用力喷。無論值是否改變都可用刽漂。
- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中冗懦，表達式為 "1 + 1"爽冕。
- arg：傳給指令的參數(shù)，可選披蕉。例如 v-my-directive:foo 中颈畸，參數(shù)為 "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'
}
})
這樣點擊按鈕徙缴，相片就變?yōu)榧t色，位置移到了右下方。
過濾器filter
過濾器其實就是作一個優(yōu)化的作用于样。它可以用在雙花括號插值和 v-bind 表達式疏叨。來個例子吧：
<div id="app">
<input type="text" v-model="length">毫米 {{length | meter}}
<br>
<input type="text" v-model="price"> {{price | current}}
</div>
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
}
})
第二個小例子中，默認的單位就是元穿剖，如果我們把過濾器后面加個括號蚤蔓，加了美元符號。就可以變更視圖糊余。
<input type="text" v-model="price"> {{price | current('$')}}
簡單的一些單位換算可以用過濾器秀又，如果比較復雜， 最好還是用計算屬性computed
