【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.mzph.cn/bicheng/58166.shtml

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

相关文章

【Android】浅析OkHttp(1)

【Android】浅析OkHttp(1) OkHttp 是一个高效、轻量级的 HTTP 客户端库,主要用于 Android 和 Java 应用开发。它不仅支持同步和异步的 HTTP 请求,还支持许多高级功能,如连接池、透明的 GZIP 压缩、响应缓存、WebSocke…

JUC并发编程面试题总结

文章目录 1、创建线程的三种方式2、线程的状态3、线程的上下文切换4、run和start的区别5、sleep和wait区别6、虚假唤醒,精确唤醒7、两阶段终止模式8、多线程下的线程安全问题9、如何解决线程安全问题10、synchornized的原理11、锁升级的机制12、锁消除13、批量重偏向…

Unity编辑器制作多级下拉菜单

Unity编辑器下拉菜单 大家好,我是阿赵。   在Unity引擎里面编写工具插件,有时候会用到一些特殊的菜单形式,比如下拉选项。 通过下拉菜单,给用户选择不同的选项。   如果只是一层的下拉列表,可以用EditorGUILayout.…

C++二级题 计算好数:1数大于0数(二进制的位运算)

1、题目 若将一个正整数化为二进制数,在此二进制数中,我们将数字1的个数多于数字0的个数的这类二进制数称为好数。 例如: (13)10 (1101)2,其中1的个数为3,0的个数为1,则此数是好数; (10)10 (1…

Nginx upstream

什么是Nginx upstream? Nginx 模块一般分为三大类:handler、filter和upstream。 利用 handler、filter 这两个模块,可以使 Nginx 轻松完成任何单机工作。 upstream 模块将使 Nginx 跨越单机的限制,完成网络数据的接收、处理和转…

【数学二】常微分方程-一阶微分方程

考试要求 1、了解微分方程及其阶、解、通解、初始条件和特解等概念. 2、掌握变量可分离的微分方程及一-阶线性微分方程的解法,会解齐次微分方程. 3、会用降阶法解下列形式的微分方程: y ( n ) f ( x ) , y ′ ′ f ( x , y ′ ) y^{(n)}f(x),y^{}f(x,y^{}) y(n)f(x),y′′f(…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23目录1. Advancements in Visual Language Models for Remote Sensing: Datasets, Capabilities, and Enhancement Techniques摘…

git restore恢复删除文件

新版本 在 Git 2.23 版本之后,Git 引入了一个新的命令 git restore,用于简化文件恢复操作。可以用 git restore 来恢复误删除的文件。下面是详细的使用方法: 1. 恢复工作区中删除的文件(未提交) 如果文件已被删除&a…

对角双差速轮AGV平移、直行、转弯、原地旋转案例

在对角两对双差速轮 AGV(自动导引车)中,车辆配置了两对差速轮,分别安装在左前(Front Left,FL)和右后(Rear Right,RR)。这种配置使得 AGV 具有较高的机动性,可以实现平移、直行、转弯和原地旋转等复杂运动 2. 运动学模型 2.1 定义变量 车辆参数: r:车轮半径(米…

flask服务通过gunicorn启动

使用 Gunicorn 启动 Flask 服务通常可以提升 Flask 应用的性能。以下是通过 Gunicorn 启动 Flask 服务的步骤: 1. 安装依赖 首先,确保已安装 Flask 和 Gunicorn: pip install flask gunicorn2. 创建 Flask 应用 创建一个简单的 Flask 应用…

IPV6扩展头部

IPv6扩展头部(Extension Header)是一种用于在IPv6数据包中添加额外信息和功能的结构。与IPv4相比,IPv6的头部设计简化了基本头部,使其更灵活。扩展头部用于提供各种功能,如路由、分片、流量控制等。扩展头部的使用使得…

安全知识见闻-网络安全热门证书

一、OSCP(Offensive Security Certified Professional) 1. 证书介绍 2.考点 3.部分考试要求 4.练习方法 二、OSEP(Offensive Security Exploit Developer) 1.证书介绍 2.考点 3.练习方法 三、CISSP(Certified lnformation Systems Security Professional&a…

技术成神之路:二十三种设计模式(导航页)

设计原则/模式链接面向对象的六大设计原则技术成神之路:面向对象的六大设计原则创建型模式单例模式建造者模式原型模式工厂方法模式抽象工厂模式行为型模式策略模式状态模式责任链模式观察者模式备忘录模式迭代器模式模板方法模式访问者模式中介者模式命令模式解释器…

【已解决,含泪总结】非root权限在服务器上配置python和torch环境,代码最终成功训练(一)

配置Python环境 没有root权限服务器上有多个python环境但没有自己想要的怎么办 之前跑别的实验的时候改过指定的python3.7版本,但是居然我过了一段时间之后,再次打开,python版本居然又回到2.7(服务器/usr/下的默认python版本&am…

什么是AI神经网络?

文章目录 神经网络的基本概念如何工作?训练过程应用实例未来展望推荐阅读文章 在当今的科技时代,人工智能(AI)已经深入到我们生活的各个方面,而神经网络则是推动这一发展的重要技术之一。无论是在图像识别、自然语言处…

Zig 语言通用代码生成器:逻辑,冒烟测试版发布二

Zig 语言通用代码生成器:逻辑,冒烟测试版发布二 Zig 语言是一种新的系统编程语言,其生态位类同与 C,是前一段时间大热的 rust 语言的竞品。它某种意义上的确非常像 rust,尤其是在开发过程中无穷无尽抛错的过程&#x…

高等数学-宋浩版2.0-映射

映射:X,Y为非空集合,存在法则F,对X(原像)中每个元素X,按法则F,在Y中有唯一元素与之对应,F为x到Y(镜像)的映射。f:X->Y X原像,Y像,x定义域,Df,Rf &#x…

Mac book英特尔系列?M系列?两者有什么区别呢

众所周知,Mac book有M系列,搭载的是苹果自研的M芯片,也有着英特尔系列,搭载的是英特尔的处理器,虽然从 2020 年开始,苹果公司逐步推出了自家研发的 M 系列芯片,并逐渐将 MacBook 产品线过渡到 M…

python之多任务爬虫——线程、进程、协程的介绍与使用(16)

文章目录 1、什么是多任务?1.1 进程和线程的概念1.2 多线程与多进程的区别1.3 并发和并行2、python中的全局解释器锁3、多线程执行机制4、python中实现多线程(threading模块)4.1 模块介绍4.2 模块的使用5、python实现多进行程(Multiprocessing模块)5.1 导入模块5.2 模块的…

Caffeine本地缓存框架

Caffeine本地缓存框架 hi,我是阿昌,今天记录一下Java最强本地缓存Caffeine 1、缓存介绍 缓存(Cache),在软件无处不在。从底层CPU多级缓存,再到客户页面缓存,和服务器数据缓存,导出都存在着缓存的身影&am…