Vue學習記錄--私有和全局過濾器的使用

先放一個示例：過濾器的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
  </div>

  <script>
    // 定義一個 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: {}
    });
  </script>
</body>

</html>

然後再修改上一篇vue部落格的品牌案例

過濾器

概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符訓示；

私有過濾器

HTML元素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定義方式：

filters: { // 私有局部過濾器，隻能在 目前 VM 對象所控制的 View 區域進行使用

    dataFormat(input, pattern = "") { // 在參數清單中 通過 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');



      // 如果 傳遞進來的字元串類型，轉為小寫之後，等于 yyyy-mm-dd，那麼就傳回 年-月-日

      // 否則，就傳回  年-月-日 時：分：秒

      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}`;

      }

    }

  }

使用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');



  // 如果 傳遞進來的字元串類型，轉為小寫之後，等于 yyyy-mm-dd，那麼就傳回 年-月-日

  // 否則，就傳回  年-月-日 時：分：秒

  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}`;

  }

});

注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先于全局過濾器被調用！

修改後代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  <!-- 需要用到Jquery嗎？？？ -->
</head>

<body>
  <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中，使用事件綁定機制，為元素指定處理函數的時候，如果加了小括号，就可以給函數傳參了 -->
        <input type="button" value="添加" class="btn btn-primary" @click="add()">

        <label>
          搜尋名稱關鍵字：
          <!-- 注意： Vue中所有的指令，在調用的時候，都以 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 中的資料，都是直接從 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>


  <div id="app2">
    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
  </div>

  <script>
    // 全局的過濾器， 進行時間的格式化
    // 所謂的全局過濾器，就是所有的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() 定義全局的指令  v-focus
    // 其中：參數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
      }
    })


    // 建立 Vue 執行個體，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        keywords: '', // 搜尋的關鍵字
        list: [
          { id: 1, name: '奔馳', ctime: new Date() },
          { id: 2, name: '寶馬', ctime: new Date() }
        ]
      },
      methods: {
        add() { // 添加的方法
          // console.log('ok')
          // 分析：
          // 1. 擷取到 id 和 name ,直接從 data 上面擷取 
          // 2. 組織出一個對象
          // 3. 把這個對象，調用 數組的 相關方法，添加到 目前 data 上的 list 中
          // 4. 注意：在Vue中，已經實作了資料的雙向綁定，每當我們修改了 data 中的資料，Vue會預設監聽到資料的改動，自動把最新的資料，應用到頁面上；

          // 5. 當我們意識到上面的第四步的時候，就證明大家已經入門Vue了，我們更多的是在進行 VM中 Model 資料的操作，同時，在操作Model資料的時候，指定的業務邏輯操作；

          var car = { id: this.id, name: this.name, ctime: new Date() }
          this.list.push(car)
          this.id = this.name = ''
        },
        del(id) { // 根據Id删除資料
          // 分析：
          // 1. 如何根據Id，找到要删除這一項的索引
          // 2. 如果找到索引了，直接調用 數組的 splice 方法

          /* this.list.some((item, i) => {
            if (item.id == id) {
              this.list.splice(i, 1)
              // 在 數組的 some 方法中，如果 return true，就會立即終止這個數組的後續循環
              return true;
            }
          }) */


          var index = this.list.findIndex(item => {
            if (item.id == id) {
              return true;
            }
          })

          // console.log(index)
          this.list.splice(index, 1)
        },
        search(keywords) { // 根據關鍵字，進行資料的搜尋
          /* var newList = []
          this.list.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          return newList */

          // 注意：  forEach   some   filter   findIndex   這些都屬于數組的新方法，
          //  都會對數組中的每一項，進行周遊，執行相關的操作；
          return this.list.filter(item => {
            // if(item.name.indexOf(keywords) != -1)

            // 注意 ： ES6中，為字元串提供了一個新方法，叫做  String.prototype.includes('要包含的字元串')
            //  如果包含，則傳回 true ，否則傳回 false
            //  contain
            if (item.name.includes(keywords)) {
              return item
            }
          })

          // return newList
        }
      }
    });


    // 如何自定義一個私有的過濾器（局部）
    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'
    }) */



    // document.getElementById('search').focus()

  </script>
</body>

</html>



<!-- 過濾器調用時候的格式    {{ name | 過濾器的名稱 }} -->

Vue學習記錄--私有和全局過濾器的使用

過濾器

私有過濾器

全局過濾器

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

詳解STM32單片機的堆棧

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method