关于vue3:那些Vue3实用的小知识结尾更精彩

自定义指令，拜访到 dom 节点

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

钩子函数

created：创立
beforeMount：父组件挂载前
mounted：挂载后
beforeUpdate：更新前

意义：简单我的项目拆分简略的组件，让团队开发更高效，组件是能够重复使用的模块
了解：组件其实就是个小的 Vue，具备 data，methods，watch，computed
组件的定义

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

组件注册

components:{steper}

组件的应用

<steper></steper>

<steper :value="5">

steper 外部应用(只读，不能批改)

props:{value:{type:Number,default:1}}
this.value

在 steper 外部

this.$emit("numchange",this.num)

numchange 事件名称，this.num 事件值
父组件

<steper @numchange="w1=$event">

$event 就是子组件通过 numchange 传递过去的值 this.num

<step> 嵌套内容 </step>

能够通过 slot 获取组件的嵌套内容

<slot></slot>

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

子

<slot item="item">

父

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

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡成果的组件，主动对显示与暗藏的元素增加类名

进入整个过程

.v-enter-active

进入开始状态

.v-enter-from

进入完结状态

.v-enter-to

来到的过程

.v-leave-active

来到开始状态

.v-leave-from

来到完结状态

.v-leave-to

mode 模式分为 in-out 和 out-in
自定义进入 class 名称

.enter-active-class

自定义来到 class 名称

.leave-active-class

咱们会应用 <transition-group> 组件实现列表过渡

tag 包裹标签名
.v-move 正在挪动的的元素

能够应用 ref attribute 为子组件或 HTML 元素指定援用 ID

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

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

1 directives 指令