知识点
1 配置文件的修改, 必须重启项目才能生效
1 生命周期
1 说明: 事物从诞生到消亡的整个过程
1 创建阶段: beforeCreate -- 创建虚拟dom -- created
2 挂载阶段: beforeMount -- 将虚拟dom渲染成真实dom -- mounted
3 更新阶段: beforeUpdate -- 更新数据 -- updated
4 销毁阶段: beforeDestroy -- 销毁真实dom -- destroyed
2 各个阶段的状态
beforeCreate() {
}
created() {
可以调接口了..}
beforeMount() {
}
mounted() {
调接口, 开定时器, 创建长连接, 操作dom..}
-------- 以上四个钩子函数, 一个组件只执行一次 -----------
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
清除定时器, 长链接等}
destroyed() {
用来擦屁股的}
2 过渡
1 作用: 用来给显示隐藏加上过渡效果, 以保证用户体验 -- 当然包括组件切换
2 使用: 用 <transition> 标签(内置组件) -> 把要执行动画的元素包起来
3 自定义过渡的设置
1 过渡类名 -- 默认 v-xx -- 可通过 name属性 -- 自定义类名前缀 <transition name="hh">
1 v-enter -- 过渡的开始状态 (起始帧) 0%
2 v-enter-to -- 过渡的结束状态 (结束帧) 100%
3 v-enter-active -- 过渡的过程状态 -- 一般用来写 过渡时间 和 运动函数 (常常3-6可以放在一起)
4 v-leave -- 过渡离开的初始状态 100%
5 v-leave-to -- 过渡离开的结束状态 0%
6 v-leave-active -- 过渡离开时从初始到结束的状态 -- 一般用来写-过渡时间-和-运动函数
2 注意 -- <transition name="n1"> 推介使用自定义类名前缀 用于区分不同的过渡元素
4 插件的使用 (重点掌握)-- Animate.css
1 准备阶段
1 npm 安装 -- npm install animate.css --save --> 引入这个模块
2 link 引入 -- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
2 使用阶段
<button @click="show=!show"> 请按我 </button>
<transition
enter-active-class="animate__animated animate__fadeInLeft" 第二个类名是复制的入场动画效果
leave-active-class="animate__animated animate__fadeOutRightBig" 第二个类名是复制的出场动画
mode="out-in" 多个动画的情况进入出去默认同时进行 -- out-in(先出再进) -- in-out(先进再出)
>
<h1 v-show="show"> 哈哈哈 </h1>
<transition>
3 注意点
<transition> 内有多个元素做动画的时候的时候 -- 需要加不一样的 key值
<h1 v-if="show" key="a1"> 哈哈哈 </h1>
<h2 v-else key="a2"> 这孤单的夜 </h2> </transition>
3 mixin 混入
1 概念
------------------------------------------------------------------------------------
1 作用: 功能的复用 -- 其实就是对象合并 -- 合并组件的配置对象
2 理解: 把一些功能写在一个对象上, 混入其他实例, 达到功能共享的效果 ()
2 全局混入: 会把混入对象合并到所有 vue实例, 及所有组件都有这个对象的方法了(全局可用)
main.js -> Vue.mixin({
混入对象})
3 局部混入: 混入对象的数据会和当前组件的数据合并
单文件组件配置项: mixins: [obj]
------------------------------------------------------------------------------------
2 注意事项
------------------------------------------------------------------------------------
1 当混入对象和组件配置对象属性冲突时，以组件的数据为主
2 当混入对象和组件配置对象的方法重名时，保留两个方法，先执行混入对象的方法，再执行组件的方法
3 使用方式
1 src -> mixins -> mixin1.js -> const mx = {
} -> export default mx
2 import mixin1 from "@/mixins/mixin1.js"
------------------------------------------------------------------------------------
4 $refs 属性
作用: 用来在 Vue 中获取 DOM 元素
使用:
1 组件模板的 HTML结构: <p ref="a1">可笑的爱情</p>
2 组件配置项内: this.$refs.a1
注意:
1 $refs 对象包含所有, 设置了ref属性的元素对象
2 不能跨组件获取
5 其他常用属性
1 this.$parent --> 组件配置项内指向父组件对象
2 this.$root --> 组件配置项内指向根组件
3 如下问题不是很清晰
6 vm.$nextTick([callback])
1 问题
1 我们渲染页面是同步的 (先执行) -- 数据请求是异步的 (后执行)
2 同步代码执行完成了 -- 然后再拿到数据更新 -- 出现数据变了 -- 视图不变的问题
2 作用
1 将我们的回调延迟执行 -- 用来延迟执行一段代码
3 理解
1 相当于代码放入到 setTimeout( ()=>{
...}, 0 ) 中执行
4 实例1
1 数据更新 -- DOM并没有完成更新! -- 因为, dom更新是异步的
2 所以通过 dom元素内容修改data数据的时候 -- 先同步赋值dom更新前的数据内容 -- 然后异步改变dom的数据内容
3 解决 -- 延迟去执行获取 dom 的数据 -- this.$nextTick( ()=>{
通过dom动态修改data数据的代码 } ) -- 内部可获取 dom更新之后的值