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

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

<div id="app">
  <!-- {{1+1}} -->
  <div class="panel panel-primary">
   <div class="panel-heading">
    <h3 class="panel-title">添加品牌</h3>
   </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í)候，如果加了小括號(hào)，就可以給函數(shù)傳參了 -->
    <input type="button" value="添加" class="btn btn-primary" @click="add()">
    <label>
     搜索名稱(chēng)關(guān)鍵字：
     <!-- 注意： Vue中所有的指令，在調(diào)用的時(shí)候，都以 v- 開(kāi)頭 -->
     <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中直接渲染過(guò)來(lái)的 -->
    <!-- 現(xiàn)在， 我們自定義了一個(gè) search 方法，同時(shí)，把 所有的關(guān)鍵字，通過(guò)傳參的形式，傳遞給了 search 方法 -->
    <!-- 在 search 方法內(nèi)部，通過(guò) 執(zhí)行 for 循環(huán)， 把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個(gè)新數(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>

// 如何自定義一個(gè)私有的過(guò)濾器（局部）
  var vm2 = new Vue({
   el: '#app2',
   data: {
    dt: new Date()
   },
   methods: {},
   filters: { // 定義私有過(guò)濾器  過(guò)濾器有兩個(gè) 條件 【過(guò)濾器名稱(chēng) 和 處理函數(shù)】
    // 過(guò)濾器調(diào)用的時(shí)候，采用的是就近原則，如果私有過(guò)濾器和全局過(guò)濾器名稱(chēng)一致了，這時(shí)候 優(yōu)先調(diào)用私有過(guò)濾器
    dateFormat: function (dateStr, pattern = '') {
     // 根據(jù)給定的時(shí)間字符串，得到特定的時(shí)間
     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}-$ublnpf9mb`
     } 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}-$ublnpf9mb ${hh}:${mm}:${ss} ~~~~~~~`
     }
    }
   },
   directives: { // 自定義私有指令
    'fontweight': { // 設(shè)置字體粗細(xì)的
     bind: function (el, binding) {
      el.style.fontWeight = binding.value
     }
    },
    'fontsize': function (el, binding) { // 注意：這個(gè) function 等同于 把 代碼寫(xiě)到了 bind 和 update 中去
     el.style.fontSize = parseInt(binding.value) + 'px'
    }
   }
  })
  // 過(guò)濾器的定義語(yǔ)法
  // Vue.filter('過(guò)濾器的名稱(chēng)', function(){})
  // 過(guò)濾器中的 function ，第一個(gè)參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過(guò)濾器 管道符前面 傳遞過(guò)來(lái)的數(shù)據(jù)
  /* Vue.filter('過(guò)濾器的名稱(chēng)', function (data) {
   return data + '123'
  }) */

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

   }
  })

 // 自定義一個(gè) 設(shè)置字體顏色的 指令
  Vue.directive('color', {
   // 樣式，只要通過(guò)指令綁定給了元素，不管這個(gè)元素有沒(méi)有被插入到頁(yè)面中去，這個(gè)元素肯定有了一個(gè)內(nèi)聯(lián)的樣式
   // 將來(lái)元素肯定會(huì)顯示到頁(yè)面中，這時(shí)候，瀏覽器的渲染引擎必然會(huì)解析樣式，應(yīng)用給這個(gè)元素
   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
   }
  })