Vue 基础 2

知识点

1 配置文件的修改, 必须重启项目才能生效

1 生命周期

1 说明: 事物从诞生到消亡的整个过程
	1 创建阶段: beforeCreate -- 创建虚拟dom -- created
    2 挂载阶段: beforeMount -- 将虚拟dom渲染成真实dom -- mounted
    3 更新阶段: beforeUpdate -- 更新数据 -- updated
    4 销毁阶段: beforeDestroy -- 销毁真实dom -- destroyed

2 各个阶段的状态
	beforeCreate() {
    
    }  //有实例对象, 没有数据, 没有真实的dom
    created() {
    
     可以调接口了..}  // 有实例对象, 有数据, 没有真实的dom
    
    beforeMount() {
    
    }  //有实例对象, 有数据, 没有真实的dom
    mounted() {
    
    调接口, 开定时器, 创建长连接, 操作dom..}   //有实例对象, 有数据, 有真实的dom

    -------- 以上四个钩子函数, 一个组件只执行一次 -----------

	// 更新数据才会执行的一组钩子 -- created 阶段修改数据不会触发这个钩子
    beforeUpdate() {
    
    }  //数据是更新之后的值, dom当中的数据是更新之前的
    updated() {
    
    }  //数据是更新之后的值, dom当中的数据是更新之后的
    
    beforeDestroy() {
    
    清除定时器, 长链接等}  //有实例对象 -- 有数据 -- 有真实的dom
    destroyed() {
    
    用来擦屁股的}  //有实例对象 -- 有数据 -- 没有真实的dom

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更新之后的值

猜你喜欢

转载自blog.csdn.net/weixin_46178697/article/details/113957119

相关文章