Vue-day07

内置组件

动态组件

component和is

缓存组件

keep-alive和 include,exclude

activated deactivated

动画组件

name

自定义动画类名前缀

mode

设置进离场顺序

<transition mode="in-out">
//先播放入场动画再播放离场动画
//out-in先出后入
</transition>

入场状态

//入场动画开始前的状态
.v-enter{
//添加样式
opacitity:1;//是否显示隐藏
translation:all 0.5s;//过度时间
transform:scale(1)//缩放入场效果
}
//入场动画开始后的状态
v-enter-active{
}

离场状态

.v-leave-from{
//离场动画开始前
opactity:0;
}
.v-leave-active{
//离场动画开始后
}

自定义指令

<input v-focus type="text">

局部指令

directives选项定义，只能在当前组件中使用

指令功能取决于指令的钩子函数

全局指令

app.directive()定义，可以在整个页面的任何组件上使用

指令功能取决于指令的钩子函数

directives:{
//自定义指令
    focus:{
      //自己书写功能（构造函数）
        //钩子参数
          const myDirective = {
          // 在绑定元素的 attribute 前
          // 或事件监听器应用前调用
          created(el, binding, vnode, prevVnode) {
            // 下面会介绍各个参数的细节
          },
          // 在元素被插入到 DOM 前调用
          beforeMount(el, binding, vnode, prevVnode) {},
          // 在绑定元素的父组件
          // 及他自己的所有子节点都挂载完成后调用


          mounted(el, binding, vnode, prevVnode) {
                el.value=el.value*7+"元"
            },
          //只挂载一次，只执行一次
          // 绑定元素的父组件更新前调用
//*******最重要

          beforeUpdate(el, binding, vnode, prevVnode) {},
          // 在绑定元素的父组件
          // 及他自己的所有子节点都更新后调用
          updated(el, binding, vnode, prevVnode) {},
          // 绑定元素的父组件卸载前调用
          beforeUnmount(el, binding, vnode, prevVnode) {},
          // 绑定元素的父组件卸载后调用
          unmounted(el, binding, vnode, prevVnode) {}
        }
    }
}

插件

定义插件

export default{
    install(app){
    //决定他是一个插件
     //用来封装全局指令
    }
}

应用插件（注册插件）

use方法在执行的时候会自动寻找插件的install方法并执行该方法，完成插件的应用

import myplugins from './plugins'
//用这种方法导入
//只写文件夹默认找index
app.use(myplugins)//插件
//应用插件
app.mount('#app')
//挂载到app上

mixins

作用

抽离多个组件的共用代码，避免代码冗余

使用

混用的公共代码会出现在组件的选项位置

代码

app页面

//导入
import mixins_name from"./mixins"
export default{
    mixins:[mixins_name],
    data(){
        return{
        }
    },
}

文件夹

export default{
    //想共用的技术
//一般只放组件的选项
    methods:{
    
    },
    computed;{
    },
}

两个核心API

$forceUpdate

让组件强制更新

$nextTick

让特定代码在组件的下次更新周期到之后再执行