1. 过渡与动画
1.1 列表过渡
1.1.1 普通列表过渡
tag标签表示渲染的节点是哪个
<transition-group name="list" tag="p">
<p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>
1.1.2 改变列表过渡定位
在列表过渡中,有一个move类,可以改变定位(改变元素一开始的位置)。设置方法有两种(.name-move,move-class="name") 使用_.shuffle()方法
<button @click="shuffle">shuffle</button>
<transition-group name="list" tag="p">
<p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>
shuffle(){
this.items = _.shuffle(this.items)
}
.list-move {
transition: all 1s ease;
}
1.1.3 更复杂一点的列表过渡
结合js钩子的同时还可以使用gsap动画
1.1.4 复用列表过渡
类似子组件
1.1.5 动态过渡
<transition-group :name="names" tag="p">
<p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>
1.2 状态过渡
可以针对以下一些情况
- 数字和运算
- 颜色的显示
- SVG 节点的位置
- 元素的大小和其他的 property
2. 组合式API composition API (重点:将同一个逻辑关注点相关代码收集在一起会更好)
2.1 简介
是接受参数并将其包裹在带有value property的对象中返回,然后使用该property访问或改变响应式变量的值
computed 计算属性也是响应式,但是不可更改,只可读
watch 三个参数(响应式引用/getter函数,回调,可配置选项)
2.2 setup两个参数 (props context)
2.2.1 props:响应式的,需要使用toRefs来解构
获取上下文传递的值,props:[]
setup(props) {
const { title } = toRefs(props)
console.log(title)
}
2.2.2 context 普通的js对象 非响应式
类似this, 只可以访问以下:
- context.attrs
- context.slots
- context.emit
// Attribute (非响应式对象,等同于 $attrs)
console.log(context.attrs)
// 插槽 (非响应式对象,等同于 $slots)
console.log(context.slots)
// 触发事件 (方法,等同于 $emit)
console.log(context.emit)
// 暴露公共 property (函数)
console.log(context.expose)
2.3 生命周期
2.4 provide / inject
import { provide } from 'vue'
setup() {
provide('name', value)
}
import { inject } from 'vue'
const item = inject('name',?'default')
//上述还没有有响应式 不会继承 provide里面的值变了,但是inject不会变
//添加readonly表示只读,不可修改
provide('name', readonly(value))
2.5 模板引用 即在父组件中通过ref获得子组件的值
记住ref的使用方法 (容易忘!!!!!!!)
<div>
<Child ref="child"></Child>
</div>
setup() {
const child = ref(null)
onMounted(() => {
consoloe.log(child.value)
})
return { // 一定不要忘记return
child
}
}
// 1.child.value的值除了在created之前获取不到,其他都可以
// 2.可以多次使用ref,但不要忘记return
2.6 Mixin 混合
2.6.1 基础用法
//在我的组件就可以使用mixin里的所有方法了
const myMixin = {
created() {
this.hello()
},
methods: {
hello() { console.log('hello')}
},
data() {
return {
foo: 'foo'
}
}
}
<template></template>
mixins: ['myMinin']
2.6.2 选项合并
我的组件和mixin中一些属性重复了,
data:使用我的组件
事件钩子:mixin会在我的时间钩子之前执行
methods、components等:合并成同一个对象,如果键名冲突,则是用我的组件里面的
2.7 自定义组件
2.7.1 基础用法
<input v-test></input>
directive('test', {
mouted(el) {
el.focus()
}
})
2.7.2 事件钩子
directive('test', {
// 指令是具有一组生命周期的钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 绑定元素的父组件被挂载时调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 卸载绑定元素的父组件时调用
unmounted() {}
})
三个参数 el,binding,vnode
el: 当前组件
binding:一个对象:
- instance
:使用指令的组件实例。
- value
:传递给指令的值。例如,在 v-my-directive="1 + 1"
中,该值为 2
。
- oldValue
:先前的值,仅在 beforeUpdate
和 updated
中可用。值是否已更改都可用。
- arg
:参数传递给指令 (如果有)。例如在 v-my-directive:foo
中,arg 为 "foo"
。
- modifiers
:包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar
中,修饰符对象为 {foo: true,bar: true}
。
- dir
:一个对象,在注册指令时作为参数传递。
vnode:上面作为 el 参数收到的真实 DOM 元素的蓝图
2.7.3 动态指令参数
<div v-pin:[direction]="200">距{{direction}}距离为200px</div>
app.directive('pin', {
mounted(el, binding) {
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})
data() {
return {
direction: 'right'
}
}
函数简写
mounted和updated触发相同行为
app.directive('pin', {
mounted(el, binding) {
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})
2.8 Teleport
2.8.1 基础用法
没看明白