Vue P17-54

18、计算属性

示例:实现姓名的联动效果

可以用插值语法、method {{func()}} 这里必须有 ()表示返回值

在事件处理中,@click=“func1” 有没有无所谓

computed的计算属性和data中的属性都在vm中,但vm._data里只有后者。

computed里的this是vm,可用this.name读data中的数

没有真正的值,是被已有属性算出来的

get()什么时候被调用?

1、初次读取fullName时; 2、所依赖的数据发生变化时

set不是必须写的,但若要被修改,set中要引起依赖的是数据发生变化

优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

全写:

fullName{

​ get(){}

​ set(){}

}

当只考虑get,不用set时,才能用简写

fullName(){ 但不是函数,使用时{{fullName}}没有()

​ return xxxxx;

}

21、监视属性

vscode插件:vue3 snippets (片段) 作者:hollowtree

模板里不能出现this

@xxxx=“yyy” yyy可以写一些简单的语句

watch:{

​ isHot:{ # key

​ handler(newValue, oldValue){ # 当ishot发生改变时

}

}

}

immediate默认是false,如果是true,即使不变化,初始化也调用

正常属性、计算属性都可监视

监视的两种写法:1、new Vue时传入watch配置 2、通过vm.$watch。

后者vm.$watch(‘ishot’😃 要加引号

当被监视的属性变化时,回调函数自动调用handler

23、深度监视

要求监视 number.a 不要number.b。 只前者变,才回调

’number.a‘ 监视多级结构中某个属性的变化

若监视 number,a变/b变,不会回调,除非换一个新对象 {a=6, b=8}

使用deep=true

1、vue中的watch默认不监测对象内部值得改变,一层

2、配置deep,true可以监测对象内部值改变,多层

PS

1、vue自身可以检测对象内部值的改变,但vue提供的watch默认不可以!

2、使用watch时根据数据的具体结构,决定是否采用深度监视

简写:当配置项只有handler时,

isHot(newValue, oldValue){

}

vm.$watch(isHot,(newValue, oldValue){ 不能用箭头

})

25、watch对比computed

computed依靠返回值,不能异步,如延时

1、computed能完成的功能,watch都可以完成

2、watch能完成的功能,computed不一定能完成,例如,watch可以进行异步操作

PS 1、所被vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象

2、不被vue管理的函数,如定时器的回调函数,ajax的回调函数,promise回调等,最好写成箭头函数,这样this的指向才是vm或组件实例对象

26、绑定class样式

1、字符串写法,适用于:样式的类名不确定,需要动态指定 :class='a'

vm.arr.shift() 移除数组的第一个元素,vm.push

2、数组写法,适用于:要绑定的样式个数不确定,名字也不确定

3、对象写法, :class=classObj,个数确定,名字确定,但要动态决定用不用

27、绑定style样式

font-size ----> fontSize 改为驼峰写法

:style="{fontSize:xxx}",其中xxx是动态值
:style="[a,b]"  其中a,b是样式对象

写对象、数组写法,数组较少用, styleArr:[{},{}]

28、条件渲染

v-show 节点在通过 display=None 控制,未被转移,仅样式被隐藏掉,适用于频率高的

v-if v-else-if v-else 一起使用时,结构不能被打断,适用于频率低的场景,特点:不展示的DOM元素之间被移除

template 特点,不像div一样,只是有个包裹作用,不影响效果,但只能用 v-if

使用 v-if 时,元素可能无法获取到,使用 v-show 一定可以获取到

29、列表渲染

v-for

<ul><li v-for="(p,index) in persons :key="index>{{p.name}}-{{p.age}}<li>
</ul>

可以遍历数组、对象、字符串,或者指定数字(类似于python中的range)

1、默认index作为key,但可能会引发问题:

1.1 若对数据进行:逆序添加、逆序删除等破坏顺序操作;会产生没有必要的真实DOM更新

=>界面效果没有问题,但效率低

1.2 如果结构中还包括输入类的DOM,会产生错误DOM更新

=>界面有问题

基于虚拟DOM对比策略,作用过程:

刚开始:根据数据生成虚拟DOM—>将虚拟DOM转为真实DOM上

更新后:根据新数据生成虚拟DOM—>对比…

找到key为0的数据,文件节点和input标签对比,发现前者不一样,后者一样。直接替换使用。

2、id作为key,最好使用数据的唯一标识作为key,如id,身份证号,手机号等唯一值

31、列表过滤

p.indexof(‘val’) 存在则返回位置索引,不存在返回-1;如果val是空的’ ',结果是0,不是-1

//#endregion 折叠某段代码

可以由computed/watch实现

37、总结vue监视数据

1、vue会监听data中所有层次的数据

2、如何检测对象中的数据?

​ 2.1 通过setter实现监视,且要在new Vue时就传入要监测的数据

​ 2.2 如需给后添加的属性做响应式,请使用如下API:

Vue.set(target, propertyName/index, value)vm.$set(target, propertyName/index, value)

​ 或 this.$set(target, propertyName/index, value)

3、如何检测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:

​ 3.1 调用原生对应的方法对数据进行更新

​ 3.2 重新解析模板,进而更新页面

4、在Vue修改数组中的某个元素一定要用如下方法:

​ 4.1 使用这些API

push 后面进入  
pop 最后删除
shift 第一个删除
unshift 第一个添加
splice 指定位置
sort 排序
reverse 反转

​ 4.2 Vue.set()或vm.$set() 特别注意,不能给vm或vm的根数据对象添加属性

vm.set(vm.student, ‘age’, 15)

38、收集表单数据

<input type="text"/>,则v-model收集的是value值,用户输入的就是value值

<input type="ratio"/>,则v-model收集的是value值,且要给标签配置value值

<input type="checkbox"/>,则:

1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)

