zoukankan      html  css  js  c++  java
  • 横冲直撞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>
    ​
    

      

    自定义指令的简写形式

    在很多时候,你可能想在 bindupdate 时触发相同行为,而不关心其它的钩子。比如这样写:

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

      

     

  • 相关阅读:
    MFC Windows 程序设计>WinMain 简单Windows程序 命令行编译
    AT3949 [AGC022D] Shopping 题解
    CF643D Bearish Fanpages 题解
    CF643C Levels and Regions 题解
    CF241E Flights 题解
    CF671C Ultimate Weirdness of an Array 题解
    CF1592F Alice and Recoloring 题解
    GYM 102452E 题解
    CF494C Helping People 题解
    P5556 圣剑护符
  • 原文地址:https://www.cnblogs.com/Nicholas0707/p/12824536.html
Copyright © 2011-2022 走看看