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:删除前后空格