Vue3.0知识点

1.directives指令：

1.自定义指令，访问到dom节点

2.模板：

directive:{
"focus":{
      mounted(el,binding){
       //  el 当前指令所在的 dom
      // binding指令相关信息
      // binding.value 指令的值
     }
  }
}

3.示例：

2 组件 components：

1.什么是组件：

组件其实就是个小的Vue，具有data，methods，watch，computed。

2.组件的定义：

const steper = {template:`<span>...</span>`}。

3.组件的注册：

components:{steper}

4.组件的使用：

<steper></steper>

5组件的参数传递：

1.父传子 props：

<steper :value="5">

steper内部
props:{value:{type:Number,default:1}}

steper内部使用(只读，不能修改)
this.value 

2.子传父  emit事件：

在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值

父组件
<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num

6.插槽：

<step>
     嵌套内容
</step>

可以通过
<slot></slot>
获取组件的嵌套内容

7.命名插槽：

<step> 
    <template v-slot:pre>
            pre插槽内容
    </template>
</step>

<slot name="pre">

8.插槽的作用域：

子
<slot item="item">

父
<step>
<template v-slot:default="scope">
       {{scope.item}}
</template>
</step>

组件完整版示例：

 

动画<transtion> ：

1.v-enter-active 进入整个过程

.v-enter-from进入开始状态

.v-enter-to进入结束状态

 

2.v-leave-active  离开的过程：

.v-leave-from 离开开始状态

.v-leave-to  离开结束状态

 

3.<transition>

1.mode模式  in-out    out-in

2.enter-active-class    自定义进入class名称

3.leave-active-class   自定义离开class名称

4.<transition-group>

tag 包裹标签名

.v-move   正在移动的的元素

5.示例

 

节点引用  ref 

<input ref="inp">
this.$refs.inp

<btn ref="btn">
this.$refs.btn.add() 访问组件的方法
this.$refs.btn.num 访问组件的属性