Vue12345

Vue3

通信

props方法通信

使用到defineProps方法去接受父组件传递过来的数据，defineProps是Vue3提供方法,不需要引入直接使用。 prips传递的数据是只读的 不可以修改。

vue3常用函数

自定义事件

在vue3中，若父子组件有同名事件，该事件无论放在标签上海事组件标签上（Event1），都是原生DOM事件

vue3中的setup方法中取消了this对象，可以用defineEmits方法返回函数触发自定义事件

setup

reactive()

ref（）

推荐声明数据统一用ref

watch（）

生命周期

父传子

子传父

路由初始化

Vue2

创建渲染

插值表达式

Vue指令

带有V-前缀的特殊标签属性

v-html

v-if和v-show

差别和使用场景

v-else和v-else if

用于辅助v-if进行判断渲染,需要紧挨着v-if使用

v-on

v-on: 等价于@

methods中的函数调用data中的数据要加上this

v-on调用传参

v-bind

v-bind:等价于:

v-for

对数组进行删除操作，可以

使用 splice() 方法

splice() 方法可以删除数组中的一个或多个元素，并返回被删除的元素。

array.splice(start, deleteCount, item1, item2, ...)

参数说明：

• start：要删除元素的起始索引位置。
• deleteCount：要删除的元素数量。
• item1, item2, ...：可选参数，要添加到数组的新元素。

也可以使用filter（）方法，filter() 方法可以创建一个新的数组，其中包含满足条件的元素。

// 定义一个数组
let arr = [1, 2, 3, 4, 5];
// 删除值为 3 的元素
arr = arr.filter(item => item !== 3);
console.log(arr); // [1, 2, 4, 5]

总的来说，使用 splice() 方法可以在原始数组上直接操作，比较方便，但会改变原始数组。而使用 filter() 方法可以创建一个新的数组，保留满足条件的元素，但需要将新数组赋值给原始数组才能达到删除的效果。选择哪一种方法取决于具体的需求和场景。

v-model

指令修饰符

v-bind动态渲染class

v-bind动态操作style

style与class相比，class是对一系列属性的统一操作，style可以实现对某个属性的单独操作。

v-model应用于其他表单元素

计算属性computed

computer与methods对比

修改计算属性的值

第16行用了计算属性的get方法，将函数的返回值当做属性使用。

第20行用“newName”修改了计算属性showName的值，触发了set方法，set方法再去修改上面的name。

watch监听器

调用接口，发送get请求，设置延时器，按延时器id清除延时器。大致写法

深度监视

参数deep（监听复杂对象的所有属性）和immediate（初始化时就执行一次）控制监听器。

day2小结

数组arr.every(item=>??)判断数组中的每个元素是否均满足某条件，逻辑与。

this.fruitList.every(item=>item.isChecked);

删除数组某元素可以用filter（）或者splice（），对字符串截取可以用substr（）

在标签中想用data中的数据now动态改变渲染效果width，写法如下。

<div class="inner" :style="{width:now}">

 src动态绑定对象属性 要加“ ”

<div class="td"><img :src="item.icon"  alt="" /></div>

Vue的生命周期

钩子函数

main.js

render

组件化开发&根组件

局部注册

在某个组件（.vue文件）中注册.

import导入，components中注册，在template中当标签使用。

全局注册

在main.js中注册

import导入，Vue.component注册，当做标签使用。

组件三大部分

scoped

 data函数

组件通信

父子通信

props父传子流程

子传父

$emit，子组件触发父组件的函数事件，并传递形参，父组件的函数接受实参。

子组件点击事件绑定函数changeFn，函数changeFn执行this.$emit('函数名A','传递的参数')，父组件在Son标签中用@函数名A监听子组件是否传递调用信息，若被调用，则执行HandleTitle方法，该方法在父组件的methods中实现。

prop

props类型校验

写在子类的props中，变量名：类型。

props深度校验

类型，是否必填，默认值，自定义校验逻辑

props和data对比

谁的数据谁负责

非父子通信

引入Vue来实现

provide&inject

provide中提供的数据，若是普通类型则是非响应式的，复杂类型是响应式的。

v-model原理

$event用于在模板中，获取事件的形参。

v-model用于父子组件数据双向绑定

v-model的原理是v-bind和@绑定事件修改data中的值，而在子组件中无法直接修改父组件中的值，所以v-model无法直接使用。

可以通过v-bind绑定父组件数据，再监听事件，调用$emit让父组件进行修改，从而实现v-model的效果，使得父子组件数据双向绑定。

也可以在父组件引用子组件标签时直接用v-model绑定数据

.sync修饰符实现双向绑定

ref和$refs

$nextTick

this.isShowEdit执行后 先执行了this.$refs.inp.focus获取了焦点，然后才渲染编辑框，所以此时this.$refs.inp是undefined，而$nextTick可以解决异步更新问题.

自定义指令

指令的值

v-loading

插槽

默认插槽

让组件内部一些结构支持自定义

父组件中引用子组件的标签，标签内部的内容会填充到子组件slot标签位置

slot标签内写好的内容作为默认内容，父组件不进行填充时就展示默认内容。

具名插槽

当组件内有多处不确定的结构，给多个slot用name区分，父组件填充插槽的时候根据name来填充

v-slot:等价于#

不只可以填充文本，也可以填充按钮，输入框等组件。

作用域插槽

数据的传递和接收

父传子用props，子传父部分场景可以用slot传递（比如传递id进行查找删除）

路由

view跟component目录区别

router-link

在src下新建index.js文件来统一管理路由。

@绝对路径可以代替src

声明式导航-跳转传参

查询参数传参

如果在created中，想要获取路由参数，需要用this.$route.query.参数名 获取

动态路由传参

：words可以动态接收路由后的参数heima或者study。

$route.params.words

Vue路由重定向

Vue路由404

Vue模式设置

Vue基本跳转

path跳转

name跳转

跳转传参

path路径跳转query传参写法

模板字符串 `${}`，动态内容需要${}来绑定

path路径跳转动态路由传参写法

name跳转，qurey传参（key：value）

name跳转，动态路由传参（params  words：？）

二级路由配置

在一级路由配置中配置子路由，即二级路由。同时要在一级路由界面中配置二级路由出口，用<router-view>

组件缓存keep-alive

一但组件被keepalive包裹，则不会销毁，所以无法再次触发created和mounted等钩子，所以提供了actived和deactived钩子来代替

配路由小结

Vuex

创建仓库时提供方法来对仓库中的数据进行操作，组件若想改变数据则向仓库调用方法。

mutations传参

mapMutations

actions

mapActions

getters

模块module

与index.js平级创建文件夹modules，里面放置各种子模块.js，然后在index.js中import各个子模块，使得index.js中数据量减少，方便维护。

模块中访问getters

模块中访问mutation

action同理

购物车项目

api接口模块设计

添加loading

模板引用

ref绑定

跨层传递数据

父组件传递函数

子组件接收并调用

defineOptions（）

vmodel

Pinia