Chaoszhu'Blog

Appearance

事件&指令&修饰符 ​

事件 — $event ​

原生事件中的$event打印是原生的event ​

<button @click='handleClick($event)'>Button</button>

自定义事件中的$event捕获从子组件抛出的值 ​

子： this.$emit('input', 'e.target.value')

父： <input :value="value" @input='value = $event'>Button</input> // 这里的$event表现为子组件捕获的值

指令（v-xxx） ​

常用内置指令 ​

v-html、v-text、v-for、v-if、v-show、v-bind、v-on、v-model

自定义(directive)指令实现 ​

具有一系列生命周期，如：bind、inserted、update等。详见：Vue文档自定义指令

js
// 全局注册v-focus
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 局部注册v-focus
// 组件中接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

事件修饰符 ​

@click.stop 阻止冒泡 // v-on: === @

@click.capture 事件捕获 // 主动向内触发

@submit.prevent 阻止默认提交后页面重载(prevent: 阻止)

注意：修饰符可以串联使用 @submit.stop.prevent；后边可以不接方法使用，例如：@submit.prevent，只是用于单纯的阻止提交后页面重载。 ​

.native 与 .self 的区别 ​

两者的使用场景有很大区别。

.native：用于自定义组件上，把事件绑定到自定义组件的根元素上 ​

注意: 例如在自定义组件上绑定click不生效是因为点击组件的时候，组件内部没有$emit出来一个click的方法。【详见Button.vue组件示例】

.self: 直接作用在自身的事件才会被触发(例如冒泡出来的就不会触发，原理是判断e.target是否为自身 ​

$event.target与$envet.currenTarget区别 ​

e.target 触发事件的实际对象【例如点击事件，点谁身上谁就是target】

e.currentTarget 添加监听事件的对象【addEventListens所监听的那个对象，一般由冒泡上来，然后做事件委托优化】

经典文章，顺便了解事件委托带来的优化 ​

按键修饰符 ​

@click.ctrl // 按住ctrl+点击触发（即使Alt或者Shift一同按下也会触发）

@click.ctrl.exact // 仅当Ctrl按下+点击才会被触发

表单修饰符 ​

v-model.lazy // 类似一个防抖的效果

v-model.number // 输入字符串会被舍弃掉

v-model.trim // 去除前后空格

sync修饰符 ​

对父子组件的值进行双向绑定，可用于频繁变动的值，例如dialog的显示隐藏 https://www.jianshu.com/p/f8c9aeb818c2 // .sync语法糖扩展及使用