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：只调用一次，指令与元素解绑时调用。
钩子函数的参数：
指令钩子函数会被传入以下参数：
-
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 来了解更多详情。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
更多详情，请移步官方文档
