1. 事件修饰符
在事件处理函数中,我们可能需要经常处理诸如阻止默认事件event.preventDefault()
或阻止事件冒泡event.stopPropagation()
等事情,
虽然实现起来很轻松, 但是最好的方式就是方法只用来处理纯粹的数据逻辑, 而不是去处理了DOM事件细节
为了解决这个问题,Vue.js 为 v-on 事件绑定指令提供了事件修饰符。
1.1. 修饰符的理解
修饰符 (Modifiers) 是以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()
:
例如:
<div id="app">
<form action="/wuwei" @submit.prevent="handleSubmit">
<input type="submit" value="提交"/>
</form>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
handleSubmit(){
console.log("submit")
}
}
})
</script>
默认情况下当你点击submit按钮时,页面就会发生跳转, 当我们添加了修饰符.prevent, 就会阻止默认的跳转页面的行为
那接下来就让我们看看都有哪些事件修饰符吧
1.2. 事件修饰符
1.2.1. 阻止事件传播
使用修饰符.stop
,阻止事件的传播
<div @click.stop="handleClickWrap">grandson</div>
示例:
<div id="app">
<div
class="box"
@click="handleClickBox"
>
<div
class="wrap"
@click.stop="handleClickWrap"
></div>
</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
handleClickBox(){
console.log("box")
},
handleClickWrap(){
console.log("wrap")
}
}
})
</script>
1.2.2. 将事件绑定在捕获阶段
默认的事件是绑定在冒泡阶段的,
但是我们通过修饰符将事件绑定在捕获阶段
使用修饰符.capture
(捕获)
<div @click.capture="handleClickBox">parent</div>
示例:
<div id="app">
<div
class="box"
@click.capture="handleClickBox"
>
<div
class="wrap"
@click="handleClickWrap"
></div>
</div>
</div>
如果将box的事件绑定在了捕获阶段,那么这里就会先执行box的事件在执行wrap的事件
阻止事件传播与事件捕获组合使用
<div @click.capture.stop="parent">parent</div>
示例:
<div id="app">
<div
class="box"
@click.capture.stop="handleClickBox"
>
<div
class="wrap"
@click="handleClickWrap"
></div>
</div>
</div>
这里事件将永远无法传递到wrap事件上, wrap的事件函数将永远不能执行, 因为每次点击wrap触发的事件流到box 就被stop终止了
1.2.3.阻止默认事件
使用修饰符 .prevent
<a href="http://www.baidu.com" @click.prevent='child'>百度</a>
1.2.4. 事件只触发一次
事件只会在第一次点击时触发,之后再点击将不再触发这个事件
使用修饰符 .once
<div @click.once="handleChild">child</div>
1.2.5. 当事件发生在事件源身上的时候在触发
只用当事件发生在元素自己身上时才触发,
使用修饰符.self
<div @click.self="child">child</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
2. 表单修饰符
除了事件有修饰符, Vue还给其他的指令提供了一些修饰符帮我们很好的处理一些问题.
那么我们就先来看看表单修饰符
2.1 lazy修饰符
使用了这个修饰符将会从“input事件”变成change事件进行同步
说白了change就是当你表单失去焦点时或者手动的点击enter
键时触发,
input就是内容一变马上触发
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
message:""
}
})
</script>
2.2 number修饰符
首先要明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型
举个例子,如果用户输入300
,data 中绑定的其实是'300'
(string),
添加 number 指令后可以得到 300
(number)的绑定结果。
而如果用户输入的不是数字,这个指令并不会产生任何效果。
<div id="app">
<div>
未使用number修饰符num1
<input type="text" v-model="num1">
</div>
<div>
使用number修饰符num2
<input type="text" v-model.number="num2">
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
num1:'',
num2:''
}
})
</script>
通过示例我们发现, 同样是输入数字,未使用修饰符输入的表单得到的是字符串, 使用表单得到的是数字
注意:
如果你输入的不是数字而是字母, 就算你是用了表单number修饰符 也不会转为数字, 因为转不了,
2.3 trim 修饰符
可以用来过滤前后的空格
<div id="app">
<input type="text" v-model.trime="message">
<button @click="type">获取当前的类型</button>
</div>
<script>
new Vue({
el:"#app",
data:{
message:""
},
methods:{
type(){
console.log(this.message);
}
}
})
</script>
通过上面的例子我们能发现,其实表单修饰符主要作用就是在我们通过表单收集数据的时候,对数据进行先期处理, 过滤掉不需要的空格
3. 按键修饰符
键盘修饰符主要修饰的是键盘事件
.ctrl
.alt
.shift
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
通常按键修饰符也可以用键盘码来代替使用
示例:
<!-- vue-app 是根容器 -->
<div id='vue-app'>
<h1> 键盘 Event </h1>
<label>姓名:</label>
<input type="text" @keyup="logName">
<label>年龄:</label>
<input type="text" @keyup="logAge">
<!-- 键盘修饰符 当点击enter时才会触发事件 -->
<input type="text" @keyup.enter="logAge">
<!-- 链式修饰符 当同时点击alt和enter时才会触发事件 -->
<input type="text" @keyup.alt.enter="logAge">
</div>
<script>
//实例化Vue对象
new Vue({
el: "#vue-app",
data:{
age: 30,
x:0,
y:0
},
metholds:{
logName: function(){
consolog.log("你正在输入名字")
},
logAge: function(){
consolog.log("你正在输入年龄")
},
}
})
</script>
4. 案例: todo 例子
<div id="app">
<!-- 注意这里没有按钮, 是通过keyup绑定事件, 并且只有enter才会触发事件函数add, 因为enter键的键值是13 -->
<input type="text" v-model="val" @keyup.13="add">
<ul>
<li v-for="(item,index) in arr">
{{item}}
<button @click="remove(index)">X</button>
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({ // 根实例
el: '#app',
data: {
val: '',
arr: []
},
methods: {
add() {
// 将数据添加到数组中
this.arr.unshift(this.val);
// 数据清空
this.val = '';
},
remove(i) {
// 方法一:
// splice 会修改原数组
//this.list.splice(index,1)
// 方法二
// filter方法不修改原数组, 所以要手动覆盖
this.arr = this.arr.filter((value, index) => {
return index !== i;
})
}
}
})
</script>