当前位置: 首页 > article >正文

【Vue3】第二篇

Vue3学习第二篇

  • 01. 事件处理
  • 02. 事件传参
  • 03. 事件修饰符
  • 04. 数组变化侦测
  • 05. 计算属性
  • 06. class绑定
  • 07. style绑定
  • 08. 侦听器
  • 09. 表单输入绑定
  • 10. 模板引用

01. 事件处理

vue当中的事件处理html、css中的不一样,它单独做了处理

在这里插入图片描述

注意:用法中只是用点击事件来举例,工作中还有很多事件类型

(1)内联事件处理器
在这里插入图片描述
在这里插入图片描述
(2)方法事件处理器
在这里插入图片描述

注意:this.count读取到data里面的数据

有单独表达式应用场景,所以工作中更多的是使用方法事件处理器

注意:v-on: -> @

02. 事件传参

在JS事件当中,是会有一个event对象的。vue也是

(1)获取event对象

在这里插入图片描述
实操:
在这里插入图片描述

同样,它也有target,与原生的JS对象一样

在这里插入图片描述

(e)表示获取event对象

将按钮内的内容修改:
在这里插入图片描述

(2)传递参数

(msg)表示传递参数进入函数

在这里插入图片描述

(3)在传递参数过程中获取event
在这里插入图片描述

03. 事件修饰符

事件修饰符 --> 简化代码

在这里插入图片描述

意思是,我们没必要通过event调用阻止默认事件发生/阻止事件冒泡等方法来实现功能,而是用更好的处理方式。这样可以让方法更能专注于数据逻辑不用处理DOM事件细节

在这里插入图片描述

04. 数组变化侦测

(1)变更方法
数组发生变化,UI会得到相应的响应(自动更新)
在这里插入图片描述
实操:
在这里插入图片描述
当点击添加数据这个按钮之后,界面自动更新添加结果
在这里插入图片描述

(2)替换一个数组
在这里插入图片描述
在这里插入图片描述

05. 计算属性

在这里插入图片描述

如果下图中这种式子过多,不易于观察代码。

在这里插入图片描述

所以官方推荐我们使用计算属性

在这里插入图片描述
在这里插入图片描述

方法也能实现同样功能,那么区别在哪里呢?

在这里插入图片描述
在这里插入图片描述

即在代码块没有发生改变的情况下,用计算属性只需要计算一次,而调用方法则每一次都要计算。

06. class绑定

在css中,class用来绑定写样式,自然,vue也是写HTML页面,样式同样必不可少,所以,如图中所言,数据绑定的一个常见需求场景是操作元素的CSS class列表,即通过逻辑来操作class。

在这里插入图片描述

拼接字符串:后续class可能后面要加字符串,myClass里可能多个单词,这个跟普通的属性绑定是不太一样,操作性可能麻烦一点。

在这里插入图片描述
在这里插入图片描述

07. style绑定

除了class绑定,还有style绑定,因为还有很多开发者直接在元素中添加style属性(也就是内联样式)。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

推荐使用class绑定,因为style绑定权重太高。

08. 侦听器

在这里插入图片描述

侦听器监听页面的数据变化。 也就是说,页面的数据一旦发生变化,侦听器就可以监听到,从而做出你想做的业务逻辑操作。(当然,只能监听具有响应式的数据

什么是具有响应式的数据?
就是我们在data中所声明的数据,通过双花括号的模板语法绑定的数据是可以监听的。

在这里插入图片描述

实操:

在这里插入图片描述

点击修改数据后:

在这里插入图片描述

注意:函数名必须与监听的数据对象保持一致

在这里插入图片描述

09. 表单输入绑定

在这里插入图片描述

简而言之:
在这里插入图片描述

意思就是,假如是你在输入框输入数据同时你要得到这个数据,即在你输入的同时你就要得到这个数据,如果用js来实现的话很麻烦,而在vue当中只需要一个指令就可以完成。

单选框
在这里插入图片描述
输入或删除的同时,能看到数据的变化
在这里插入图片描述

复选框:
(注意label,如果checked被设为true,则勾选框框并显示true)
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

lazy:只有点回车的时候,才会浮现数据
(因为实时输入实时获取,比较浪费资源)
number:只接受数字
trim:去掉前后空格

10. 模板引用

拿到底层DOM元素所用。
在这里插入图片描述

实操:ref拿到底层DOM元素

在这里插入图片描述
在这里插入图片描述

假如是要改变里面的内容,使用innerHTML重新赋值
在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/373170.html

相关文章:

  • el-dialog支持全局拖拽功能
  • 十六:Python学习笔记-- 爬虫(2)requests 模块详解
  • SASS转换成CSS步骤
  • Copilot一又成编程助手Top1,GitHub官宣接入Claude+Gemini!OpenAI的Canvas沦为备胎
  • 第二十三章 Vue组件通信之非父子组件通信
  • Mongodb使用视图连接两个集合
  • 2024年“炫转青春”山东省飞盘联赛盛大开赛——临沭县青少年飞盘运动迅速升温
  • 文本分段Chunking综述-RAG
  • 解决:如何在opencv中得到与matlab立体标定一样的矫正图?(python版opencv)
  • 【无人机设计与控制】红嘴蓝鹊优化器RBMO求解无人机路径规划MATLAB
  • R变量索引 - 什么时候使用 @或$
  • webrtc agc2实现原理
  • 高通 Android 12 首次安装去掉下拉弹窗
  • 书生实战营第四期-第三关 Git+InternStudio
  • MATLAB人脸考勤系统
  • ROS2入门学习——ROS1与ROS2区别
  • Unity XR Interaction Toolkit 开发教程(2):导入 SDK【3.0 以上版本】
  • 前缀和算法 | 计算分矩阵的和
  • 安卓开发之数据库的创建与删除
  • Ajax:跨域 JSONP
  • 面向对象的需求分析方法
  • etcd多实例配置
  • 开源的GPT-4o模型使用指南,Mini-Omni2集视觉、语音和双工能力于一体的
  • conda激活环境失败
  • 蓝牙资讯|苹果AirPods Pro 2推出听力测试、助听器和听力保护等功能
  • spring boot 3.x 整合Swagger3