Vue小知识点

学习vue事件处理
1. @click.stop(阻止事件冒泡)
2. @click.native(把组件变为原生Dom的一种方式、类似于addEventListener一个click方法 router-link会禁止所有的触发事件，所以一般需要添加native来实现可调用)
3. @click.prevent(阻止默认事件)
4. @click.once(事件只触发一次)
5. @click.capture(给使用事件添加捕获模式当使用事件触发后优先自身处理然后再传递给子元素)
6. @click.self(当触发事件的元素event.target是元素本身时才会触发使用事件)
Math.abs (求绝对值) Math.ceil(返回大于该数的最小整数)
vue 中的directive有两种写法

//默认bind 、update调用
Vue.directive("name",function(){})

Vue.directive("name",{
    bind:function(){},
    inserted:function(){},
    update:function(){},
    componentUpdated:function(){},
    unbind:function(){}
})

而内部的钩子函数参数包含三部分 el（元素）、binding（参数对象）、vnode （虚拟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 }。

下面这段代码中的bind使用不太了解查了一下

created() {
  // 缺点是会触发每个页面下的 bar，优点是不用写相关处理逻辑，性能上损耗不大
  this.$EventHub.$on('top-bar-scroll', function() {
    this.scrollNav();
  }.bind(this));
},

bind apply call 都是会改变指针指向其第一个参数，从第二个开始依次为内部函数的参数而bind和后两者的不同点是bind只是返回改变指向后的一个方法并没有马上调用