vue中事件的处理与表单数据的自动收集
1.事件处理
①.绑定监听
vue中绑定监听最原始的做法: v-on:事件名=‘响应函数’
简化做法: @事件名=‘响应函数’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<div id="test">
<button @click="test1">test1</button>
<button @click="test2('hello',$event)">test2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#test',
methods:{
test1(event){
alert(event.target.innerHTML)
},
test2(msg,event){
alert(msg + "---" + event.target.innerHTML)
}
}
})
</script>
</body>
|
②.事件修饰符
两个事件修饰符: stop和prevent.
stop修饰符用以阻止事件冒泡. 也可以通过当前event的stopPropagation()方法阻止事件冒泡
prevent修饰符用以取消组件的默认行为. 也可以通过当前event的preventDefault()方法取消组件的默认行为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <body>
<div id="test">
<div style="width:200px;height: 200px;background-color: red" @click="test3">
<div style="width:100px;height: 100px;background-color: blue" @click.stop="test4"></div>
</div>
<a href="https://www.baidu.com/" @click.prevent="test5">GO</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#test',
methods:{
test3(event){
alert('outer')
},
test4(){
alert('inner')
},
test5(){
alert('test5');
}
}
})
</script>
</body>
|
③.按键修饰符
只有一般常用的按键才有按键修饰符, 如: enter、space、alt、ctrl等.
也可以判断当前event的keyCode值实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id="test">
<input type="text" @keyup.enter="test6">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#test',
methods:{
test6(event){
alert(event.target.value)
}
}
})
</script>
</body>
|
2.表单输入绑定
常用的一些表单控件: test/textarea、password、radio、checkbox、select-option等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <body>
<div id="demo">
<form action="/xxx" @submit.prevent="handleSub">
<span>用户名: </span>
<input type="text" v-model="username" placeholder="请输入用户名"><br>
<span>密码: </span>
<input type="password" v-model="password"><br>
<span>性别: </span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label><br>
<span>爱好: </span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpong" value="pingpong" v-model="likes">
<label for="pingpong">乒乓</label><br>
<span>城市: </span>
<select v-model="cityID">
<option value="">未选择</option>
<option :value="city.id" v-for="(city,index) in citys" :key="city.id">
{{city.name}}
</option>
</select><br>
<span>介绍: </span>
<textarea rows="10" v-model="desc"></textarea><br><br>
<input type="submit" value="注册">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
username:"",
password:"",
sex:'女',
likes:['pingpong'],
cityID:"1",
citys:[
{id:1,name:"BJ"},
{id:2,name:"SD"},
{id:3,name:"SH"}
],
desc:""
},
methods:{
handleSub(){
console.log(this.username,this.password)
}
}
})
</script>
</body>
|
