Vue笔记

最新推荐文章于 2024-04-16 19:44:59 发布

许久'

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量2.6k

点赞数 1

文章标签： vue.js 前端 javascript

许久

本文链接：https://blog.csdn.net/qq_45246098/article/details/124861531

版权

vue控制台消除两个小提示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2OMGER5-1652938984273)(D:\typora\image-20220406114932948.png)]$

1.安装vue开发者工具即可消除
2.提示我们正在使用一个开发者的vue版本开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本
添加 Vue.config.productionTip = false 即可消除

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WU1zJR5O-1652938984277)(D:\typora\image-20220406115213583.png)]$

事件绑定@click传参问题

默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的

可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“showInfo($event,66)”

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ds0zfS3y-1652938984278)(D:\typora\image-20220327113622087.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f32aqXh4-1652938984279)(D:\typora\image-20220327115631900.png)]$

v-bind 属性绑定

标签中属性加 v-bind: 进行属性动态绑定 age的值是双引号里面运行的表达式的值 而不是字符串

不加 v-bind: age的值是双引号里面的字符串

上面age值的是数值19

下面是字符串 18+1

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81KSsnaa-1652938984280)(D:\typora\image-20220409113633233.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzKqiICO-1652938984281)(D:\typora\image-20220409113646851.png)]$

Vue中data函数两种写法

vue3中只支持函数式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zC18q8I-1652938984282)(D:\typora\image-20220327113855533.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TuB6iDVn-1652938984283)(D:\typora\image-20220327113858660.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kDPxKnmb-1652938984283)(D:\typora\image-20220327114556720.png)]$

由Vue管理的函数如果用箭头函数写 this指的不再是vue实例而是window

箭头函数中this指代是window

ng)

事件修饰符

在这里插入图片描述

prevent

添加后点击<a>标签不再跳转只执行showInfo事件函数
stop

添加后点击<button>标签不再触发两次showInfo事件只执行里面的事件
once

添加后点击<button> 标签只触发一次再点击无反应

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4jcubOA-1652938984287)(D:\typora\image-20220402150015065.png)]$
capture

在div1中添加capture后点击标签先执行div1的事件再执行div2的事件

事件捕获顺序：由外到内 div1 --> div2

事件冒泡顺序：由内到外 div2 --> div1

嵌套的div执行顺序为：先事件捕获后事件冒泡

由于正常事件在冒泡阶段触发所以正常先执行div2 再div1 结果为 2 1

在div1中添加capture后点击标签在捕获阶段中就执行div1的事件再执行div2的事件结果为1 2

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YUkLDTQI-1652938984287)(D:\typora\image-20220402150337473.png)]$

键盘事件

在按下指定按键后才触发事件反应
自定义按键（vue3被禁止）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqBHb1Fk-1652938984287)(D:\typora\image-20220402155358579.png)]$

按下回车键才触发showInfo事件 keyup 按键抬起后触发

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEOCpVRd-1652938984288)(D:\typora\image-20220402154742560.png)]$

e.key 按键名称 enter control(ctrl)

e.keyCode 按键编码 13 17

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnX3SkYf-1652938984288)(D:\typora\image-20220402160125875.png)]$

插值语法调用函数

在这里插入图片描述 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XY0kOGCK-1652938984290)(D:\typora\image-20220402161632620.png)]$

watch监事属性

监听属性（data中的 computed计算属性中的）发生变化时调用监听函数中的handler回调函数

1.可以添加参数 newValue oldValue 2.添加配置 immediate:ture 初始化时就调用

在这里插入图片描述

deep 开启深度监视：监视data属性中某一个属性的子属性是否变化

只监听某一个子属性用 ‘属性名.子属性名’ 方式

监听任意子属性变化用deep:true

在这里插入图片描述

简写方式

watch和computed区别

watch可以执行异步操作例如延时1s执行某个函数 computed做不到是同步的

在这里插入图片描述

v-if和v-show

v-if 切换频率低时使用控制DOM是否有节点 false时不渲染

v-show 切换频率高时使用控制DOM的style:"display:none"的值任何情况必渲染

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jkQcGtql-1652938984294)(D:\typora\image-20220405194119074.png)]$

template 只能搭配v-if 使用 v-show不行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxLuLwTm-1652938984295)(D:\typora\image-20220405194047741.png)]$

v-for遍历key值原理

v-for遍历时看情况要添加唯一的key值如不添加vue默认添加 ;key=“index”

key值为index时在操作遍历列表数据时可能出现界面错乱遍历效率低情况如果数据仅展示可不添加

key值应为唯一值如id 身份证号学号等

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lrXgBgFC-1652938984296)(D:\typora\image-20220405213331986.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-poDIK1Zz-1652938984296)(D:\typora\image-20220405213552412.png)]$
在这里插入图片描述

key值为index 页面有输入框在数据最前面添加新数据时页面错乱原理

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xauEQOHA-1652938984297)(D:\typora\image-20220405213501040.png)]$
key值为id 页面有输入框在数据最前面添加新数据时页面正常原理

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOkz8hVS-1652938984297)(D:\typora\image-20220405213424892.png)]$

Vue中修改或添加数组的某个元素

必须使用 push pop shift unshift splice sort reverse 方法

或者 Vue.set(对象，属性名，值 vm.$set(对象，属性名，值)

直接使用索引修改的话 Vue不会做响应式处理（页面不会渲染）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zD93jMYE-1652938984298)(D:\typora\image-20220406171415037.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2k7tfyMb-1652938984298)(D:\typora\image-20220406171343555.png)]$

js中数组操作

操作会影响原数组的：

push 末尾添加 splice 替换元素 splice(0,1,“喝酒”) （开始索引，替换元素个数，替换元素）

