横冲直撞vue(第六篇)：vue之过滤器、es6中填充字符串、es6新增的padStart()方法和padEnd()方法、vue自定义键盘修饰符、vue自定义全局指令

一、vue之过滤器

 

1、什么是过滤器？

　　过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

 

2、定义过滤器

  • 全局过滤器

Vue.filter('过滤器名称', function (value1[,value2,...] ) 
{  //逻辑代码})

　　

  • 局部过滤器

new Vue({       
 filters: {      
    '过滤器名称': function (value1[,value2,...] ) { 
       // 逻辑代码     
      } 
         }    
　　})

　　

3、全局过滤器

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ msg | msgFormat('进攻+1', '123') | test }}</p>
    <!-- 可以针对一个字符串使用多个过滤器 ，在第一个过滤器之后加|再加过滤器即可-->
  </div>
  <script src="./lib/vue.js"></script>
  <script>
​
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      //第一个参数固定的为过滤器之前的原有字符串，之后的arg为过滤器的参数 
      // 字符串的  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>

　　

显示效果如下

 

4、局部过滤器（私有过滤器）

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域

 

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ msg | msgFormat('进攻+1', '123') | test }}</p>
    <!-- 可以针对一个字符串使用多个过滤器 ，在第一个过滤器之后加|再加过滤器即可-->
  </div>
  <script src="./lib/vue.js"></script>
  <script>
​
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      //第一个参数固定的为过滤器之前的原有字符串，之后的arg为过滤器的参数 
      // 字符串的  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: {
      },
      //定义一个局部过滤器
      filters:{
        msgFormat:function(msg) {
                        return msg+'xxxxx局部过滤器';
                    }
      }
    });
​
​
  </script>
</body>
​

　　

页面显示效果

注意：

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

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

 

 

二、es6中填充字符串

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='')

或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

参数（接收两个参数）：

  • 第一个参数，指定字符串的长度。如果当前字符串小于指定的长度，则进行补全；反之，不进行任何操作，返回原字符串。

  • 第二个参数，用于补充的字符串，如果字符串长度过长，则会删除后面的多出的字符串，进行补全。如果不写，默认空格补全。

适用场景：

  • 格式化时间时，个位数补0

  • 字符串拼接

‘wen’.padStart(8, '12')  //  '12121Wen'  指定8位字符长度，不够用来12补全
'wen'.padStart(5, '12')  //  '12Wen'
'wen'.padEnd(8, '12')  //  'wen12121'
'wen'.padEnd(5, '12')  //  'wen12'

　　

三、es6新增的padStart()方法和padEnd()方法

  • padStart() 用于头部补全；

  • padEnd() 用于尾部补全。

padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

　　

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

　　

 

四、vue自定义键盘修饰符

在很多时候，我们想要在键盘上按一个指定的键，实现，新增，删除的目的，比如按一下回车键，就要实现新增数据的目的

这样我们就需要监听键盘事件。比如 keydown：按键按下，keyup：按键抬起，keypress：按键按下抬起

在Vue中允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm实例中的submit方法`  这个13对应的键其实就是Enter回车键-->
<input v-on:keyup.13="submit">

　　

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上：这个enter就是键盘码13的别名 -->
<input v-on:keyup.enter="submit">
 
<!-- 缩写语法 -->
<input @keyup.enter="submit">

　　

Vue默认为我们提供了如下键盘码的别名：

.enter（回车键）
.tab（Tab键）
.delete (捕获“删除”和“退格”键)
.esc（Esc按键）
.space（空格键）
.up（方向上键）
.down（方向下键）
.left（方向左键）
.right（方向右键）
​

　　

也可以自定义按键设置别名

（1）通过Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符的别名：

Vue.config.keyCodes.f2 = 113;

　　

（2）使用自定义的按键修饰符：

<input type="text" v-model="name" @keyup.f2="add">

　　

keycode键盘码对照表

 

五、vue自定义全局指令

Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

就像vue中有全局过滤器和局部过滤器件一样，也分全局自定义指令和局部指令。

对于全局自定义指令的创建，我们需要使用Vue.directive接口

Vue.directive('demo', Opt)

　　

对于局部组件，我们需要在组件的钩子函数directives中进行声明

Directives: {
    Demo:     Opt
}

　　

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)，即Opt是一个对象，包含了5个钩子函数，我们可以根据需要只写其中几个函数。如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子，那么你可以将Opt改为一个函数。

 

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

 

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

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
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 钩子中可用。

　　

 

全局指令

示例

    // 使用  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， 可能会触发多次
​
      }
    })

　　

指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用

示例二

    // 自定义一个 设置字体颜色的 指令
    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
      }
    })
​

　　

调用方式

 <h3 v-color="'pink'">are you ok?</h3>

　　

局部指令（私有指令）

可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项

    
    var vm = new Vue({
    
      el: "#app",
      data:{},
      directives:{
        focus:{//自动获得焦点
             inserted: function (el) {
                el.focus()
            }      
        },
​
         'fontweight': { // 设置字体粗细的
          bind: function (el, binding) {
            el.style.fontWeight = binding.value
          }
        },
​
        'color':{
            bind:function(el, binding){
             el.style.color = binding.value
            }
​
        },
​
         'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
          el.style.fontSize = parseInt(binding.value) + 'px'
            }
        }
​
    })
​

　　


​

调用方式

<div id="app">
  <label>
          搜索名称关键字：
      <input type="text" class="form-control"v-focus v-color="'green'">
  </label>
  <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">hello world</h3>
​
</div>
​

　　

自定义指令的简写形式

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

　　

 

posted on 2020-05-03 23:09  Nicholas--  阅读(471)  评论(0)  编辑  收藏  举报

导航