《前端》VUE学习（二）上（过滤器+键盘修饰符+自定义指令+钩子函数+vue生命周期）--2020年5月25日

最新推荐文章于 2022-10-19 19:06:27 发布

bellediao

最新推荐文章于 2022-10-19 19:06:27 发布

阅读量202

点赞数

分类专栏：前端 VUE.JS

本文链接：https://blog.csdn.net/bellediao/article/details/106342215

版权

前端同时被 2 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

过滤器

1、概念

Vue.js 是一种 执行文本转换的方法，可被用作一些常见的文本格式化。分为局部过滤器和全局过滤器。

过滤器既可以在 双花括号插值 中使用，也可以在 v-bind 指令的表达式 中使用。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”指示。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

注意：

1）Vue 中的过滤器 不能替代 methods、computed 或者 watch，因为过滤器 不改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本。

（2）在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，他们也可以有效地封装成可重用代码块背后的所有逻辑。

2、过滤器定义和调用：

定义：Vue.filter('过滤器名称',function(过滤器管道符前面传递过来的数据){

对这个数据的操作

})

过滤器中的 function 第一个参数，永远都是过滤器管道符前面传递过来的数据。花括号里面写对这个数据的操作。

Vue.filter('过滤器的名称', function (过滤器管道符前面传递过来的数据) {
    return data + '123'
})

Vue.filter('msgFormat', function(msg) {    // msg 为固定的参数 即是你需要过滤的数据
    return msg.replace(/单纯/g, 'xxx')
})

调用：{{ name | 过滤器的名称 }}

注意：

过滤器书写的位置：过滤器定义写在 var vm = new Vue({}）前面，而不是花括号里面。调用写在html的对应位置。

在定义过滤器的时候，过滤器名字加引号，调用的时候不用加引号。

3、私有过滤器（可以在一个组件的选项中定义本地的过滤器）：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

4、全局定义过滤器（在创建 Vue 实例之前）：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

5、过滤器可以串联，也可以接收参数：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

6、来个小案例：

要求：有一段话：我是一个单纯的女孩，我曾经很单纯地以为单纯是最好的状态。把这句话的“单纯”换成“邪恶”。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id='app'>
    <!-- <p>{{msg }}</p> -->
    <p>{{msg | msgFilter}}</p>
  </div>
  <script>
    Vue.filter('msgFilter',function(msg){//过滤器加引号
      return msg.replace('单纯','邪恶')
      //return msg.replace(/单纯/g,'邪恶')

    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一个单纯的女孩，我曾经很单纯地以为单纯是最好的状态。'
      }

    })
  </script>
</body>
</html>

问题：运行上面代码之后发现，第一个‘单纯’被换掉，后面两个没有换。

解决：字符串的replace方法，第一个参数除了可以写一个字符串，还可以写正则。

把上面语句换成：

return msg.replace(/单纯/g,'邪恶')

问题：'邪恶'这里是写死了，如果下次不想换成‘邪恶’怎么办？--采用传参的方式。

解决：在function第二个参数位置加一个参数arg，return那里也把‘邪恶’换成arg；在过滤器调用处，msgFilter('实参')。

<body>
  <div id='app'>
    <p>{{msg | msgFilter('疯狂')}}</p>
  </div>
  <script>
    Vue.filter('msgFilter', function (msg,arg) {
      return msg.replace(/单纯/g, arg)
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一个单纯的女孩，我曾经很单纯地以为单纯是最好的状态。'
      }
    })
  </script>
</body>

也可以传入多个参数。

多次调用过滤器也可以，后面加 | 。

<body>
  <div id='app'>
    <p>{{msg | msgFilter('疯+1狂') | msgFilter2}}</p>
  </div>
  <script>
    Vue.filter('msgFilter', function (msg,arg) {
      return msg.replace(/单纯/g, arg)
    })
    Vue.filter('msgFilter2',function(msg){
      return msg+'-======'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一个单纯的女孩，我曾经很单纯地以为单纯是最好的状态。'
      }
    })
  </script>
</body>

-----------------------------------------------------------------

7、案例中的私有过滤器（本地过滤器）

/*1. HTML元素：*/

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

/*2. 私有 `filters` 定义方式：*/
<script>

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

      }

    }

  }
</script>

> 比如，时间出来：2020.11.22日 2:2:2，二时二分二秒一般是两位数字。之前使用if判断来解决这个问题，现在：

使用ES6中的字符串新方法

String.prototype.padStart(maxLength, fillString='') （头部填充）或

String.prototype.padEnd(maxLength, fillString='')（尾部填充）来填充字符串；

注意，这种方法用在字符串中，在数字使用时要先把数字转成字符串格式。

eg : (dt.getMonth()+1).toString().padStrart(2,'0')

8、案例中的全局过滤器

// 定义一个全局过滤器

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

  }

});

> 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

---------------------------------------------------------------------------------------------------------

9、键盘修饰符以及自定义键盘修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

