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

接上一篇，咱们持续来看一下那些 vue3 中实用的小常识！

1 directives 指令

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

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

钩子函数

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

2 components 组件

1. 组件: 一个小的性能分区

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

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

组件注册

components:{steper}

组件的应用

<steper></steper>

2. 组件的参数传递

01 父传子 props

<steper :value="5">

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

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

02 子传父 emit 事件

在 steper 外部

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

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

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

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

3. 插槽

<step> 嵌套内容 </step>

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

<slot></slot>

4. 命名插槽

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

5. 插槽的作用域

子

<slot item="item">

父

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

3 动画 <transtion>

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

1. 动画过渡

进入整个过程

.v-enter-active

进入开始状态

.v-enter-from

进入完结状态

.v-enter-to

来到的过程

.v-leave-active

来到开始状态

.v-leave-from

来到完结状态

.v-leave-to

2.transition

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

.enter-active-class

自定义来到 class 名称

.leave-active-class

3. 列表过渡

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

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

4 节点援用 ref

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

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

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

5 cmd 命令

1. win+ R 关上运行界面，输出 cmd 关上命令窗口
2. 切换盘符：d：，f：
3. 切换目录：cd+ 目录地址
4. 创立目录：md+ 目录地址
5. 删除目录：rd+ 目录地址；rd /s /q 静默删除目录与目录内容
6. 回到目录：
   / 回到根目录
   ./ 回到当前目录
   ../ 回到上一层目录
7. help 查看命令
   help+ 命令 = 查看命令用法
8. 首字母 + tab 提醒当前目录的文件夹
9. 键盘👆按键为上一个命令
   键盘👇按键为下一个命令
10. 其余
    ipconfig 查看本机 ip 地址
    ping 主机 /ip 查看与别的主机与 ip 的联通状态
    cls 清屏
    calc 关上计算器
    ctrl+c 完结以后运行命令