過濾器的基本使用
定義一個過濾器
<div id="app">
<p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
</div>
// 定義一個 Vue 全域的過濾器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字串的 replace 方法，第一個引數，除了可寫一個 字串之外，還可以定義一個正則
return msg.replace(/單純/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 創建 Vue 實體，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
},
methods: {}
});
過濾器可以使用多個·
下面js代碼的HTML部分
<div id="app">
<!-- {{1+1}} -->
<div >
<div >
<h3 >添加品牌</h3>
</div>
<div >
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name" @keyup.f2="add">
</label>
<!-- 在Vue中，使用事件系結機制，為元素指定處理函式的時候，如果加了小括號，就可以給函式傳參了 -->
<input type="button" value="https://www.cnblogs.com/ygjzs/p/添加" @click="add()">
<label>
搜索名稱關鍵字：
<!-- 注意： Vue中所有的指令，在呼叫的時候，都以 v- 開頭 -->
<input type="text" v-model="keywords" id="search" v-focus v-color="'green'">
</label>
</div>
</div>
<table >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 之前， v-for 中的資料，都是直接從 data 上的list中直接渲染過來的 -->
<!-- 現在， 我們自定義了一個 search 方法，同時，把 所有的關鍵字，通過傳參的形式，傳遞給了 search 方法 -->
<!-- 在 search 方法內部，通過 執行 for 回圈， 把所有符合 搜索關鍵字的資料，保存到 一個新陣列中，回傳 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime | dateFormat() }}</td>
<td>
<a href="" @click.prevent="del(item.id)">洗掉</a>
</td>
</tr>
</tbody>
</table>
</div>
定義一個私有過濾器和私有指令
// 如何自定義一個私有的過濾器（區域）
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { // 定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函式】
// 過濾器呼叫的時候，采用的是就近原則，如果私有過濾器和全域過濾器名稱一致了，這時候 優先呼叫私有過濾器
dateFormat: function (dateStr, pattern = '') {
// 根據給定的時間字串，得到特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} 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}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
}
}
},
directives: { // 自定義私有指令
'fontweight': { // 設定字體粗細的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // 注意：這個 function 等同于 把 代碼寫到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
// 過濾器的定義語法
// Vue.filter('過濾器的名稱', function(){})
// 過濾器中的 function ，第一個引數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的資料
/* Vue.filter('過濾器的名稱', function (data) {
return data + '123'
}) */
全域過濾器
// 全域的過濾器， 進行時間的格式化
// 所謂的全域過濾器，就是所有的VM實體都共享的
Vue.filter('dateFormat', function (dateStr, pattern = "") {
// 根據給定的時間字串，得到特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
// return y + '-' + m + '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
// 自定義全域按鍵修飾符
Vue.config.keyCodes.f2 = 113
Vue.directive() 定義全域的指令
// 其中：引數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴,
// 但是： 在呼叫的時候，必須 在指令名稱前 加上 v- 前綴來進行呼叫
// 引數2： 是一個物件，這個物件身上，有一些指令相關的函式，這些函式可以在特定的階段，執行相關的操作
Vue.directive('focus', {
bind: function (el) { // 每當指令系結到元素上的時候，會立即執行這個 bind 函式，只執行一次
// 注意： 在每個 函式中，第一個引數，永遠是 el ，表示 被系結了指令的那個元素，這個 el 引數，是一個原生的JS物件
// 在元素 剛系結了指令的時候，還沒有 插入到 DOM中去，這時候，呼叫 focus 方法沒有作用
// 因為，一個元素，只有插入DOM之后，才能獲取焦點
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候，會執行 inserted 函式【觸發1次】
el.focus()
// 和JS行為有關的操作，最好在 inserted 中去執行，放置 JS行為不生效
},
updated: function (el) { // 當VNode更新的時候，會執行 updated， 可能會觸發多次
}
})
自定義一個字體顏色的指令
// 自定義一個 設定字體顏色的 指令
Vue.directive('color', {
// 樣式，只要通過指令系結給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個行內的樣式
// 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會決議樣式，應用給這個元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和樣式相關的操作，一般都可以在 bind 執行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/177011.html
標籤：JavaScript
下一篇：NaN不等于NaN