Vue2 —— 学习(二)

目录

一、事件处理

(一)基本语法

(二)点击事件语法

1.事件绑定

2.回调函数 

3.参数 event  

注意:

(三)事件修饰符

1.阻止默认事件 常用

2.阻止事件冒泡 常用

3.事件只触发一次 常用

4.使用事件的捕获模式

5.当前操作元素触发事件

6.事件默认立即执行

(四)键盘事件语法

1.事件绑定

通过键盘名绑定:

通过按键的编码绑定

自定义按键名:

2.回调函数 

二、计算属性

(一)简介

原理:

(二)方法实现 姓名案例

1.流程

2.代码部分

(三)计算属性实现 姓名案例 

1.流程

2.特点

3.注意

4.代码部分

(四)简写方式

 三、监视属性

(一)介绍

(二)天气案例 无监听

1.流程

2.代码部分

(二)监视

1.设置监视

2.其它写法

 (三)深度监视

(四)监视的简写形式

四、计算属性监视属性对比 

(一)案例对比

 (二)总结


一、事件处理

(一)基本语法

事件的基本绑定是

v-on:加绑定方式 = ‘回调函数名’

@加绑定方式 = ‘回调函数名’

(二)点击事件语法

1.事件绑定

点击事件绑定 v-on:click = '回调函数名'

<button v-on:click="showInfo">点我提示信息</button>

v-on: 可以简化成@         @click = '回调函数名'  也是一个意思

<button @click="showInfo">点我提示信息</button>
2.回调函数 

绑定事件的回调函数要写在 Vue 实例的 methods 对象中 如下

showInfo() 函数中的 this 指向 Vue 实例对象 

写在 Vue 实例中的函数 尽量用普通函数书写 不然用箭头函数 this 会指向 window

 new Vue({el: '#root',data: {name: '一个人'},methods:{showInfo(event){alert('你好')}}})
3.参数 event  

函数中有个参数是 event 它是被监听的对象 event.target 能找到被我们监听的 button

event.target.innerText 能获得里面的文字内容