2、配置input的value属性

​ (1)v-model 的初始值是非数组,那么也是布尔值

​ (2)v-model 的初始值是数组,那么收集的就是value组成的数组

备注:v-model三大修饰符:

lazy 失去焦点后再收集数据

number 输入字符串转为有效的数字

trim 输入首位空格过滤

39、过滤器

比如:时间格式化。

定义:对要显示的数据进行特定格式化后再显示,适用于一些简单逻辑的处理

语法:1、注册过滤器 Vue.filter(name,callback)全局 或 new Vue({filters:{}})局部

2、使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名"单向绑定,双向绑定v-model不可以

备注:1、过滤器也可以接收额外参数,多个过滤器也可以串联,“value | filter1 | filter2” filter2不会直接处理value,而是处理filter1处理后的值

2、并没有改变原本的数据,是产生新的对应数据

40、v-text

内置指令,作用:向其所在的节点中渲染文本内容

与插值语法的区别是:v-text会替换掉节点中的内容,{{xxx}}则不会

v-on 事件监听

41、v-html

可以识别html结构,但有安全性问题,比如说cookie泄露

42、v-cloak

没有值。

1、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性

2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

43、v-once

初次渲染后,就视为静态内容了。以后数据的改变,不会引起v-once结构的更新

44、v-pre

跳过其所在节点的编译过程,加快编译

47、自定义指令总结:

一、定义语法

1、局部指令

new Vue({ directives(指令名,配置对象)}) 或 new Vue({ directives(指令名,回调函数)})

回调函数里面的参数是 (element, bindings)

2、全局指令

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常见的3个回调

1、bind 指令与元素成功绑定时调用

2、inserted 指令所在元素被插入页面时调用

3、update 指令所在模板结构被重新解析时调用

三、备注

1、指令定义时不加v-,但在使用时要加v-

2、指令名如果是多个单词,要使用kebab-case命名,不要用kebabCase命令

52、生命周期总结

8个钩子函数

语句后加debugger; 进行调试

1、beforeCreated 无法通过vm访问data中的数据。

2、初始化数据监测,数据代理。created可以通过vm访问data中的数据。

3、beforeMount页面呈现的是未编译的DOM。

解析模板,生成虚拟DOM(内存中),但页面还不能显示解析好的数据

4、**重要关键。**mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等初始化操作。

对DOM的操作有效,但尽可能避免,不要背叛,好不容易加载好了。

mounted,挂载,只第一次,之后页面再更新就是update了。

类似于检查身体的各项指标。页面显示经vue编译后的结果。

虚拟DOM转为真实DOM。

5、beforeUpdate

6、updated

7、**重要关键。**beforeDestroy:清楚定时器,解绑自定义事件,取消订阅消息等收尾工作

使用vm.$destroy完全销毁一个实例,清理它与其他实例的连接,解绑它的全部指令及事件监听器(自定义事件)

