那些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 结束当前运行命令