vue事件绑定、事件参数、事件修饰符、表单双向绑定、监听器、计算属性

目录

事件绑定

事件参数

事件修饰符

表单

watch(监听器 监听属性)

computed(计算属性)

面试题


事件机制

概述 在dom阶段,我们已经讲述了事件机制的特点:

  1. 事件三要素

  2. 事件绑定

  3. 事件流

  4. 事件对象

  5. 事件代理

  6. 事件类型 这些概念在vue中依旧存在,但是vue中的事件机制要更加的简单便捷一

事件绑定

可以用 v-on 指令监听DOM 事件,并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click="handler">good</button> methods: { handler: function (event) { if (event) { alert(event.target.tagName) } // event 是原生 DOM 事件 } } 除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法,通过$event传递原生事件对象: <button v-on:click="say('hi',$event)">Say hi</button> methods: { say: function (message,event) { alert(message) } } 由于事件绑定在vue中使用概率较大,所以这里提供了简写形式 <button @click="say('hi',$event)">Say hi</button>

事件参数

在事件调用时,可以进行参数的传递 :
 

<div id="app"><el-button @click="toAdd" type="primary" size="small">新增</el-button><div><el-table type="index" size="small" :data="tableData" style="width: 50%"><el-table-column  prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="small" @click="toEdit(scope.row)" type="primary">编辑</el-button><el-button size="small" type="danger" @click="toDelete(scope.row.id)">删除</el-button></template></el-table-column></el-table></div><el-dialog :title="title" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item  label="时间" :label-width="formLabelWidth"><el-input v-model="form.date" autocomplete="off"></el-input></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div><script>new Vue({el: "#app",data: {dialogFormVisible: false,formLabelWidth: "120px",form: {},title: '',tableData: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]},methods: {toAdd() {this.dialogFormVisible = true;this.form = {};this.title = '新增数据'},toEdit(row) {this.form = { ...row };this.dialogFormVisible = true;this.title = '修改数据';},toDelete(id) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.tableData.splice(id,1)this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}})</script>

进行事件绑定时,可以将v-on:事件名缩写为@事件名,此方式经常使用 :

事件修饰符

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式:事件处理函数只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,通过事件修饰符来完成这些细节。

<button v-on:click.prevent="handler">点我点我</button>

常见修饰符如下 .stop 停止事件冒泡 .prevent 阻止事件默认行为 .capture 在事件捕获阶段执行事件处理函数 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件处理函数执行一次后解绑 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ,一般与scroll连用,能够提升移动端的性能 按键修饰符 一般与keyup事件类型配合使用 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right .ctrl、.alt、.shift、.meta 鼠标修饰符mouseup事件 .left、.right、.middle

new Vue({el: "#app",data: {msg: '事件修饰符'},methods: {keyupHandle() {console.log('按下某些特殊键');},toJump() {console.log('跳转');alert(1);},outer(e) {// e.target是触发事件的源头元素,目标元素// e.currentTarget 当前执行事件处理程序的元素,当前目标元素// console.log('outer', e.target, e.currentTarget);console.log('outer')for (let i = 0; i < 100; i++) {console.log(i);}},inner(e) {// e.stopPropagation();// console.log('inner', e.target, e.currentTarget);console.log('inner');}}})
<div id="app"><!-- <input type="text" @keyup.enter="keyupHandle"> --><input type="text" @keyup.13="keyupHandle"><!-- <input type="text" @mouseup.left="keyupHandle"> -->{{msg}}<a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a><!-- 点击inner   event.target   --><!-- <div class="outer" @click.self.once="outer"> --><!-- <div class="outer" @click.self="outer"> --><!-- <div class="outer" @click.capture="outer"> --><div class="outer" @scroll.passive="outer">outer<div class="inner" @click="inner"><!-- <div class="inner" @click.stop="inner"> -->inner</div></div></div>

表单

可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。使用v-model绑定了值, 那么name属性就可以不用写了。


<div id="app">{{msg}}<br>{{stu}}<br><!-- 用户名:<input type="text" v-model.lazy="stu.username"> -->用户名:<input type="text" v-model.trim="stu.username"><br><!-- .number修饰符,可以将采集到的数据转为number类型,然后再存储到数据模型中 -->年龄:<input type="text" v-model.number="stu.age"><br><!-- 性别 -->性别:<input type="radio" value="male" v-model="stu.gender">男<input type="radio" value="female" v-model="stu.gender">女<br><!-- 爱好 -->爱好:<input type="checkbox" value="basketball" v-model="stu.hobby">篮球<input type="checkbox" value="swimming" v-model="stu.hobby">游泳<input type="checkbox" value="dancing" v-model="stu.hobby">跳舞<br><!-- 城市 -->城市:<!-- <select multiple v-model="stu.city"> --><select v-model="stu.city"><option value="shanghai">上海</option><option value="beijing">北京</option><option value="guangzhou">广州</option></select><br><!-- 简介 -->简介:<textarea v-model="stu.info" cols="30" rows="10"></textarea></div>
### js代码new Vue({el: '#app',data: {msg: 'hello',stu: {// 复选框hobby: []}},methods: {}})
​

watch(监听器 监听属性)

当需要在数据变化时执行异步或开销较大的操作时,使用监听器是最有用的

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的 。


<div id="app">{{msg}}<br>a:<input type="text" v-model.number="a"><br>+<br>b:<input type="text" v-model.number="b"><br>=<br><output>{{total}}</output></div>new Vue({el: '#app',data: {msg: 'hello',a: 0,b: 0,total: 0},methods: {},// 监听  侦听watch: {a(newValue, oldValue) {this.total = this.a + this.b;},b(newValue, oldValue) {this.total = this.b + this.a;}}})
//深度监听new Vue({el: '#app',data: {msg: 'hello',a: 1,obj: {name: 'zhangsan',age: 12},},watch: {a(newValue, oldValue) {console.log('a数据发生变化...');},/* obj(newValue, oldValue) {console.log('obj数据发生变化...');} */// 深度监听obj: {handler(newValue, oldValue) {console.log('obj数据发生变化...');},// 深度监听deep: true}},methods: {changeObj() {// 更改内部数据this.obj.name = 'lisi';}}})<div id="app">{{msg}}<br>{{obj}}<button @click="changeObj">更改obj</button></div>

computed(计算属性)

计算属性 有依赖关系的数据

我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。


<div id="app">{{msg}}<br>a:<input type="text" v-model.number="a"><br>+<br>b:<input type="text" v-model.number="b"><br>=<br>{{total}}</div>   new Vue({el: '#app',data: {msg: 'hello',a: 0,b: 0,// total: 0},// 计算属性computed: {total(){console.log('计算属性');// return 111return this.a+this.b}},methods: {}})

面试题


watch和computed的区别?
computed
   1. 具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
    2.计算属性计算某一个属性得变化,如果某一个值改变了,计算属性会见监听到进行返回
watch
   1. 监听值的变化,执行异步操作【axios请求】
   ’$route.query‘:{
       this.loadArticle()
   }
   2. 无缓存性,只有当当前值发生变化时才会执行/响应

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/6600.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大语言模型分词的 chunk_size 和 chunk_overlap 说明和验证

大语言模型分词的 chunk_size 和 chunk_overlap 1. 什么是 chunk_size 和 chunk_overlap2. 实际验证 1. 什么是 chunk_size 和 chunk_overlap 对于大型语言模型如GPT-3等来说,chunk_size和chunk_overlap通常指的是文本序列的切分参数: chunk_size: 对输入文本序列进行切分的最…

Git简介与工作原理:了解Git的基本概念、版本控制系统和分布式版本控制的工作原理

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

day33哈希表

1.哈希表 常见的哈希表分为三类&#xff0c;数组&#xff0c;set&#xff0c;map&#xff0c;C语言的话是不是只能用数组和 2.例题 题目一&#xff1a; 分析&#xff1a;题目就是判断两个字符串出现的次数是否相同&#xff1b; 1&#xff09;哈希表26个小写字母次数初始化为0&…

RB-tree(红黑树)详解

RB-tree(红黑树) 红黑树的规则如下&#xff1a; 1.每个节点不是红色就是黑色 2.根节点为黑色 3.如果节点为红色&#xff0c;那么它的子节点必须为黑色 4.任何一个节点到NULL&#xff08;树的尾端&#xff09;的任何路径所包含的黑节点个数相同 简而言之就是每个路径的黑色节点数…

模拟量输出FC S_RTI(信捷C语言源代码)

模拟量输出FC SCL源代码请查看下面博客: PLC模拟量输出 模拟量转换FC S_RTI_博途模拟量转换指令_RXXW_Dor的博客-CSDN博客1、本文主要展示西门子博途模拟量输出转换的几种方法, 方法1:先展示下自编FC:计算公式如下:intput intput Real ISH Real //工程量上限 ISL Real //工…

Linux软件包管理工具-dpkg

目录 前言 一、什么是.deb 二、安装软件包 三、卸载软件包 四、查询软件包状态 五、查询已安装的软件包列表 六、解决依赖问题 前言 dpkg是Debian和Ubuntu等Linux发行版中用于管理软件包的基本包管理工具 dpkg的一些常用命令&#xff0c;通过这些命令&#xff0c;你可…

【数据挖掘】将NLP技术引入到股市分析

一、说明 在交易中实施的机器学习模型通常根据历史股票价格和其他定量数据进行训练&#xff0c;以预测未来的股票价格。但是&#xff0c;自然语言处理&#xff08;NLP&#xff09;使我们能够分析财务文档&#xff0c;例如10-k表格&#xff0c;以预测股票走势。 二、对自然语言处…

智能柜台配置项配置指南

1.全局配置config.xml 配置项说明 <configuration><param key="env" value="production" display=""/> </configuration>root节点:configuration 配置节点:param 配置项名:param 的 key属性配置项值:param 的 value属性配…

【OpenCV】常见问题及解决办法

文章目录 0 前言1 中文乱码问题2 非法路径问题 0 前言 本篇博客主要是总结OpenCV使用过程中遇到的一些问题&#xff0c;以及对应的解决办法&#xff0c;这里重点是关注OpenCV&#xff0c;既有基于C的&#xff0c;也有基于Python的&#xff0c;比较全面&#xff0c;而且也会随着…

【Linux后端服务器开发】TCP通信设计

目录 一、TCP通信协议的封装 二、TCP多进程通信 三、TCP多线程通信 一、TCP通信协议的封装 简单的TCP一对一通信其实完全可以不进行封装&#xff0c;直接分别写server端和client端的源代码&#xff0c;按照TCP通信协议的规定调用socket接口即可完成&#xff0c;但是在通过T…

RocketMQ教程-安装和配置

Linux系统安装配置 64位操作系统&#xff0c;推荐 Linux/Unix/macOS 64位 JDK 1.8 Maven3.0 yum 安装jdk8 yum 安装maven 1.下载安装Apache RocketMQ RocketMQ 的安装包分为两种&#xff0c;二进制包和源码包。 点击这里 下载 Apache RocketMQ 5.1.3的源码包。你也可以从这…

Windows11的VS201x编译OpenCV+Contrib+CUDA

(1) CUDA下载&#xff0c;注意要和cudnn版本号相关。 我安装的是cuda11.0,注意VS2015不能编译CUDA11&#xff0c;所以用VS2015的话需要下载CUDA 10。因为更高的版本目前还没有cudnn。 (2) 下载和安装VS2015。 (3) 下载和解压CMake。 CMake地址&#xff1a; Releases Kitw…

Nginx代理nginx.conf配置——nginx对静态文件代理

1. 对根目录下的静态资源代理 Nginx代理nginx.conf配置——反向代理 2. 目录代理 如果需要将资源代理到不同的目录下&#xff0c;则在nginx.conf中的server节点下进行如下配置&#xff1a; location /image {root /opt/cache; }location vedio {root /opt/cache; } 修改后…

Android dp to pix resources.getDimension(R.dimen.xxx) ,kotlin

Android dp to pix resources.getDimension(R.dimen.xxx) ,kotlin <?xml version"1.0" encoding"utf-8"?> <resources><dimen name"my_size_dp">20dp</dimen><dimen name"my_size_px">20px</dime…

【微信小程序】从网络请求返回值res.data获取并解析一个Array

在微信小程序中&#xff0c;可以通过res.data获取到请求返回的数据。如果返回的数据是一个数组&#xff0c;您可以直接对其进行操作。 以下是一个示例代码&#xff0c;演示了如何从res.data中解析一个数组&#xff1a; wx.request({url: http://yuor-api:80/device/_query/no…

双线性插值算法缩放图片,部分图片出现黑边的解决办法

因工作需要使用软件方法缩放PNG图片&#xff0c;询问chatgpt拿到了c双线性插值算法&#xff0c;开始很顺利&#xff0c;整理一下代码&#xff0c;封装一下接口&#xff0c;就可以使用了&#xff0c;效果还不错&#xff0c;马上编译发给测试组测试&#xff0c;测试发现有一些图片…

数据仓库表设计理论

数据仓库表设计理论 数仓顾名思义是数据仓库&#xff0c;其数据来源大多来自于业务数据(例如:关系型数据库)&#xff0c;当设计数仓中表类型时(拉链表、增量表、全量表、流水表、切片表)时&#xff0c;应先观察业务数据的特点再设计数仓表结构 首先业务数据是会不断增长的-即…

练习——动态内存分配的笔试题

今天我们分享几道经典的笔试题&#xff0c;做完直接变成陈泽 第一题 ~~ --------------------------------------------------------------------------------------------------~~ void GetMemory(char* p) {p (char*)malloc(100); } void Test(void) {char* str NULL;Get…

阿里云容器镜像仓库(ACR)的创建和使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

使用spark进行hbase的bulkload

使用spark进行hbase的bulkload 一、 背景 HBase 是一个面向列&#xff0c;schemaless&#xff0c;高吞吐&#xff0c;高可靠可水平扩展的 NoSQL 数据库&#xff0c;用户可以通过 HBase client 提供的 put get 等 api 实现在数据的实时读写。在过去的几年里&#xff0c;HBase …