VUE3怎么学？别瞎逛了，点进来十分钟教你学会VUE3

五、指令directives

1.自定义指令，可以访问到dom节点
2.directive:{
'focus':{
    mounted(el,binding){
//el 当前指令所在的dom
//binding指令相关信息
//binding.value指令的值
   }
  }
 }
3.钩子函数
①created:创建
②beforeMount:父组件挂载前
③mounted：挂载后
④beforeUpdate：更新前

 

六、组件components

1.把复杂的项目拆分成简单的组件
让团队开发更加高效
组件时可以重复使用的模块
2.理解：组件其实就是一个小的vue，具有data，methods以及watch，computed
3.组件的定义：const steper = {template:'<span>...</span>'}
4.组件注册
components:{steper}
5.组件使用
<steper></steper>

6.组件的参数
父传子

<steper:value='7'>
steper内部
propes:{value:{type:Number,default:1}}
steper内部使用(只读，不能修改)
this.value

子传父

在steper内部
this.$emit('numchange',this.num)
numchange事件名称，this.num事件值
父组件
<steper @numchange='w1=$event'>
$event就是子组件通过numchange传递过来的值this.num

 

 

七、插槽

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

八、命名插槽

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

九、插槽的作用域

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

十、动画transtion

1.自动对显示与隐藏的元素添加类名
2..v-enter-active
进入整个过程
.v-leave-active
离开整个过程
.v-enter-from
进入开始状态
.v-enter-to
进入结束状态
.v-leave-from
离开开始状态
.v-leave-to
离开结束状态
3.<transition>

①mode模式
in-out
out-in
②enter-active-class
自定义进入class名称
③leave-active-class
自定义离开class名称

4.<transition-group>
①tag 包裹标签
②v-move
正在移动的元素

 

 

十一、节点引用ref

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

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