像已经和DOM绑定的事件,如@click之类,无法销毁。

类似于交代后事。

eg.消除定时器。clearInterval(this.timer) vm的数据可变,但页面不会再更新了

8、destroyed。

关于销毁Vue实例:

1、销毁后借助Vue开发者工具看不到任何信息

2、销毁后自定义事件会失效,但原生DOM事件依然有效

3、一般不会在beforeDestroy中操作数据,因为即便操作数据,也不会再出发更新流程了

54、组件介绍

vue使用组件的三大步骤:

一、定义组件,创建组件

使用Vue.extend(options)创建,其中options和new Vue(options)传入的几乎一样,区别如下:

1、el不要写。因为最终的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

2、data必须写成函数,避免组件被复用时,数据存在应用关系。

备注:使用template可以配置组件结构,但是不能作为根标签,根元素

二、注册组件

1、局部注册,new Vue时,传入components选项

2、全局注册,靠Vue.component(‘组件名’,组件)

三、使用组件,写组件标签

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

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

相关文章

一文让你彻底搞懂什么是VR、AR、AV、MR

随着科技的飞速发展&#xff0c;现实世界与虚拟世界的界限变得越来越模糊。各种与现实增强相关的技术如雨后春笋般涌现&#xff0c;令人眼花缭乱。本文将为你详细解读四种常见的现实增强技术&#xff1a;虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff0…

【windows】字体安装手册

windows字体安装手册 1 下载字体文件 百度搜索XXX字体ttf文件进行下载 附&#xff1a;宋体gb2312下载地址&#xff1a; https://www.downza.cn/soft/7780.html 2 字体安装 1.搜索字体 2.将下载的ttf文件拖拽添加 3.关闭办公软件重新打开后&#xff0c;outlook、word、…

Windows安装MySQL(8.0.37)

安装&#xff1a;https://blog.csdn.net/XLBYYDS/article/details/139711682 注意点&#xff1a; &#xff08;1&#xff09;必须安装到C盘系统盘&#xff0c;否则执行 net start mysql 启动服务时&#xff0c;可能会启动失败。 &#xff08;2&#xff09;如果安装时出现 The…

开源模型应用落地-音乐生成模型-openai/jukebox深度使用-AIGC应用探索(八)

一、前言 学习音乐生成模型具有极其重要的价值。通过对音乐生成模型的深入学习,我们能够探索到音乐创作的全新边界和可能性。它不仅可以开启一扇通往无限音乐创意的大门,让我们领略到科技与艺术完美融合所带来的震撼与惊喜,还能帮助我们在音乐领域实现前所未有的突破和创新。…

Windows环境下使用VisualGDB进行Linux项目开发

1.新建项目-打开文件下的新建项目菜单 2.工程项目类型配置 3.Linux机器选择设置 4.设置代码位置 5.编译选项设置 6.调试环境设置

数据结构【二叉树】

前言 我们在前面学习了使用数组来实现二叉树&#xff0c;但是数组实现二叉树仅适用于完全二叉树&#xff08;非完全二叉树会有空间浪费&#xff09;&#xff0c;所以我们本章讲解的是链式二叉树&#xff0c;但由于学习二叉树的操作需要有一颗树&#xff0c;才能学习相关的基本…

linux——VScode安装

方法一&#xff1a;使用snap一键安装 Snap Store 是 Ubuntu、Debian、Fedora 和其他几个 Linux 发行版中的一个应用商店&#xff0c;提供了数千个应用程序和工具的安装。Snap Store 使用 Snap 包格式&#xff0c;这是一种通用的 Linux 软件包格式&#xff0c;使得在不同的 Lin…

20240620日志:TAS-MRAM的电阻开放分析

TAS-MRAM的电阻开放缺陷分析 1 MRAM介绍开放电阻的缺陷 1 MRAM介绍 MRAM(Magnetic random access memory)&#xff0c;磁随机存储器&#xff0c;利用磁性材料的状态来存储数据。MRAM的存储单元通常由一个磁隧道结&#xff08; M T J 茅台酒 MTJ^{茅台酒} MTJ茅台酒&#xff0c…

解决Qt中 -lGL无法找到的问题