注意如果要传参记得给 event 占位 因为 event 很重要 ,在 Vue 模板中 使用 $event 占位 

     methods: {showInfo(event,number) {console.log(number)},

想要 event 是第几个参数 就把 $event 写在哪儿就行

<button v-on:click="showInfo($event,23)">点我提示信息</button>
注意:

不能把事件处理的回调函数写在 data 中 虽然 也能使用 但是放在 data 中 Vue 会给这个函数默认进行数据代理,但是我们函数不需要修改,只是被调用,不需要数据代理,这样就会加大 Vue 的负担,所以我们单独写在 methods 对象中,methods 中都i是被 Vue 所管理的函数。

(三)事件修饰符

就是来修饰事件的行为的,重点是前三个,可以连着使用类似于 @click.stop.prevent 先停止冒泡再停止默认行为,是有顺序的。

1.阻止默认事件 常用

 e.preventDefault() 我们也可以不用这种写法

  methods: {showInfo1(e) {e.preventDefault()alert('同学你好')}}

 我们可以用下面这种形式 在点击事件 @click 后面加上 事件修饰符 prevent 就是上面阻止默认行为的作用

<a href="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>
2.阻止事件冒泡 常用

stop

使用下面的代码,点击里面的按钮会触发两次提示弹窗这是典型的事件冒泡,点击儿子冒泡给父亲

 <div class="demo" @click="showInfo1"><button @click.stop="showInfo1">点击</button></div>
3.事件只触发一次 常用

once

<button @click.once="showInfo1">点击</button>
4.使用事件的捕获模式

capture 要加在外面的盒子 点击里面的盒子 就不会冒泡了

先由外向内捕获 再由内向外冒泡 一般是冒泡阶段输出结果

如果想捕获阶段输出结果

<div class="box1" @click.capture="showInfo1"><div class="box2" @click="showInfo1">点击</div>
</div>
5.当前操作元素触发事件

self 

只有event.target 是当前的操作的元素才触发事件

就是点击按钮时 event.target 就是这个 button 不会向上冒泡执行操作了

<div class="box1" @click.self="showInfo1"><div class="box2" @click="showInfo1">点击</div>
</div>
6.事件默认立即执行

passive 

移动端用的比较多

也不是所有的事件都需要

滚轮事件需要

不用等滚轮事件的回调结束再触发事件,不然默认是执行完回调函数再去执行事件,如果回调函数执行时间长的话,滚动条就不动了,还会造成页面卡顿

@scroll 滚动条滚动

@wheel 鼠标滚轮滚动

    <ul @scroll.passive="demo"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

(四)键盘事件语法

1.事件绑定

@keyup @keydown 键盘按键上升时触发 键盘下降时触发

placeholder 默认浅色文字

通过键盘名绑定:

如果像我们按指定按键才能触发相关事件时,我们可以在绑定时指定一个按键别名:

例如 @keyup.enter=''

回车:enter

删除:delete

退出:esc

空格:space

换行:tab (特殊必须配合keydown 使用 因为 tab 本来的用处就能捕获焦点)

上:up

下:down

左:left 

右:right

系统修饰键

用 keyup 时按下修饰键同时也得按上其它键,然后释放其它键,事件才能被触发,具体用哪个键子就直接在后面点上就行 比如想 ctrl + y 生效 就写成 @keyup.ctrl.y 的格式 

用 keydown 时正常触发事件,按下就触发

ctrl:

alt:

shift:

meta:就是 win 键

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
通过按键的编码绑定

就是 e.keycode 属性 但是不建议使用

<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
自定义按键名:

 我们也可以自定义按键的名字,前面是自己的名字 然后后面是对应的 按键码 进行绑定,但是也不推荐使用

Vue.config.keyCodes.huiche = 13
2.回调函数 

返回键盘输入的内容 e.target.value 是输入的内容 

e.key 是按键的名字 e.keyCode 是按键的编码号

 methods: {showInfo(e) {console.log(e.target.value)}

二、计算属性

(一)简介

首先得明白属性是指什么 Vue 认为属性就是 实例中 data 对象中写的东西

计算属性就是拿着我们 data 中有的属性进行加工和计算 生成一个全新的属性 就是计算属性

计算属性不放在 data 里面 要单独放在 computed 对象中 就是计算的意思

计算属性也属于 Vue 实例 vm 可以直接调用

原理:

使用了 Object.defineproperty 方法提供的 getter 和 setter

 computed:{fullName:{get(){}}}

(二)方法实现 姓名案例

1.流程

 data 中的数据任何一个发生变化,Vue 模板都会重新解析一遍,如果遇到插值语法中的方法一定会重新调用一遍。所以下面当在页面的文本框中更改姓和名时 使用v-model 指令等于同时也改变了 实例中 data 的值,data 值发生了变化 fullName 函数重新调用 就会发生更改

如果重复调用好几次相同的方法 这个方法就得被调用好几次,模板也会再同样解析好几次

2.代码部分
<body><div id="root">性:<input type="text" v-model:value="firstName"> <br>名:<input type="text" v-model:value="lastName"> <br>姓名:<span>{{fullName()}}</span></div><script>Vue.config.keyCodes.huiche = 13new Vue({el: '#root',data: {firstName: '张',lastName: '三'},methods: {fullName() {return this.firstName + '-' + this.lastName}}})</script>
</body>

(三)计算属性实现 姓名案例 

1.流程

我们通过姓和名 两个属性相加得出 姓名 新得到的姓名属性就是计算属性

计算属性也属于 Vue 实例 vm 可以直接调用

因为获得的姓名的过程可能很复杂 我们把姓名以象形式存下,使用 get 方法,当有人读取fullName 时,就调用 get 方法,把 return 里面的值作为 fullName 的值,我们在 return 里面进行拼接字符串就行了

2.特点

实现了缓存的效果

在 get 所依赖的数据没发生变化时,只会读取第一次的姓名然后缓存起来,不会再读取姓名了

但是如果 get 依赖的数据发生变化了就会重新读取更新 然后存缓存

3.注意

在 data 中的性和名不能直接使用 因为存在于不同的作用域,但是 Vue 默认将 get() 方法里面的 this 指向了 Vue 实例 ,我们就能用 this 调用 data 中的数据了。

fullName 不要看成一个对象 不能 fullName.get() 这样会报错,他的内部会自动调用 get 方法把返回值给 fullName 所以直接调用 fullName 就行

如果要改变 fullName 的值然后分别改变姓和名 就得再使用一个 set 方法 ,改变它所依赖的属性

如下:

  set(value){const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}
4.代码部分
<body><div id="root">性:<input type="text" v-model:value="firstName"> <br>名:<input type="text" v-model:value="lastName"> <br>姓名:<span>{{fullName}}</span></div><script>new Vue({el: '#root',data: {firstName: '张',lastName: '三'},computed:{fullName:{get(){return this.firstName + '-' + this.lastName}}}})</script>
</body>

(四)简写方式

如果只用 getter 的话,只考虑读取不修改,就不用把计算属性写成对象的方式,直接写成函数的形式就行,里面还是 get 方法的写法

调用时它不能看作函数而是一个属性 不能fullName() 直接不加小括号就可以

 computed: {fullName: function () {return this.firstName + '-' + this.lastName}}

 三、监视属性

(一)介绍

监视属性就是监视某一个属性的变化 

语法:

watch:{

  监视对象:{

    hander(){

      监视对象改变时喊的人函数被调用

    }

  }

}

 watch: {isHot: {handler(){}}

(二)天气案例 无监听

1.流程

点击按钮切换天气

也可以不写changeWeather 方法在 methods 中可以直接 在@click  后面写上 isHot = !isHot

绑定事件后面能写一些简单的语句 但是复杂一点点属性最好还是写在 methods 里面

2.代码部分
<body><div id="root"><h2>今天天气预报:{{info}}</h2><button @click="changeWeather">切换天气</button></div><script>new Vue({el: '#root',data: {isHot: true},computed: {info(){return this.isHot ? '炎热' : '凉快'}},methods: {changeWeather() {this.isHot = !this.isHot}}})</script>
</body>

(二)监视

1.设置监视

得用一个对象 watch里面 放全新的配置对象,我们想监视 isHot 属性的变化,就用 handler 函数,当isHot 属性变化时会被调用,我们可以通过里面两个参数拿到变化前后的值

newValue,oldValue 新的值,旧的值

isHot 配置对象除了 handler 函数还有 其它配置

immediate;true 没变化就执行 handler 函数

watch: {isHot: {immediate:true,handler(newValue,oldValue){console.log('isHot被修改了', newValue, oldValue)}}}
2.其它写法

写在 vm 实例外面不明确监视谁就用下面的形式

 vm.$watch('isHot', {immediate: true,handler(newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)}})

 (三)深度监视

vue是能检测到里面任何层级数据的变化的,检测不到 只是对我们程序员使用 watch 来检测检测不到,默认只监测最外层(为了效率),我们能通过修改默认值 deep 就能实现深度监测 

data 中有一个对象类型的数据 如果想要检测里面a,b 的变化从而做出某些反应,不能简单的在watch 里面加上

numbers:{

  handler(){

  }

}

因为 Vue 认为 numbers 是一个整体这样观测到的只是 numbers 属性的地址,对里面的数据不感兴趣,ab发生变化,vue 会认为 numbers 没有发生变化,不会调用 handler 函数

我们可以使用

'numbers.a':{

handler(){}

}

这样的方式来指定检测变化的变量,但是要是想监测里面所有的变量就得写很多,很浪费空间

 data: {numbers: {a: 1,b: 2}},

这时我们就能使用一个属性来轻松解决,检测的对象还是 numbers 但是在里面加上一个属性 

这个属性能实现深度监视,deep:true

就是 deep 默认是关闭的 如果打开就能观测到多层级的数据的变化,

 watch: {numbers: {deep: true,handler() {console.log('number改变了')}}}

(四)监视的简写形式

不需要其它配置项时使用,就可以默认为只有handler 省略名字,直接坚持者写成函数的格式,和计算属性类似,简写不能加其它配置项,deep immediate

 watch: {isHot(newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)}

写在 Vue 实例外面的形式: 

 vm.$watch('isHot', function(){console.log('isHot被修改了',newValue,oldValue)
})

四、计算属性监视属性对比 

(一)案例对比

用计算属性在实现一些功能时更加简短和方便,但是计算属性不能处理异步的操作,比如说延时输出,这时就得用到监视属性,加一个定时器就行,而计算属性依赖返回值 return 输出,不能加定时器。而且定时器使用必须用箭头函数。

下面这段代码无法输出正常结果

     computed: {fullName: function () {setTimeout(() => {return this.firstName + '-' + this.lastName}, 1000)}}

下面代码能延时 1秒 正常输出结果 

 watch: {firstName(now, last) {this.fullName = now + this.lastName},lastName(now, last) {setTimeout(() => {this.fullName = this.firstName + now}, 1000)}}

 (二)总结

计算属性computed 能完成的 监视属性 watch 也能完成

监视属性 watch 能完成的任务 计算属性computed 不一定能完成 : 异步任务 

所有被 Vue 实例所管理的函数最好写成普通函数这样this 才能指向 vm,有利于后来组件实例对象的学习

所有不被 Vue 所管理的函数 定时器的回调函数,ajax 的回调函数 promise 的回调函数 最好写成箭头函数 这样 this 指向的才是 vm 或是实例对象

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

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

相关文章

深入理解GO语言——GC垃圾回收二

文章目录 前言一、Go V1.5的三色并发标记法总结 前言 书接上回&#xff0c;无论怎么优化&#xff0c;Go V1.3都面临这个一个重要问题&#xff0c;就是mark-and-sweep 算法会暂停整个程序 。 Go是如何面对并这个问题的呢&#xff1f;接下来G V1.5版本 就用 三色并发标记法 来优…

WPS快速将插入Excle数据插入Word

前置条件&#xff1a; 一张有标题、数据的excle表格word中的表格与excle表格标题对应或包含电脑已经安装WPS软件 第一步、根据word模板设计excle模板&#xff0c;标头对应 第二步、word上面选【引用】--【邮件】&#xff0c;选打开数据源&#xff0c;找到excle文件&#xff0c;…

论文笔记:Detecting Pretraining Data from Large Language Models

iclr 2024 reviewer评分 5688 1 intro 论文考虑的问题&#xff1a;给定一段文本和对一个黑盒语言模型的访问权限&#xff0c;在不知道其预训练数据的情况下&#xff0c;能否判断该模型是否在这段文本上进行了预训练 这个问题是成员推断攻击(Membership Inference Attacks&…

天星数科聚势赋能,精准服务实体企业的产业金融需求

近年来&#xff0c;供应链金融行业受到国家层面的多项政策鼓励&#xff0c;是我国融资结构改革、金融服务实体经济、服务中小企业的重要抓手。2021年3月政府工作报告中首次提及“创新供应链金融服务模式”&#xff0c;这不仅意味着供应链金融已上升为国家战略&#xff0c;更意味…

npm 命令及其详细解释

npm init 用途&#xff1a;用于初始化一个新的 Node.js 项目&#xff0c;并生成 package.json 文件。详解&#xff1a;该命令会引导您填写项目的基本信息&#xff0c;如项目名称、版本、描述等&#xff0c;并创建 package.json 文件以保存这些信息。 npm install <package&g…

HarmonyOS实战开发-如何实现分布式帐号相关的功能。

介绍 本示例主要展示了分布式帐号相关的功能&#xff0c;使用ohos.account.distributedAccount、ohos.account.osAccount等接口&#xff0c;实现了绑定分布式帐号、解绑分布式帐号、更新分布式帐号信息和管理分布式帐号的功能&#xff1b; 效果预览 使用说明 1.首次进入应用会…

Java整合ElasticSearch8.13

1、引入Jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency> 2、配置ES连接信息 spring:elasticsearch:# 地址uris: http://xxx:9200# 用户…

软件设计师26--关系代数

软件设计师26--关系代数 考点1&#xff1a;关系模式相关概念例题&#xff1a; 考点1&#xff1a;关系模式相关概念 并∪&#xff1a;结果是两张表所有记录的合并&#xff0c;相同记录只显示一次。 交∩&#xff1a;结果是两张表中相同的记录。 差-&#xff1a;S1-S2&#xff0…

Python程序设计 字符类型及其操作

1. 提取身份证号性别 通过身份证的第17位也就是倒数第二位的数字可以辨别该身份证所属人的性别,奇数为男性,偶数为女性。 输入身份证号&#xff0c;第17位若是偶数&#xff0c;输出性别女&#xff0c;否则输出性别男 1.通过input()函数接收用户输入的身份证号&#xff0c;将其…

使用 Selenium 和 OpenCV 识别验证码(使用 Java)

验证码的自动识别对于爬虫来说是一个常见的挑战。在这篇文章中&#xff0c;我们将展示如何使用 Selenium 和 OpenCV&#xff0c;结合 Java&#xff0c;来自动化识别网站上的验证码。 配置 Maven 依赖 首先&#xff0c;我们需要在 Maven 项目中添加 Selenium 和 OpenCV 的依赖。…

代码随想录 day25

文章目录 回溯216.组合总和 |||思路代码 17.电话号码的字母组合思路代码 回溯 216.组合总和 ||| 216.组合总和 ||| 思路 和组合相同,稍微改变了恢复现场和判断结束的方法 代码 class Solution { private:vector<vector<int>> ans;vector<int> temp;int…

MySQL EXISTS 语句和IN语句有啥区别

在 MySQL 中&#xff0c;EXISTS 和 IN 是用于子查询的两种不同方式&#xff0c;它们有一些区别&#xff1a; 1. **IN 语句**&#xff1a; - IN 子句用于在 WHERE 子句中指定多个值&#xff0c;并检查主查询中的某个列是否在子查询返回的结果集中。 - IN 子句适用于子查询…

npm发布包至私有仓库

前提&#xff1a;使用verdaccio在服务器搭建好了私有仓库 1、登录至私服 npm adduser --registryhttp://xxx.xxx.x.xx:48732、发布npm包到私有仓库 修改package.json中的相关信息后 #cd 项目目录 npm publish --registryhttp://xxx.xxx.x.xx:4873登录至私服查看 3、在项目中…

性能分析-CPU知识

目录 CPU知识 cpu组成 查看cpu信息&#xff1a; top命令中 cpu相关&#xff1a; top命令看到系统负载&#xff1a; CPU负载 IO负载 上下文&#xff1a; CPU的寄存器和程序计数器----在cpu的控制器中 实战演示分析 top命令分析 arthas工具 进程上下文切换高的问题分析…

《MATLAB科研绘图与学术图表绘制从入门到精通》

解锁MATLAB科研绘图魅力&#xff0c;让数据可视化成为你的科研利器&#xff01; 1.零基础快速入门&#xff1a;软件操作实战案例图文、代码结合讲解&#xff0c;从入门到精通快速高效。 2.多种科研绘图方法&#xff1a;科研绘图基础变量图形极坐标图形3D图形地理信息可视化等&a…

redis和ElasticSearch和MongoDB应用场景,如何选择

Redis、Elasticsearch和MongoDB是三种不同类型的数据库&#xff0c;它们有各自的应用场景和特点。在选择时&#xff0c;需要考虑以下几个方面&#xff1a; 数据读写模式&#xff1a;Redis是基于内存的键值存储数据库&#xff0c;适用于高速读写场景&#xff0c;如缓存、计数器等…

pdf操作器(图片转文字、PDF转word、PDF拆分、图片jpg、png互转)

pdf操作器&#xff08;不用联网图片转文字、PDF转word、PDF拆分、图片jpg、png互转&#xff09;介绍目前该软件实现了以下功能 pdf转wordpdf拆分图片&#xff0c;图片导出在桌面的一个文件夹里图片合并为pdf压缩、转换图片格式&#xff08;jpg和png&#xff09;OCR图片转文字&…

【计算机网络经典面试题】简述 TCP 三次握手和四次挥手的过程

TCP链接 1.三次挥手2.四次挥手3.拓展说说 TCP 2次握手行不行&#xff1f;为什么要3次 1.三次挥手 1&#xff09;第一次握手&#xff1a;建立连接时&#xff0c;客户端向服务器发送SYN包&#xff08;seqx&#xff09;&#xff0c;请求建立连接&#xff0c;等待确认 2&#xff09…

LeetCode 670. 最大交换

相关思路 把num放到字符数组中&#xff0c;遍历所有交换两个数字的num&#xff0c;并且取出最大值。 相关代码 class Solution {public int maximumSwap(int num) {String s ""num;char a[] s.toCharArray();int maxnum;for(int i0;i<s.length();i){for(int …

C++中的vector与C语言中的数组的区别

C中的vector和C语言中的数组在很多方面都有所不同&#xff0c;以下是它们之间的一些主要区别&#xff1a; 大小可变性&#xff1a; vector是C标准模板库&#xff08;STL&#xff09;提供的动态数组容器&#xff0c;它的大小可以动态增长或减少。这意味着你可以在运行时添加或删…