vue过滤器2

1、本文章实现filter时间格式过滤（界面输出正规时间格式），directive实现初始界面光标锁定，directive实现输入框文字效果导向。
2、directive里有bind()（效果）、inserted()（行为）、updated()三个重构函数。
3、filter与过滤有关，directive与改变有关。

directive界面调用代码（v-focus、v-color）

<label>
          搜索名称关键字：
          <!-- 注意： Vue中所有的指令，在调用的时候，都以 v- 开头 -->
          <!-- green为变量， 'green'为值 -->
          <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
        </label>

directive实现js代码（函数部分）

Vue.directive('focus', {
      bind: function (el) {
        //每当指令绑定到元素上的时候，会立即执行这个 bind 函数（只是绑定了指令，与内存的属性绑定，还没有插入到DOM中），只执行一次
        //注意： 在每个函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
        //在元素刚绑定了指令，还没有插入到DOM中去的时候，调用 focus 方法没有作用
        //一个元素，只有插入DOM之后，才能获取焦点
        //el.focus()
      },
      inserted: function (el) {
        //inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】，同时执行命令
        el.focus()





        //和JS行为有关的操作，最好在 inserted 中去执行（即从内存加入到DOM中），只执行bind，放置 JS行为不生效







      },
      updated: function (el) {
        // 当VNode更新的时候，会执行 updated， 可能会触发多次
      }
    })

    //定义全局指令v-color
    Vue.directive('color', {
      bind: function (el, binding) {
       // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
       // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
       
       // el.style.color = 'red'
         console.log(binding.name)//color
        // 和样式相关的操作，一般都可以在 bind 执行

         console.log(binding.value)//pink值
         console.log(binding.expression)//'pink'表达式

        //第一个参数，永远是 el ，表示 被绑定了指令的那个元素
        el.style.color = binding.value//pink






        // 和样式相关的操作，一般都可以在 bind 执行






      
      }
    })

filter界面调用代码（{{ item.ctime | dateFormat() }}）

<table class="table table-bordered table-hover table-striped">
      <thead>
        ......
      </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>

filter实现js代码

Vue.filter('dateFormat', function (dateStr, pattern = "") {
      // 此dt与传值过来的dt无关？？？
      var dt = new Date(dateStr)

      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()



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

filters实现（js代码）

filters: {
        dateFormat: function (dateStr, pattern = '') {
          var dt = new Date(dateStr)

          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')
            console.log(y)
















            //``与 ''的区别     ``返回的是  模板字符串
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}.......`


















          }
        }
      }

directives、filters调用界面代码

<div id="app2">
    <!-- dt在传值时变为形参dateStr -->
    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
  </div>

directives实现（js代码）

directives: {
        'fontweight': {
          //binding 表示传过来的数据
          bind: function (el, binding) {
            el.style.fontweight = binding.value
          }
        },
        // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
        'fontsize': function (el, binding) {
          el.style.fontsize = parseInt(binding.value) + 'px'
        }
      }

全部代码

<!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">
    <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- 开头 -->
          <!-- green为变量， 'green'为值 -->
          <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">
    <!-- dt在传值时变为形参dateStr -->
    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
  </div>

  <script>
    // 全局过滤器，时间格式化dateFormat为自己定义的过滤器名(调用时用的名字)
    Vue.filter('dateFormat', function (dateStr, pattern = "") {
      // 此dt与传值过来的dt无关？？？
      var dt = new Date(dateStr)

      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()



      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

    //公共的没有s
    // 使用  Vue.directive() 定义全局的指令  v-focus
    //参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,但是在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
    //参数2： 是一个对象{....}，这个对象身上，有一些指令相关的函数bind、inserted、updated，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus', {
      bind: function (el) {
        //每当指令绑定到元素上的时候，会立即执行这个 bind 函数（只是绑定了指令，与内存的属性绑定，还没有插入到DOM中），只执行一次
        //注意： 在每个函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
        //在元素刚绑定了指令，还没有插入到DOM中去的时候，调用 focus 方法没有作用
        //一个元素，只有插入DOM之后，才能获取焦点
        //el.focus()
      },
      inserted: function (el) {
        //inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】，同时执行命令
        el.focus()





        //和JS行为有关的操作，最好在 inserted 中去执行（即从内存加入到DOM中），只执行bind，放置 JS行为不生效







      },
      updated: function (el) {
        // 当VNode更新的时候，会执行 updated， 可能会触发多次
      }
    })

    //定义全局指令v-color
    Vue.directive('color', {
      bind: function (el, binding) {
       // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
       // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
       
       // el.style.color = 'red'
         console.log(binding.name)//color
        // 和样式相关的操作，一般都可以在 bind 执行

         console.log(binding.value)//pink值
         console.log(binding.expression)//'pink'表达式

        //第一个参数，永远是 el ，表示 被绑定了指令的那个元素
        el.style.color = binding.value//pink






        // 和样式相关的操作，一般都可以在 bind 执行






      
      }
    })


    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
            //  contains
            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)

          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')
            console.log(y)
















            //``与 ''的区别     ``返回的是  模板字符串
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}.......`


















          }
        }
      },
      directives: {
        'fontweight': {
          //binding 表示传过来的数据
          bind: function (el, binding) {
            el.style.fontweight = binding.value
          }
        },
        // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
        'fontsize': function (el, binding) {
          el.style.fontsize = parseInt(binding.value) + 'px'
        }
      }
    })
  </script>
</body>