vue 指令和過濾器的基本使用(品牌管理案例)

<div id="app">
  <p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
 </div>
// 定義一個 Vue 全局的過濾器，名字叫做 msgFormat
  Vue.filter('msgFormat', function (msg, arg, arg2) {
   // 字符串的 replace 方法，第一個參數(shù)，除了可寫一個 字符串之外，還可以定義一個正則
   return msg.replace(/單純/g, arg + arg2)
  })

  Vue.filter('test', function (msg) {
   return msg + '========'
  })
  // 創(chuàng)建 Vue 實例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '曾經(jīng)，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
   },
   methods: {}
  });

<div id="app">
  <!-- {{1+1}} -->
  <div class="panel panel-primary">
   <div class="panel-heading">
    <h4 class="panel-title">添加品牌</h4>
   </div>
   <div class="panel-body form-inline">
    <label>
     Id:
     <input type="text" class="form-control" v-model="id">
    </label>
    <label>
     Name:
     <input type="text" class="form-control" v-model="name" @keyup.f2="add">
    </label>
    <!-- 在Vue中，使用事件綁定機(jī)制，為元素指定處理函數(shù)的時候，如果加了小括號，就可以給函數(shù)傳參了 -->
    <input type="button" value="添加" class="btn btn-primary" @click="add()">
    <label>
     搜索名稱關(guān)鍵字：
     <!-- 注意： Vue中所有的指令，在調(diào)用的時候，都以 v- 開頭 -->
     <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
    </label>
   </div>
  </div>
  <table class="table table-bordered table-hover table-striped">
   <thead>
    <tr>
     <th>Id</th>
     <th>Name</th>
     <th>Ctime</th>
     <th>Operation</th>
    </tr>
   </thead>
   <tbody>
    <!-- 之前， v-for 中的數(shù)據(jù)，都是直接從 data 上的list中直接渲染過來的 -->
    <!-- 現(xiàn)在， 我們自定義了一個 search 方法，同時，把 所有的關(guān)鍵字，通過傳參的形式，傳遞給了 search 方法 -->
    <!-- 在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)， 把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個新數(shù)組中，返回 -->
    <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: { // 定義私有過濾器  過濾器有兩個 條件 【過濾器名稱 和 處理函數(shù)】
    // 過濾器調(diào)用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致了，這時候 優(yōu)先調(diào)用私有過濾器
    dateFormat: function (dateStr, pattern = '') {
     // 根據(jù)給定的時間字符串，得到特定的時間
     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}-$6666616`
     } 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}-$6111616 ${hh}:${mm}:${ss} ~~~~~~~`
     }
    }
   },
   directives: { // 自定義私有指令
    'fontweight': { // 設(shè)置字體粗細(xì)的
     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 ，第一個參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過濾器 管道符前面 傳遞過來的數(shù)據(jù)
  /* Vue.filter('過濾器的名稱', function (data) {
   return data + '123'
  }) */

// 全局的過濾器， 進(jìn)行時間的格式化
  // 所謂的全局過濾器，就是所有的VM實例都共享的
  Vue.filter('dateFormat', function (dateStr, pattern = "") {
   // 根據(jù)給定的時間字符串，得到特定的時間
   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}-$6166616`
   } else {
    var hh = dt.getHours()
    var mm = dt.getMinutes()
    var ss = dt.getSeconds()
    return `${y}-${m}-$1116111 ${hh}:${mm}:${ss}`
   }
  })
// 自定義全局按鍵修飾符
  Vue.config.keyCodes.f2 = 113
Vue.directive() 定義全局的指令
 // 其中：參數(shù)1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴, 
  // 但是： 在調(diào)用的時候，必須 在指令名稱前 加上 v- 前綴來進(jìn)行調(diào)用
  // 參數(shù)2： 是一個對象，這個對象身上，有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段，執(zhí)行相關(guān)的操作
  Vue.directive('focus', {
   bind: function (el) { // 每當(dāng)指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數(shù)，只執(zhí)行一次
    // 注意： 在每個 函數(shù)中，第一個參數(shù)，永遠(yuǎn)是 el ，表示 被綁定了指令的那個元素，這個 el 參數(shù)，是一個原生的JS對象
    // 在元素 剛綁定了指令的時候，還沒有 插入到 DOM中去，這時候，調(diào)用 focus 方法沒有作用
    // 因為，一個元素，只有插入DOM之后，才能獲取焦點
    // el.focus()
   },
   inserted: function (el) { // inserted 表示元素 插入到DOM中的時候，會執(zhí)行 inserted 函數(shù)【觸發(fā)1次】
    el.focus()
    // 和JS行為有關(guān)的操作，最好在 inserted 中去執(zhí)行，放置 JS行為不生效
   },
   updated: function (el) { // 當(dāng)VNode更新的時候，會執(zhí)行 updated， 可能會觸發(fā)多次

   }
  })

 // 自定義一個 設(shè)置字體顏色的 指令
  Vue.directive('color', {
   // 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內(nèi)聯(lián)的樣式
   // 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應(yīng)用給這個元素
   bind: function (el, binding) {
    // el.style.color = 'red'
    // console.log(binding.name)
    // 和樣式相關(guān)的操作，一般都可以在 bind 執(zhí)行
    // console.log(binding.value)
    // console.log(binding.expression)
    el.style.color = binding.value
   }
  })