我们前面的例子是，输入id和name之后点击“添加按钮”，这一条记录会添加到table中。有时候我们想要输入数据之后，敲击键盘上的回车来实现功能。这就是 keyup 事件。

所以在input中绑定一个keyup事件，但是有个问题是，只要敲击键盘起来之后，它就会触发这个add方法。这样可不行，我们想要的是敲击enter之后触发，所以可以使用键盘修饰符。

<input type="text" name="" id="" v-model='name' @keyup='add'>

<input type="text" name="" id="" v-model='name' @keyup.enter='add'>

Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

有些vue没有定义的，不能随便使用，但是使用对应的键盘码可以实现。还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

1、 1.x中自定义键盘修饰符【了解即可】

Vue.directive('on').keyCodes.f2 = 113;

2、 [2.x中自定义键盘修饰符]

(https://cn.vuejs.org/v2/guide/events.html#键值修饰符)

通过`Vue.config.keyCodes.名称 = 按键值`来自定义案件修饰符的别名：

Vue.config.keyCodes.f2 = 113;

3. 使用自定义的按键修饰符：

10、[自定义指令]

(https://cn.vuejs.org/v2/guide/custom-directive.html)

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

以前的方法是：

<input type="text" id='search'> document.getElementById('search').focus();

现在让我们用指令来实现这个功能：

使用 Vue.directive() 定义全局的指令，如自定义 v-focus。

其中：参数1是指令的名称，如‘focus’。注意，在定义的时候，指令的名称前面，不需要加 v- 前缀。但是：在调用的时候，必须在指令名称前加上 v- 前缀来进行调用，调用如 <input v-focus>。

参数2是一个对象，这个对象身上，有一些指令相关的函数（钩子函数，在后面介绍），这些函数可在特定的阶段，执行相关的操作。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项（位置写在vm中）：(加s代表局部私有，不加s是全局)

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

使用方法：你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

钩子函数

我还写了另一个博文：迷之解惑-钩子函数（内容类似）

一个指令定义对象可以提供如下几个钩子函数 (均为可选，前三常用)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。注意：在元素刚绑定了指令的时候，还没有插入到 DOM中去，这时候，调用 focus 方法（ el.focus()）没有作用。因为，一个元素，只有插入DOM之后，才能获取焦点。
inserted：被绑定元素插入DOM中（父节点）时调用。(仅保证父节点存在，但不一定已被插入文档中)
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。（重要）
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。（重要）
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。（重要）
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

Vue.directive是自定义指令，如下：

//例子：自定义focus事件   
 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', {
      /* 为什么上面 focus 的指令，写在bind里面不生效，它需要使用inserted插入到dom中，而color指令却可以生效？
      因为：样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
      将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素 */
      bind: function (el, binding) {//binding是第二个参数
        // el.style.color = 'red'
        // console.log(binding.name)//打印出binding的name值
        // 和样式相关的操作，一般都可以在 bind 执行

        // console.log(binding.value)//打印出binding的value值
        // console.log(binding.expression)
//上面red，写死了。如果不想写死，可以这么写：（在调用的时候传值：v-color="'blue'"）
        el.style.color = binding.value
      }
    })

再来一个私有的自定义指令：（关键在于directives的位置，以及directives字母加了s，属性用{}括起来）下面定义了两个私有指令：‘fontweight’和‘fontsize’，其中‘fontweight’是常规写法，‘fontsize’是简写，它默认把代码写到了 bind 和 update 中去。

    var vm2 = new Vue({
      el: '#app2',
      data: {...},
      methods: {...},
      filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
      },
      directives: { // 自定义私有指令
        'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
// 下面这是简单写法。这个 function 等同于 把 代码写到了 bind 和 update 中去
        'fontsize': function (el, binding) { 
          el.style.fontSize = parseInt(binding.value) + 'px'
        }
      }
    })

这是一个使用了这些 property 的自定义钩子样例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

12、vue实例的生命周期

(https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
[生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件。
主要的生命周期函数分类：
创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板。（重要阶段）
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（重要阶段）

运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，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>04.生命周期函数演示</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        // console.log(this.msg)//没有数据
        // this.show()//没有数据
        // data、methods都没有数据，说明：
        //  在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)//得到：{{ msg }}
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)//得到ok，页面已经渲染好了
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },


      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
//添加一个按钮触发更改数据。期初先不点按钮，下面这个语句没任何输出，说明没有走到这一步。点按钮更改数据后，语句执行
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }
    });
  </script>
</body>

</html>

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》VUE学习（二）上（过滤器+键盘修饰符+自定义指令+钩子函数+vue生命周期）--2020年5月25日

添加新品牌删除品牌根据条件筛选品牌1. 1.x 版本中的filterBy指令，在2.x中已经被废除：[filterBy - 指令](https://v1-cn.vuejs.org/api/#filterBy)```<tr v-for="item in list | filterBy searchName in 'name'"> <td>{{item.id}}</td> <td>{{item.name}}<...
复制链接

扫一扫