目录
1.事件处理
--1.1绑定监听
--1.2事件修饰符
----1.2.1取消冒泡
- 原生js：event.stopPropagation
- @click.stop
----1.2.1阻止事件的默认行为
- 原生js：event.preventDefault()
- @click.prevent
--1.3按键修饰符
----1.3.1@keyup
- 方法一：传统代码逻辑判断
test8(event){
if(event.keyCode===13){//判断键盘，只有按下松开enter键才会生效
alert(event.target.value+''+event.keyCode)
}
}
- VUE特有方法
@keyup.13或者@keyup.enter可以代替上面的语句
--1.4练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<h2>1.绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('atguigu')">test2</button>
<button @click="test3">test3</button>
<button @click="test4(123,$event)">test4</button>
<h2>2.事件修饰符</h2>
<!-- 取消冒泡 -->
<div style="200px;height:200px;background:red" @click="test5">
<div style="100px;height:100px;background:blue" @click.stop="test6">
</div>
</div>
<!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
<h2>3.按键修饰符</h2>
<input type="text" @keyup="test8" />
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
test1() {
alert(event.target.innerHTML)
},
test2(msg) {
alert(msg)
},
test3(event) {
alert(event.target.innerHTML)
},
test4(number, event) {
alert(number + '---' + event.target.innerHTML)
},
test5() {
alert('out')
},
test6() {
alert('inner')
},
test7() {
alert("test7")
},
test8(event) {
if (event.keyCode === 13) {
alert(event.target.value + '' + event.keyCode)
}
}
}
})
</script>
</html>
2.表单数据的自动收集v-model收集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<form action="/xxx" @submit.prevent="handleSubmit">
<span >用户名：</span><br>
<input type="text" v-model="username"/><br>
<span >密码：</span><br>
<input type="password" v-model="pwd"/><br>
<span >性别：</span><br>
<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><br>
<input type="checkbox" id="basket" value="basket" v-model="sports"/>
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="sports"/>
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingbang" v-model="sports" />
<label for="pingpang">乒乓</label>
<br>
<span>城市：</span>
<select v-model="cityId">
<option value ="">未选择</option>
<option :value="city.id" v-for="(city,index) in allCitys" :key="city.id">{{city.name}}</option>
</select><br>
<span>介绍：</span>
<textarea rows="10" v-model="info">
</textarea><br><br>
<input type="submit" value="注册"/>
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
username:'',
pwd:'',
sex:'女',
sports:[''],
allCitys:[{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
cityId:'',
info:''
},
methods:{
handleSubmit(){
}
}
})
</script>
</html>