VUE中的事件处理及表单处理

1-事件处理

1.1-事件对象

无需给事件处理函数传递参数

在事件处理函数定义的位置, 直接通过形参接收事件对象即可

<div id="app"><h1>{{msg}}</h1><button v-on:click="updateMsg">点击改变msg</button></div><script>let vm = new Vue({el:'#app',data:{msg:'hello world'},methods: {updateMsg(e){console.log(e)this.msg = '你好'}},})</script>

需要给事件处理函数传递参数

需要使用系统提供的关键字**$event**手动传递事件对象

 <!-- 1.无需给事件处理函数传递参数，形参就是事件对象2.需要给事件处理函数传递参数，用$event代表事件对象--><div id="app"><h1>{{msg}}</h1><button v-on:click="updateMsg('哈哈',$event)">点击改变msg</button><hr><input type="text" @keyup="getInput"></div><script>let vm = new Vue({el:'#app',data:{msg:'hello world'},methods: {updateMsg(e,val){console.log(e,val)this.msg = '你好'},getInput(e){if(e.keyCode === 13) {console.log(e.target.value)}}},})</script>

1.2-事件修饰符

作用: 限制事件触发的时机或者条件

语法格式

<div @事件名称.事件修饰符="事件处理函数"></div>

1.2.1-stop

作用: 阻止事件冒泡

书写位置: 子元素事件注册位置

