Vue基础（三）
绑定监听
事件的基本使用：
- 使用
v-on:xxx或@xxx绑定事件，其中xxx是事件名； - 事件的回调需要配置在
methods对象中，最终会在vm上； methods中配置的函数，不要用箭头函数！否则this就不是vm了；methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或 组件实例对象；@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
-
事件对象 默认事件形参:
event隐含属性对象:$event$event就是当前触发事件的元素，即使不传$event，在回调函数中也可以使用event这个参数。
<button @click="test3">test3</button>
test3(event) { alert(event.target.innerHTML); }
事件修饰符
prevent：阻止默认事件（常用）；event.preventDefault()stop：阻止事件冒泡（常用）；event.stopPropagation()once：事件只触发一次（常用）；capture：使用事件的捕获模式；self：只有event.target是当前操作的元素时才触发事件；仅绑定元素自身触发
<!-- 阻止事件冒泡 -->
<div id="big" @click="test">
<div id="small" @click.stop="test2"></div>
</div>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
按键修饰符
@keyup 监听键盘按键按下式调用
如 @keyup.enter=‘’‘’
支持监听多按键 如 @keyup.enter.ctrl
<!-- 任何按键按下都会触发回调函数 -->
<textarea @keyup="testKeyup"></textarea>
<!-- 下面的两种写法效果是一致的 -->
<!-- 使用按键码，回车键的keyCode是13 -->
<textarea @keyup.13="testKeyup"></textarea>
<!-- 使用按键修饰符，因为回车键比较常用，所以vue为他设置了名称，可以直接使用enter来代替 -->
<textarea @keyup.enter="testKeyup"></textarea>
v-model - 表单处理收集数据
使用v-model(双向数据绑定)自动收集数据
- text/textarea
<input type="text"/>， 则v-model收集的是value值，用户输入的就是value值。
- checkbox
<input type="checkbox"/>
-
没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- v-model的初始值是数组，那么收集的的就是value组成的数组
- radio
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
- select
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<!--
收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
-->
<!-- 准备好一个容器-->
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
密码：<input type="password" v-model="userInfo.password"> <br /><br />
年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br /><br />
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br /><br />
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: 18,
sex: 'female',
hobby: [],
city: 'beijing',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
</html>
金色小芝麻的总结图：
阅读剩余
版权声明：
作者：chun
链接：https://chun53.top/703.html
文章版权归作者所有，未经允许请勿转载。
THE END