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('组件名',组件)

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

相关推荐
张张张31213 分钟前
4.2学习总结 Java:list系列集合
java·学习
KATA~16 分钟前
解决MyBatis-Plus枚举映射错误:No enum constant问题
java·数据库·mybatis
xyliiiiiL31 分钟前
一文总结常见项目排查
java·服务器·数据库
shaoing33 分钟前
MySQL 错误 报错:Table ‘performance_schema.session_variables’ Doesn’t Exist
java·开发语言·数据库
腥臭腐朽的日子熠熠生辉1 小时前
解决maven失效问题(现象:maven中只有jdk的工具包,没有springboot的包)
java·spring boot·maven
ejinxian1 小时前
Spring AI Alibaba 快速开发生成式 Java AI 应用
java·人工智能·spring
杉之1 小时前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring
俏布斯2 小时前
算法日常记录
java·算法·leetcode
27669582922 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