<style>.father {width: 300px;height: 300px;background-color: pink;}.child {width: 200px;height: 200px;background-color: gold;}</style>
<div id="app"><div class="father" @click="getFather">father<div class="child" @click.stop="getChild">child</div></div></div><script>let vm = new Vue({el:'#app',data:{},methods: {getFather(){console.log('父标签被点击')},getChild(e){// 原生js阻止冒泡行为// e.stopPropagation();console.log('子标签被点击')}},})</script>

1.2.2-prevent

作用: 阻止默认行为

<div id="app"><a href="https://www.baidu.com" target="_blank" @click.prevent.once="handle">点击跳转到百度</a></div><script>let vm = new Vue({el:'#app',methods: {handle(e){// 原生js阻止默认行为// e.preventDefault();console.log('点击了')}},})</script>

1.2.3-capture

作用: 修改事件执行顺序, 将事件执行顺序变为捕获模式(由外向内依次触发)

书写位置: 父元素的事件注册位置

<div id="app"><!-- 将事件执行顺序改变为由外向内 --><div class="father" @click.capture="getFather">father<div class="child" @click="getChild">child</div></div></div><script>let vm = new Vue({el:'#app',data:{},methods: {getFather(){console.log('父标签被点击')},getChild(){console.log('子标签被点击')}},})</script>

1.2.4-self

作用: 限制事件只能被自己触发, 不能被冒泡行为触发

书写位置: 父元素事件注册位置

<div id="app"><!-- self 限制只能被自身出发 --><div class="father" @click.self.once="getFather">father<div class="child" @click="getChild">child</div></div></div><script>let vm = new Vue({el:'#app',data:{},methods: {getFather(){console.log('父标签被点击')},getChild(){console.log('子标签被点击')}},})</script>

1.2.5-once

作用: 限制事件只能被触发一次

<div id="app"><!-- once 限制事件只能被触发一次 --><div class="box" @click.once="handle"></div></div><script>let vm = new Vue({el:'#app',data:{},methods: {handle(){console.log('盒子被点击了')}},})</script>

1.3-按键修饰符

作用: 修饰键盘事件, 从而限制键盘事件的触发条件(只有在按下按键修饰符对应的键盘按键的时候, 才执行事件处理函数)

语法格式

<input @键盘事件名称.按键修饰符="事件处理函数">

1.3.1-系统内置的按键修饰符

.enter: 回车键
.tab: tab键
.delete (捕获“删除”和“退格”键)
.esc: esc键
.space空格键
.up: 上
.down: 下
.left: 左
.right: 右

1.3.2-自定义按键修饰符

按键修饰符名字自定义即可
键盘码必须真实有效

// Vue.config.keyCodes.自定义按键修饰符别名 = 按键键盘码
Vue.config.keyCodes.f1 = 112;

1.3.3-系统修饰符

.ctrl
.alt
.shift
.meta

2-表单处理

2.0-双向数据绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jnQWqfQ-1625197010923)(.\media\双向数据绑定.jpg)]

2.1-v-model指令

作用: 将用户通过表单元素输入或者选择的内容同步到数据层
注意: v-model这个指令一般只能和表单元素结合起来使用

2.2-常见表单元素双向数据绑定

<div id="app"><h3>用户信息</h3><div>用户名：<input type="text" placeholder="请输入用户名" v-model="userinfo.username"></div><div>密码：<input type="password" placeholder="请输入密码" v-model="userinfo.password"></div><div>性别：<input type="radio" value="male" v-model="userinfo.sex"> 男<input type="radio" value="female" v-model="userinfo.sex"> 女</div><div>爱好：<input type="checkbox" value="code" v-model="userinfo.hobby"> 敲代码<input type="checkbox" value="sleep" v-model="userinfo.hobby"> 睡觉<input type="checkbox" value="playGame" v-model="userinfo.hobby"> 玩游戏</div><div>所属省份：<select v-model="userinfo.province"><option value="JS">江苏</option><option value="ZJ">浙江</option><option value="SC">四川</option><option value="HB">湖北</option></select></div><div><button @click="submit">提交</button></div></div><script>let vm = new Vue({el:'#app',data:{userinfo:{username:'',password:'',sex:'male',hobby:['sleep','playGame'],province:'JS'}},methods: {submit(){console.log(this.userinfo)// 发送一个ajax请求}},})</script>

2.2-表单修饰符

作用: 对v-model指令所收集到的表单内容进行处理

2.2.1-书写位置

v-model.表单修饰符="数据"

2.2.2-系统表单修饰符

trim
- 作用: 去除表单元素内容首位和末尾的空格
number
- 作用: 对表单元素的内容进行数据类型的转换, 将表单内容转换成数值类型
- 特点:
  - 当表单内容可以被转换成数值类型的时候, 会自动转换
  - 当表单内容无法转换成数值类型的时候, 则不会做处理
lazy
- 作用: 延迟v-model同步数据的时机, 失去焦点的时候, 再进行数据同步

3-vm.$set

3.1-作用

动态给数组添加元素
动态给对象添加属性

3.2-语法

vm.$set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)

3.3-别名

Vue.set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)

<div id="app"><h3 v-for="item in arr">{{item}}</h3><hr><h3 v-for="(item,key) in userinfo">{{key}}=={{item}}</h3><hr><button @click="add">点击向数组添加一条数据</button><button @click="addObj">点击向对象添加一条属性</button></div><script>let vm = new Vue({el:'#app',data:{arr:['宝马','奔驰','奥迪'],userinfo:{username:'张三',sex:'男',age:20}},methods: {add(){// this.arr.push('大众')// this.arr[3] = '保时捷'this.$set(this.arr,3,'保时捷')console.log(this.arr)},addObj(){this.userinfo.province = '江苏'// this.$set('目标数据','数组的索引/对象属性名','数组的元素/对象属性值')// this.$set(this.userinfo,'province','江苏')// 别名// Vue.set(this.userinfo,'hobby','睡觉')console.log(this.userinfo)// 强制视图更新this.$forceUpdate()}},})</script>

VUE中的事件处理及表单处理相关推荐

vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...
antd vue中，如何给表单动态添加input，解决遇到一些坑
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细,但也会遇到一些意想不到的问题,最后看文档没办法解决,只能去看源码,折腾了好久,终于把问题给解决了,遇到的问题主要是当添加in ...
vue中使用element-ui的表单验证功能prop属性
转自:https://www.it610.com/article/1279903369556672512.htm 1.在标签中绑定 :rules="方法名称",然后在 data ...
Ant Design of Vue中a-form-model多行表单对齐和验证
表单是前端人员不得不面对的一个组件,如何画的对齐好看,验证成功呢? 1.代码: (1)布局: html+css,当然肯定使用ant的组件注意:单位我们放在suffix里面,如suffix=" ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
vue与C#实现自定义表单审批流程构建-前端
vue与C#实现自定义表单审批流程构建做信息化项目相信绝大部分人都接触过单据审批流程的需求,例如发起一个采购申请,需要几个节点审核,部门负责人审核,采购审核,财务审核等等.审批人也需要可自定义,以及 ...
Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...

VUE中的事件处理及表单处理

VUE中的事件处理及表单处理

1-事件处理

1.1-事件对象

1.2-事件修饰符

1.2.1-stop

1.2.2-prevent

1.2.3-capture

1.2.4-self

1.2.5-once

1.3-按键修饰符

1.3.1-系统内置的按键修饰符

1.3.2-自定义按键修饰符

1.3.3-系统修饰符

2-表单处理

2.0-双向数据绑定

2.1-v-model指令

2.2-常见表单元素双向数据绑定

2.2-表单修饰符

2.2.1-书写位置

2.2.2-系统表单修饰符

3-vm.$set

3.1-作用

3.2-语法

3.3-别名

VUE中的事件处理及表单处理相关推荐

最新文章

热门文章