导航栏

Vue（四）-- 事件处理（绑定监听、按键修饰符、取消冒泡、阻止默认事件），v-model的使用

目录

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="width:200px;height:200px;background:red" @click="test5">
				<div style="width: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>
posted @ 2021-02-01 23:13  RickZ  阅读(616)  评论(0)    收藏  举报