pop 末尾删除 sort 排序

shift 首位删除 reverse 翻转

unshift 首位添加

不会影响原数组(返回新数组):

filter 过滤

.filter 数组过滤: return 需要满足的条件返回一个新的数组

indexOf: 是否包含指定字符串不包含返回-1 包含返回所在索引值空字符串返回 0

在这里插入图片描述

.unshift: 在数组最前面添加元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TqaumBId-1652938984300)(D:\typora\image-20220406113916102.png)]$

.push: 在数组后面添加元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oX2V49DL-1652938984301)(D:\typora\image-20220406114214833.png)]$

Math.floor: 向下取整

Math.random(): 生成随机数 [0,1)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HcvgTYp-1652938984301)(D:\typora\image-20220406114358795.png)]$

.sort: 数组排序 a.b 为数组中两个元素进行比较

a-b: 升序

b-a: 降序

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kf52npG-1652938984302)(D:\typora\image-20220406122001344.png)]$

给对象中添加属性（做响应式处理）

Vue对象中后添加的属性默认不做响应式处理（添加数据后数据更新页面不刷新）

使用： Vue.set(对象，属性名，值) this.$set(对象，属性名，值)

这样后添加的属性具有响应式（getter 和 setter)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2VaS2Qh-1652938984302)(D:\typora\image-20220406165346382.png)]$

给对象中修改属性

修改对象的已有属性可以直接修改（先添加的属性Vue已经进行了响应式处理）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h92S64Cd-1652938984303)(D:\typora\image-20220406170259441.png)]$

reduce数组统计函数

.reduce( (pre,current)=>{ } , )

可以用来统计数组中做了某事的数量货币大于100的数量等

下面的用来统计 todos 数组中 done值为true的对象的数量

第一个参数条件函数第二个参数统计初始值

(pre,current)=>{ } 这个函数调用的次数为数组的长度

pre 上一次调用的返回值

current 当前值数组的当前元素值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSscoujp-1652938984304)(D:\typora\image-20220410175929589.png)]$

v-model表单

radio 单选框的一定要添加value值

checkbox 复选框的添加value值对应的属性为数组（添加checked 默认选择项)

v-mode绑定的值不能是props传的值因为props是不可以修改的

在这里插入图片描述

filters过滤器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPoWudDC-1652938984307)(D:\typora\image-20220410132200102.png)]$

使用时通过管道符号 | 加过滤器名即可调用（可以同时执行多个过滤器）

调用时会自动将time 值传入（默认）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QKvi9YNe-1652938984307)(D:\typora\image-20220410125906046.png)]$

过滤器传参可以有两个参数第一个默认为前面的time值（调用时可以不写）

第二个为主动传值如果调用时没有传第二个值第二个值默认为str的值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tq71kTah-1652938984307)(D:\typora\image-20220410131047555.png)]$

过滤器会生成新的数据不会改变原数据

要用新的对象接收

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnsLQ6DE-1652938984308)(D:\typora\image-20220410125023594.png)]$

全局过滤器

定义一个名为 mySlice 的全局过滤器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M7IwlxCd-1652938984308)(D:\typora\image-20220406182903351.png)]$

循环定时器

setInterval(()=>{ 操作 },1000) 设置定时器操作及时间间隔

clearInterval(定时器名) 销毁定时器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P27JMXnq-1652938984309)(D:\typora\image-20220407132222579.png)]$

生命周期

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhbCW3jW-1652938984309)(D:\typora\image-20220407131709297.png)]$
在这里插入图片描述

非单文件组件（不是.vue结尾的文件）

使用Vue.extend({ }) 创建组件

里面通过templatel来编写html结构只能有一个根节点（用一个div包裹全部html）

数据部分用date函数式编写 data(){ } (防止数据连带)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f9ZTimxK-1652938984311)(D:\typora\image-20220407140121438.png)]$

可以简写省略 Vue.extend({ }) （在Vue脚手架中）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XS7Ow33c-1652938984311)(D:\typora\image-20220407152512721.png)]$

在Vue实例中用components:{ } 注册组件（局部注册)

1.Vue实例中的组件名：引入组件名

2.直接使用相同组件名

在这里插入图片描述

Vue.component(‘实例中组件名’,引入组件名) 全局组件注册

全局组件可以在不同Vue实例中使用（不用在不同Vue实例中再去分别注册）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEhFkQRB-1652938984312)(D:\typora\image-20220407141511908.png)]$

直接用组件名做标签 使用组件 (局部组件，全局组件同理)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QxH2DIzY-1652938984313)(D:\typora\image-20220407141107435.png)]$

组件名设置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvW8LHA2-1652938984313)(D:\typora\image-20220407150406616.png)]$

Vue实例中的组件名等于引用组件名可以直接写

一个单词首字母小写school

Vue开发者工具中显示为首字母大写

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWQLizAz-1652938984314)(D:\typora\image-20220407150826730.png)] => [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmtOLaSM-1652938984314)(D:\typora\image-20220407150845104.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLVXCljp-1652938984315)(D:\typora\image-20220407151003896.png)]$

一个单词首字母大写School

Vue开发者工具中显示为首字母大写

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ez81WSOf-1652938984316)(D:\typora\image-20220407150657182.png)]$

多个单词用 - 分隔 my-school 同时必须用 ‘’ 标记

多个单词首字母全大写必须在脚手架中才可用使用

最低0.47元/天解锁文章

许久'

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记

vue控制台消除两个小提示1.安装vue开发者工具即可消除2.提示我们正在使用一个开发者的vue版本开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本添加 Vue.config.productionTip = false 即可消除事件绑定@click传参问题默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“
复制链接

扫一扫