在使用Qt Creator创建并编译新项目时&#xff0c;可能会遇到以下错误&#xff1a; /usr/bin/ld: cannot find -lGL collect2: error: ld returned 1 exit status make: *** [untitled1] Error 1 18:07:41: The process "/usr/bin/make" exited with code 2. Error w…

【大模型驯化-Prompt】企业级大模型Prompt调试技巧与batch批量调用方法

【大模型驯化-Prompt】企业级大模型Prompt调试技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的博客个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档关注&#x…

Nginx后端超时504重复请求

在一次业务中客户端请求osb平台再经过nginx转发后端&#xff0c;开发反馈请求次数大于1导致问题&#xff0c;经排查客户端请求一次&#xff0c;osb平台设置超时为30s&#xff0c;nginx配置等待上游服务器响应时最多等待30秒 部分配置文件 upstream xx {server 10.6.6.1:8080 w…

舒适佩戴,享受沉浸式音乐体验,西圣AVA2耳机体验

平时不管是听音乐&#xff0c;还是打电话&#xff0c;戴上一副耳机都可以让我们获得更好的隐私性&#xff0c;并且在公共场所&#xff0c;比如办公室、车厢里&#xff0c;也可以获得属于自己的空间。现在市面上耳机的选择非常多&#xff0c;音质、续航和佩戴的舒适度是我们选择…

接口自动化测试实战:测试用例也能自动生成

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 作为测试&#xff0c;你可能会对以下场景感到似曾相识&#xff1a;开发改好的 BUG 反复横跳&…

智慧园区数字化能源云平台的多元化应用场景,您知道哪些?

智慧园区数字化能源云平台的多元化应用场景&#xff0c;您知道哪些&#xff1f; 智慧园区数字化能源云平台&#xff0c;作为新一代信息技术与传统能源管理深度融合的典范&#xff0c;正引领着产业园区向智慧化、绿色化转型的浪潮。该平台依托于大数据、云计算及人工智能等前沿…

跨境多账号需知:指纹浏览器需要用独立IP吗?

指纹浏览器也成为反检测浏览器&#xff0c;旨在安全管理多个账户。在跨境多账号中&#xff0c;多个账号容易引发网站怀疑并最终导致大量账户被暂停&#xff0c;使用反检测浏览器的主要目的是通过创建新的浏览器指纹来隐藏用户的真实浏览器指纹。 但浏览器指纹并不是网站关注的唯…

解决Few-shot问题的两大方法:元学习与微调

基于元学习&#xff08;Meta-Learning&#xff09;的方法&#xff1a; Few-shot问题或称为Few-shot学习是希望能通过少量的标注数据实现对图像的分类&#xff0c;是元学习(Meta-Learning)的一种。 Few-shot学习&#xff0c;不是为了学习、识别训练集上的数据&#xff0c;泛化…

生成视频 zeroscope_v2_576w 学习笔记

目录 生成视频代码&#xff1a; 维度报错&#xff1a; 解决方法&#xff0c;修改代码&#xff1a; 已开源&#xff1a; 视频生成模型 Zeroscope开源 免费无水印 视频生成模型 Zeroscope_v2_576w 开源 - 腾讯云开发者社区-腾讯云 生成视频代码&#xff1a; import torch fro…

Java中将文件转换为Base64编码的字节码

在Java中&#xff0c;将文件转换为Base64编码的字节码通常涉及以下步骤&#xff1a; 读取文件内容到字节数组。使用java.util.Base64类对字节数组进行编码。 下面是一个简单的Java示例代码&#xff0c;演示如何实现这个过程&#xff1a; import java.io.File; import java.io…

Ascend C Add算子样例代码详解

核函数定义 核函数&#xff08;Kernel Function&#xff09;是Ascend C算子设备侧实现的入口。在核函数中&#xff0c;需要为在一个核上执行的代码规定要进行的数据访问和计算操作&#xff0c;当核函数被调用时&#xff0c;多个核都执行相同的核函数代码&#xff0c;具有相同的…

Linux系统上安装Miniconda并安装特定版本的Python

要在Linux系统上安装Miniconda并安装特定版本的Python&#xff08;例如3.10.12&#xff09;&#xff0c;请按照以下步骤进行操作&#xff1a; 1. 下载并安装Miniconda 下载Miniconda安装脚本&#xff1a; 使用wget或curl下载Miniconda安装脚本。以下是使用wget的命令&#xff…