vue事件与表单处理
2021-02-02 本文已影响0人
amanohina
事件处理 v-on指令
-
用于进行元素的事件绑定
- Vue.js 还为 v-on 指令提供了简写方式
@click
-
事件代码过多时，可以在methods中设置函数，并且设置为事件处理程序
-
设置事件处理程序后，可以从参数中接收事件对象。
-
在视图中可以通过 $event 访问事件对象。
<button @click="fn2(200, $event)">按钮4</button>
<script>
new Vue({
el: '#app',
data: {
content: '这是默认内容'
},
methods: {
fn2 (value, event) {
console.log(value, event);
}
}
})
</script>
表单输入绑定 v-model
输入什么，显示什么
- 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。
<body>
<div id="app">
<p>元素内容为：{{ value }}</p>
<input type="text" v-model="value">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value: ''
}
});
</script>
</body>
在控制台使用vm.value也能改变输入框的内容，实现了双向绑定
输入框绑定
-
输入框分为单行输入框 input 与多行输入框 textarea。
单选按钮绑定
-
单选按钮的双向数据绑定方式：
复选框绑定
- 复选框绑定分为单个选项与多个选项两种情况，书写方式不同。
多选框的数据是数组，不设置value为数组的话CheckBox就是复选框，而不是多选
<body>
<div id="app">
<!-- 单个复选框进行双向数据绑定的演示 -->
<p>单个复选框的值： {{ value4 }}</p>
<input
type="checkbox"
value="选项内容"
id="one"
v-model="value4">
<label for="one">选项内容</label>
<!-- 多个复选框进行双向数据绑定的演示 -->
<p>多个复选框的值：{{ value5 }}</p>
<input
type="checkbox"
id="cb1"
value="选项1"
v-model="value5"
>
<label for="cb1">选项1</label>
<input
type="checkbox"
id="cb2"
value="选项2"
v-model="value5"
>
<label for="cb2">选项2</label>
<input
type="checkbox"
id="cb3"
value="选项3"
v-model="value5"
>
<label for="cb3">选项3</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value4: '',
value5: []
}
});
</script>
</body>
复选框的value值是布尔值
选择框绑定
- 选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同。
多选框为数组
多选框需要按住键盘的ctrl，然后选择，就可以多选
v-model指令小结
- input输入框：绑定字符串值
- textarea输入框：绑定字符串值
- radio：绑定字符串值
- checkbox：单个绑定布尔值，多个绑定数组
- select：单选绑定字符串，多选绑定数组
修饰符
- 修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作
事件修饰符
- 进行事件处理的修饰功能
.prevent修饰符
- 用于阻止默认事件行为，相当于event.preventDefault()
比如a标签会跳转，.prevent就会阻止跳转
<a @click.prevent href="https://kaiwu.lagou.com/">链接</a>
.stop修饰符
- 用于阻止事件传播，相当于 event.stopPropagation()。
阻止事件冒泡 - Vue.js 中允许修饰符进行连写，例如：
@click.prevent.stop
.once修饰符
- 用于设置事件只会触发一次
<body>
<div id="app">
<button @click="fn">按钮1</button>
<button @click.once="fn">按钮2</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn () {
console.log('按钮被点击了');
}
}
})
</script>
</body>
按钮2的事件只能执行一次
学习更多的修饰符
按键修饰符
按键码
- 按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式
<!-- 按下一个键，执行fn函数 -->
<input type="text" @keyup="fn">
<!-- 按键码设置方式，只能由数字1触发 -->
<input type="text" @keyup.49="fn">
<!-- 可以直接用字母操作，只按下a才有效果 -->
<input type="text" @keyup.a="fn">
特殊按键
- 指的是键盘中类似于esc，enter，delete等功能按键，为了更好地兼容性，应该首选内置的别名
<!-- esc才会触发 -->
<input type="text" @keyup.esc="fn">
官网说明
按键修饰符也是可以连写的
<!-- 点击了a或者b或者c都可以触发 -->
<input type="text" @keyup.a.b.c="fn">
系统修饰符
- 系统按键指的是 ctrl 、alt 、shift 等按键
- 单独点击系统操作符无效
- 系统按键通常与其他按键组合使用
- .ctrl修饰符
- .alt修饰符
- .shift修饰符
<body>
<div id="app">
<!-- <input type="text" @keyup.17.q="fn"> -->
<input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
console.log(event);
this.inputValue = '';
}
}
});
</script>
</body>
代码的意思就是ctrl+p消除输入框的内容，底部也有event的打印
shift和alt与上一致
官网说明
鼠标按键修饰符
- 设置点击事件由鼠标哪一个按键来完成
- .left修饰符
- .right修饰符
- .middle修饰符
<!-- 鼠标左键 -->
<button @click.left="fn">按钮1</button>
<!-- 鼠标右键 -->
<button @click.right="fn">按钮2</button>
<!-- 滚轮按下 -->
<button @click.middle="fn">按钮3</button>
v-model修饰符
.trim修饰符
- 用于自动过滤用户输入内容首尾两端的空格
.lazy修饰符
- 用于将 v-model 的触发方式由 input 事件触发更改为change 事件触发
.number修饰符
- 用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容
<div id="app">
<!-- 去除首尾两端的空格 -->
<input type="text" v-model.trim="inputValue">
<p>{{ inputValue }}</p>
<!-- 懒操作，频繁的更新双向数据变为了需要失去焦点，且内容不同了才更新 -->
<input type="text" v-model.lazy="inputValue">
<p>{{ inputValue }}</p>
<!-- 使用parseFloat将字符串转换为数字，如果输入的是字母则会返回原始内容 -->
<input type="text" v-model.number="inputValue">
<p>{{ inputValue }}</p>
</div>
