vue总结（二）

vue碎小知识整理（二）

官网：https://cn.vuejs.org
API：https://cn.vuejs.org/v2/api/

事件

1. 事件对象

说明：事件队形可以不传递
使用场景：传参数同时使用事件对象时

show($event,参数)

冒泡：默认冒泡
$event ev|event.cacelBubble=true
ev.stopPropagation()
默认行为：
event|ev.preventDefault(); @事件.prevent
连缀：@事件.修饰符.修饰符
@事件.prevent.stop
排名分先后

2.将原生事件绑定到组件

监听普通事件:使用v-on的.native修饰符

<base-input v-on:focus.native="onFocus"></base-input>

问题：监听一个类似 <input> 的非常特定的元素时，组件可能做了重构
解决：v-on="$listeners",会将所有的事件监听器指向这个组件的某个特定的子元素，希望可以配合v-model工作的组件为这些监听器创建类似inputListeners的计算属性

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

3.修饰符

事件|自定义事件修饰符：@click.stop.prevent

.stop:阻止单击事件继续传播
.prevent
.capture:使用事件捕获模式
.self:点到时才触发，不是从内部元素触发的
.once:只会触发一次
.native:组件绑定原生事件时
.passive:onScroll事件结束时触发一次，不会频繁触发，移动端使用

.stop:

<a v-on:click.stop="doThis"></a>

.prevent

<form v-on:submit.prevent="onSubmit"></form><!--提交事件不在重载页面-->
<a v-on:click.stop.prevent="doThat"></a><!--修饰符可以串联-->
<form v-on:submit.prevent></form><!--只有修饰符-->

.capture

<div v-on:click.capture="doThis">....</div><!--元素自身触发的事件先在此处理，然后才交由内部元素处理-->

.self

<div v-on:click.self="doThis">...</div><!--事件不是从内部元素触发的-->

.once

<a v-on:click.once="doThis"></a><!--点击事件只会触发一次-->

注意：使用修饰符时顺序很重要
例：v-on:click.preven.self会阻止所有的点击
v-on:click.self.prevent只会阻止所有元素对自身的点击

按键修饰符

@keyup.单词
@keyup.键码

鼠标修饰符

.left
.right
.middle

系统修饰符

.ctrl
.alt
.shift
.meta
exact严格默认
@键盘事件.修饰符1.修饰符2.exact(1+2才可以触发)

表单修饰符：

v-model.lazy:确认时才修改model数据
v-model.number:提取数字
v-model.trim:删除前后空格