【Vue】Vue基础自用笔记&Day02_①Vue过滤器②按键修饰符③自定义指令

1.Vue过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号 插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号'|'指示：

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

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

你可以在一个组件的选项中定义本地的过滤器：

  let vm = new Vue({
    el: "#box",
    data: {},
    methods: {},
	filters: {
	  capitalize: function (value) {
	    if (!value) return ''
	    value = value.toString()
	    return value.charAt(0).toUpperCase() + value.slice(1)
	  }
	}
  })

或者在创建 Vue 实例之前全局定义过滤器：

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

new Vue({
  // ...
})

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

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。

过滤器可以串联（链式使用）：

{{ message | filterA | filterB }}

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

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

定义一个过滤器，将传来的时间字符串转换为常见形式：

  Vue.filter("timeFormat", function (data, format) {
    let year = setZero(data.getFullYear())
    let month = setZero(data.getMonth() + 1)
    let day = setZero(data.getDate())
    let hour = setZero(data.getHours())
    let minute = setZero(data.getMinutes())
    let sec = setZero(data.getSeconds())
    format = format.replace("YYYY", year).replace("MM", month).replace("DD", day).replace("hh", hour).replace("mm", minute).replace("ss", sec)
    return format
  })
  function setZero(param) {
    return param.toString().padStart(2, "0")
  }

2.按键修饰符

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

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

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 
如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象 自定义按键修饰符别名：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">

可以是对象，也可以是单个按键形式：

Vue.config.keyCodes.j = 74
<input type="text" @keyup.j="j()" placeholder="普通攻击" v-model="val">
<input type="text" @keyup.enter="tip()" placeholder="按回车弹框" v-model="val">

2.1.0 新增：

可以用如下 修饰符 来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。
换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。
而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，
请为 ctrl 换用 keyCode：keyup.17。

3.自定义Vue指令

可以全局定义，也可以局部定义，全局定义使用这个方法：Vue.directive()

自定义指令不能使用驼峰命名，因为HTML大小写不敏感！

渲染页面时DOM的自定义属性会都变成小写，就找不到自己定义的自定义指令了！

可以使用横杠'-'进行连接，
定义时不加v-，使用时加v-。

全局定义：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
   bind(el, bingding) {
     el.style.color = "red"
   },
   // DOM元素渲染完毕后执行
   inserted(el) {
     el.focus()
   },
   // 元素有更新时执行
   update(el) {
     el.style.fontSize = '18px'
   }
})

局部定义：

  let vm = new Vue({
    el: "#box",
    data: {
      color: "hotpink"
    },
    methods: {
    },
    directives: {
      big: {
        bind(el, binding) {
          el.style.fontSize = binding.value
        }
      },
      color: {
        bind(el, binding) {
          el.style.color = binding.value
        }
      },
      'focus-auto': {
        // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
        bind(el, bingding) {
          el.style.color = "red"
        },
        // 元素渲染完毕后执行
        inserted(el) {
          el.focus()
        },
        // 元素有更新时执行
        update(el) {
          el.style.fontSize = '18px'
        }
      }
    }
  })

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

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

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

3. update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

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

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

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

1. el：指令所绑定的元素，可以用来直接操作 DOM。
2. 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 }。
      
3. vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

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

更多详情，请移步官方文档