過濾器
概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部，由“管道”符指示；
私有過濾器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定義方式：
filters: { // 私有局部過濾器，只能在 當(dāng)前 VM 對象所控制的 View 區(qū)域進行使用
dataFormat(input, pattern = "") { // 在參數(shù)列表中 通過 pattern="" 來指定形參默認值，防止報錯
var dt = new Date(input);
// 獲取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 傳遞進來的字符串類型，轉(zhuǎn)為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否則，就返回 年-月-日 時：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$u0z1t8os`;
} else {
// 獲取時分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；
全局過濾器
// 定義一個全局過濾器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 獲取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 傳遞進來的字符串類型，轉(zhuǎn)為小寫之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否則，就返回 年-月-日 時：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$u0z1t8os`;
} else {
// 獲取時分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-$u0z1t8os ${hh}:${mm}:${ss}`;
}
});
注意：當(dāng)有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調(diào)用，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用！
computed 計算屬性：
模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。計算屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。
示例：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: { // 計算屬性computed是一個對象
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
計算屬性和方法的區(qū)別：
你可能已經(jīng)注意到我們可以通過在表達式中調(diào)用方法來達到同樣的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
計算屬性可以緩存，只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。
計算屬性和監(jiān)聽屬性watch的區(qū)別：
- watch擅長處理的場景：一個數(shù)據(jù)影響多個數(shù)據(jù)
- computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響
<div id="app">
<div>{{ fullName }}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
methods（方法）：
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
不應(yīng)該使用箭頭函數(shù)來定義 method 函數(shù) (例如 plus: () => this.a++)。理由是箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.a 將是 undefined。
示例：
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
<div id="app">
<p>{{a}}</p>
<div class="box" @click="plus"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
</script>
watch（偵聽屬性）：
一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。監(jiān)聽數(shù)據(jù)的變化，數(shù)據(jù)變化就會觸發(fā)回調(diào)函數(shù)。
不應(yīng)該使用箭頭函數(shù)來定義 method 函數(shù) (例如 plus: () => this.a++)。理由是箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.a 將是 undefined。
示例：
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
<div id="app">
<p>{{a}}</p>
<div class="box" @click="plus"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
},
watch: {
a:function () {
console.log(`檢測到數(shù)據(jù)變化了${this.a - 1}次！`)
}
}
})
</script>
不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù) (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。
