1 <script setup>语法糖
语法糖写法不需要return
<template>
<button @click="add">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
export default {
setup() {
let count = ref(1)
let add = () => {
count.value++
}
},
}
</script>
开启setup语法糖,需要在script标签上添加setup属性,Vue3中核心js代码基本都组织在了setup函数中,通过return对象的形式将数据和方法暴露给模板来使用,当业务足够庞大时,这种形式显得过于臃肿,在最新的Vue版本中,提出了一种全新的setup写法,让代码更加简洁了。
1 响应式数据
在<script>标签中定义的数据不必通过返回值的形式暴露,所有定义的数据会默认暴露给模板
<template>
<button @click="count++">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
2 使用组件
setup语法糖相当于彻底抛弃了配置选项,使用组件不必注册,只要引入,可以在模板中直接使用。
<template>
<MyComponent />
</template>
<script setup>
import MyComponent from './MyComponent.vue'
</script>
3 使用props和自定义事件
在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits,注意,这2个方法不必从vue中引入可以直接使用。
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>
setup语法糖中还有一些其他地方的改变,但上面这3点是最常见的,必须完全理解,在后面的课程中也推荐使用这种语法来书写代码。
4 自定义指令
<template>
<div>
<p v-red>这是一个段落</p>
<p v-color="'blue'">这是一个段落</p>
</div>
</template>
<script setup>
import {ref} from 'vue'
const vRed = {
mounted(el) {
el.style.color = 'red'
},
}
const vColor = {
mounted(el,bildings) {
// mounted为添加到生命周期中再执行,可以防止出错
// el是形参,代表本元素
// bildings是绑定的意思,形参,代表了后面字符串写的内容
el.style.color = bildings.value
},
}
</script>
使用v-color可以直接行内改变颜色
自定义v-red,并在script setup中定义自定义指令const vRed,即可改变颜色
5 如何传递props和触发自定义事件
在父组件中定义自定义信息,并通过父组件中的子组件引入标签传递给子组件
在子组件的setup语法糖中,通过一个全局的宏(可以理解为一个特殊的函数)defineProps拿到父组件中转递过来的props
6 如何传递和触发自定义事件的方法
通过全局宏defineEmits来传递和触发自定义事件
记得在package中npm 一个scss(npm i sass -d
如果想在视图模板中触发自定义事件,可以直接$emit
但是如果需要再setup中调用,就必须用全局宏调用
2.新增内置组件
1 fragment
在Vue2中,每个template模板里的内容必须包裹在一个根标签中,但是这样做可能会增加一层无效的结构,Vue3中不需要只写一个唯一的根元素。
它提供了一个新的虚拟组件fragment来解决问题,以后可以不必为模板中的内容包裹一个根元素,Vue会自动帮我们把它包在一个fragment当中。
<template>
<h1>标题1</h1>
<h2>标题2</h2>
</template>
2 teleport
Vue的核心在于组件,视图和逻辑密不可分共同完成组件的功能,但有的时候,我们希望视图和逻辑又能够分开,teleport组件帮我们实现了这个期望,下面用一个实例来说明:
在项目中,需要添加一个全屏的遮罩层,为了更好地布局样式,这种结构放到body的下一个层级是最方便的,但是控制这个遮罩层显示/隐藏的按钮放在了一个层级很深的组件中。这种需求按照我们之前学习的知识其实也很好做,可以将遮罩层单独做一个组件,按钮触发自定义事件来传递数据,但这么做仍然有点麻烦,teleport可以让我们仍然将遮罩层和按钮写成一个组件,但最终渲染的结构却是遮罩层通过to属性被"传送"到了body中。
//根组件
<template>
<h1>父组件中的标题1</h1>
<div>
<h2>父组件中的标题2</h2>
<Chide />
</div>
</template>
<script setup lang="ts">
import Chide from './components/Chide.vue'
</script>
<style></style>
//模态框组件
<template>
<button @click="isshow = true">open</button>
<teleport to="body"> //to 属性表示传送到哪里去
<div v-if="isshow" class="modal">
<div>
I'm a teleported modal! (My parent is "body")
<button @click="isshow = false">Close</button>
</div>
</div>
</teleport>
</template>
<script setup>
import { ref } from 'vue'
const isshow = ref(false)
</script>
<style scoped>
.modal {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
width: 300px;
height: 300px;
padding: 5px;
}
</style>
teleport组件可以实现视图和逻辑的分离,在某些场景下比复杂的组件通信要更加灵活。
还有一些内置组件例如<suspense>还处在实验性阶段,所以这里不做过多说明。
3.全局API的改变
在Vue2中,我们可以通过全局的Vue来调用一些方法,例如Vue.component可以注册全局组件,Vue.nextTick可以立刻更新视图,在Vue3中,已经不存在Vue这个全局对象了,所有的Vue.xxx全局方法都改成了应用实例方法。
2.x 全局 API(Vue) | 3.x 应用实例 API (app) |
Vue.config.xxxx | app.config.xxxx |
Vue.config.productionTip | 移除 |
Vue.component | app.component |
Vue.directive | app.directive |
Vue.mixin | app.mixin |
Vue.use | app.use |
Vue.prototype | app.config.globalProperties |
还有其他更多可以查阅官方文档。
在Vue3中,我们基本不会再使用this,所以之前Vue2经常使用的实例方法都采用了其他的方式来实现。
4.其他更新
在vue3中还有其他很多细节更新,这些更新的使用场景比较少见,或许当你偶然遇到了回过头来查阅文档是记住这些细节的更好办法。
这里列举一些,更多可以查阅官方文档。
- 移除过滤器(filter)过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。
- 移除.native事件修饰符
- 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes
- 用于自定义组件时,v-model prop 和事件默认名称已更改。
5.动画和过渡
常见动画,分为css动画和js动画。
css动画是由样式决定的,js动画是由计时器决定的。
css动画也分为两种,过渡transion,与动画animation
在Vue中,你可以按照之前CSS3中学习的transion和animation来实现动画。
Vue还提供了内置组件来帮我们实现过渡动画,常见场景分为2种来逐一说明:
1 单个元素/组件 过渡动画
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
只要一个元素被transition包裹,它在切换显示和隐藏的时候,会自动的添加一批类名(6个),我们就可以在自动添加的类名中添加css
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
在进入/离开的过渡中,会有 6 个 class 切换。
- v-enter-from:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
- v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
- v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除),在过渡/动画完成之后移除。
- v-leave-from:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
- v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
- v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除),在过渡/动画完成之后移除。
- 绝大多数时候.v-enter-from,.v-leave-to这一组和.v-enter-to,.v-leave-from这一组的效果是一样的
一个添加了v-if指令的DOM结构可以这样来添加一个过渡效果:
<template>
<button @click="show = !show">Toggle render</button>
<transition>
<p v-if="show">hello</p>
</transition>
</template>
<script setup>
import { ref } from 'vue'
let show = ref(false)
</script>
<style scoped>
.v-enter-from,
.v-leave-to {
transform: translateX(20px);
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active,
.v-leave-active{
transition: all 2s;
}
</style>
上面的效果还可以使用animation动画来实现,注意这二者书写的类名位置有所不同。
<template>
<button @click="show = !show">Toggle render</button>
<transition>
<p v-if="show">hello</p>
</transition>
</template>
<script setup>
import { ref } from 'vue'
let show = ref(false)
</script>
<style scoped>
@keyframes in {
from {
transform: translateX(20px);
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes out {
from {
opacity: 1;
}
to {
transform: translateX(20px);
opacity: 0;
}
}
.v-enter-active {
animation: in 2s;
}
.v-leave-active {
animation: out 2s;
}
<template>
<div>
<button @click="changeIsShow">显示/隐藏</button>
<Transition>
<h1 v-if="isShow">标题</h1>
</Transition>
</div>
</template>
<script setup>
import {ref} from 'vue'
let isShow = ref(true)
function changeIsShow () {
isShow.value = !isShow.value
}
</script>
<style lang="scss" scoped>
/* .v-enter-from,.v-leave-to {
opacity: 0;
transform: translateX(-20px);
} */
h1 {
/* 这个居中样式必须要加,不然会对动画样式产生影响。不居中也需要把尺寸改小 */
text-align: center;
}
.v-enter-active {
/* transition: all 1s; */
animation: bounce-in 1s;
}
.v-leave-active {
animation: bounce-in 1s reverse;
}
/* .v-enter-to,.v-leave-from {
opacity: 1;
transform: translateX(0px);
} */
@keyframes bounce-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
如果需要添加多组过渡动画,在<transiton>组件身上还可以通过指定name属性来替换默认的类名v,例如上面实例中v-leave-to会被改为test-leave-to:
<transition name='test'>
</transition>
<style scoped>
.test-enter-from,
.test-leave-to {
transform: translateX(20px);
opacity: 0;
transition: all 2s;
}
.test-enter-to,
.test-leave-from {
opacity: 1;
transition: all 2s;
}
</style>
2 列表 过渡动画
刚才的过渡动画是基于单个元素或者组件实现的,更多时候我们需要对列表渲染的结构添加动画效果,Vue提供了<transition-group>组件来实现。
有一个ul列表,通过li来存放单个数据,现在希望移除每个li的时候添加动画效果,可以这样来做:
TransitionGroup用来替换原标签,使用tag来指定它替换掉的是什么标签,并起名
使用起好的名字写一个过渡动画效果
<template>
<transition-group tag="ul" name="list">
<li v-for="(item, index) in dataList" :key="item" @click="remove(index)">
{{ item }}
</li>
</transition-group>
</template>
<script setup>
import { ref } from 'vue'
const dataList = ref([1, 2, 3, 4, 5])
const remove = (index) => {
dataList.value.splice(index, 1)
}
</script>
<style scoped>
li {
background-color: pink;
cursor: pointer;
}
.list-enter-from,
.list-leave-to {
transform: translateX(-100px);
opacity: 0;
}
.list-enter-active,
.list-leave-active {
transition: all 2s;
}
</style>
<transition-group> 也可以指定name属性来替换默认的类型,和<transision>不同的是,<transition-group>最终会被渲染成一个真实存在的标签,你可以通过tag属性来指定,上面的示例中<transition-group>最终会被渲染成一个ul。
3 第三方动画库动画
css动画用的较多,在npmjs中,有gsap库,他是比较经典的一个js动画库
经典的css动画库,animate.style
从动画库中添加一个动画效果
首先需要添加一个动画库npm install animate.css --save
<template>
<div>
<button @click="changeIsShow">显示/隐藏</button>
<Transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<h1 v-if="isShow">标题</h1>
</Transition>
<Transition
enter-active-class="animate__animated animate__lightSpeedInRight"
leave-active-class="animate__animated animate__lightSpeedOutRight"
>
<h1 v-if="isShow">标题</h1>
</Transition>
</div>
</template>
animate__animated为默认基础类名,必须要有
animate__bounceIn为动画名称,修改即可改变动画样式
动画名称可以从动画库动画演示列表获取
删除某一个li时,其他li在移动时也可以添加一个联动动画效果list-move(必须使用transition
给list-move定义动画时间,并添加一个定位
<style lang="scss" scoped>
.list-move,.list-enter-active,.list-leave-active{
transition: all 1s;
}
.list-leave-active {
position: absolute;
}
transition没有不居中就会影响动画效果的问题
transition和transitionGroup在vue2中也可以使用