Vue(day2)

一、过滤器

Vue中可以自定义过滤文本插值的过滤器。目前有两个地方可以使用：

• 插值文本{{ var }}中使用。
• 在v-bind中使用。（ 2.1.0+ ）

用法：使用管道连接符 | 将需要过滤的文本变量与过滤函数连接起来即可。

1、定义局部过滤器

在Vue实例中定义局部过滤器类似定义普通函数一样，使用关键字filters来定义，如定义一个大写首字母的过滤函数upperCaseFirst：

Var app = new Vue({
    el: '#app',
    filters: {
        upperCaseFirst: function(value){
            if(!value) return '';
            value = value.toString();
            return value.charAt(0).tpUpperCase() + value.slice(1);
        }
    }
});

• 参数

  过滤器的第一个参数默认为需要过滤的文本变量。

  可以在使用的使用传入其他参数（目前只能传入字符串，不能传入变量），如：

  {{ message | upperCaseFirst('s1','s2') }}
  

  但是需要注意对传入的参数进行必要性验证，因为不止此处会调用该过滤函数。

• 返回值

  过滤函数的返回值将作为渲染结果或者下一个过滤器的第一个参数。

2、定义全局过滤器

类似。

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

二、事件处理

监听事件
事件处理方法
内联处理器中的方法
事件修饰符
按键修饰符
    自动匹配按键修饰符
系统修饰键
    .exact 修饰符
    鼠标按钮修饰符
为什么在 HTML 中监听事件?

1、使用v-on指令监听事件

v-on指令可以绑定原生事件，也可以在组件中绑定自定义事件。

使用方法：

<button @click="say">Click me</button>

也可以使用内联语句：

<button @click="say(message)">Click me</button>
<button @click="say('okk')">Okk</button>
<button @click="say('okk',$event)">Okk</button>

还可以使用对象来绑定多个事件：

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

2、事件修饰符

在定义事件处理函数时，我们常常使用到下面这些操作：

event.preventDefault();
event.stopPropagation();

所以为了方便且尽量不去处理事件细节，Vue定义了一些事件修饰符来满足一些事件处理需求：

• .stop：阻止事件传播。
• .prevent：取消浏览器默认事件动作。
• .capture：启用时间捕获模式。即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。
• .self：绑定事件的元素本身才能触发，即内部元素不能触发。
• .once：（2.1.4 ）事件只触发一次。
• .passive：不让用户调用preventDefault()，所以不要和.prevent一起使用。

事件监听的原始参数定义规则请参考：这里

3、按键修饰符

某些事件如keydown | keyup与键盘直接相关，我们常常判断按键的类型或按键码（keyCode）再进行事件处理。

Vue提供的按键修饰符就是用来判断按键是否符合设置的修饰符，比如：

<input type="text" @keyup.13>

这里的keyCode就为13，当按键码为13时才会触发该事件。

为了方便使用，Vue预设了一些常用的按键别名代替按键码，

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

当然，我们也可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 112

4、系统修饰键

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

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

• .exact修饰符（2.5.0+）

  exact是”精确的“的意思，使用.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button @click.ctrl="onClick">A</button>
  
  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button @click.ctrl.exact="onCtrlClick">A</button>
  
  <!-- 没有任何系统修饰符被按下的时候才触发 -->
  <button @click.exact="onClick">A</button>
  

• 鼠标按钮修饰符（2.2.0+）

  • left
  • middle
  • right

三、自定义指令

1、简介

Vue提供的指令都比较方便，Vue2.0 开始，Vue支持自定义指令。类似自定义过滤器（Filter）一样，指令（directive）也分为全局指令和局部指令。

• 定义全局指令

  比如我们定义一个在元素插入父节点后聚焦元素的指令：

  Vue.directive('focus', {
      inserted: function(el){
          el.focus();
      }
  })
  

• 定义局部指令

  类似。

  var app = new Vue({
  	el: "#app",
  	data: {
  		message: 'Json',
  	}
  	directives: {
  		'focus':{
  			'inserted': function(el){
  				el.focus();
  			}
  		}
  	}
  });
  

2、钩子函数

​ 我们发现指令不只是一个简单的函数，而是一个对象，对象中包含了固定关键的函数，比如inserted，这些都是指令的钩子函数，不同的钩子函数指向元素不同的生命周期。

​ Vue为指令提供了如下的钩子函数（均为可选）：

• bind

  指令第一次绑定到元素上时调用。可理解为指令的初始化方法。

• inserted

  被绑定元素插入父节点时调用。（可以理解为有父节点时调用，而此时不一定已存在文档树中）。

• update

  指令所在组件的VNode更新时调用，但可能在组件的子VNode更新前调用。

• componentUpdated

  指令所在组件的VNode及其子VNode全部更新完成后调用。

• unbind

  指令解绑时调用。

3、钩子函数的参数

钩子函数会传入以下某些参数，

• el：绑定指令的元素
• 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：编译生成的虚拟节点
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

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

下面是一个简单的实例：

<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!'
  }
})

4、简写形式

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

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

5、对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

参考：Vue-自定义指令