1. vue的事件处理
- 绑定监听
v-on:XXX=“XXX” ==>简写：@XXX=“XXX”
默认事件形参：event
隐含属性对象：$event - 事件修饰符
.prevent：阻止事件的默认行为 event.preventDefault()；
.stop：停止事件冒泡 event.stopPropagation()； - 按键修饰符
.keycode：操作的是某个keycode值的健；
.enter：操作的是enter键。 - 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_事件处理</title>
</head>
<body>
<div id="example">
<h2>1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('abcd', $event)">test3</button>
<h2>2. 事件修饰符</h2>
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
<div style="width: 200px;height: 200px;background: red" @click="test5">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
</div>
<h2>3. 按键修饰符</h2>
<input type="text" @keyup.13="test7">
<input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {},
methods: {
test1(event) {
alert(event.target.innerHTML)
},
test2(msg) {
alert(msg)
},
test3(msg, event) {
alert(msg + '---' + event.target.textContent)
},
test4() {
alert('点击了链接')
},
test5() {
alert('out')
},
test6() {
alert('inner')
},
test7(event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
})
</script>
</body>
</html>
- 运行结果：
2. 表单数据的自动收集
-
使用v-model进行双向数据绑定，从而自动收集数据。
作用在表单的：text、textarea checkbox radio select 上 -
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_表单输入绑定</title>
</head>
<body>
<div id="formTest">
<!--.prevent用来阻止事件的默认行为-->
<form action="wwww.baidu.com" @submit.prevent="handleSubmit">
<table style="height: 100px">
<tr>
<td>用户名:</td>
<td><input type="text" v-model="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" v-model="password"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="male" v-model="sex">男
<input type="radio" name="sex" value="female" v-model="sex">女
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="sex" value="basket" v-model="likes">篮球
<input type="checkbox" name="sex" value="foot" v-model="likes">足球
<input type="checkbox" name="sex" value="pingPang" v-model="likes">乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select v-model="choiceCity">
<option value="">--请选择--</option>
<option :value="city.id" v-for="(city,index) in citys" :key="city.id">{{city.name}}</option>
</select>
</td>
</tr>
<tr>
<td>介绍:</td>
<td>
<textarea v-model="desc" placeholder="请输入简介"></textarea>
</td>
</tr>
</table>
<button type="submit">提交</button>
</form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#formTest",
data: {
username: "",
password: "",
sex: "male",
likes: ["basket"],
citys: [
{id: 1, name: "北京"},
{id: 2, name: "天津"},
{id: 3, name: "上海"},
{id: 4, name: "广州"},
],
choiceCity: "",
desc: ""
},
methods: {
handleSubmit() {
console.log("username>>: " + this.username + " password>>: " + this.password);
console.log("sex>>: " + this.sex + " like>>: " + this.likes.toString());
console.log("city>>: " + this.choiceCity);
console.log("desc>>: " + this.desc);
}
}
})
</script>
</body>
</html>
- 运行结果
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
