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绑定
跨层传递数据
父组件传递函数
子组件接收并调用