💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

 

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!

自定义指令

1.指令介绍

内置指令：v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令，可以直接使用

自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

3.自定义指令语法

全局注册

<code>//在main.js中

Vue.directive('指令名', {

  "inserted" (el) {

    // 可以对 el 标签，扩展额外功能

el.focus()

  }

})

局部注册

//在Vue组件的配置项中

directives: { 

"指令名": { 

  inserted () { 

    // 可以对 el 标签，扩展额外功能  

  el.focus()    }  }}

使用指令

注意：在使用指令的时候，一定要先注册，再使用，否则会报错 使用指令语法： v-指令名。如：<input type="text" v-focus/>

注册指令时不用加v-前缀，但使用时一定要加v-前缀

4.指令中的配置项介绍

inserted:被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

自定义指令-指令的值

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<code><div v-color="color">我是内容</div>code>

2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

directives: {

  color: {

    inserted (el, binding) {

      el.style.color = binding.value

    },

    update (el, binding) {

      el.style.color = binding.value

    }

  }

}

v-loading指令的封装

1.场景

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

2.需求

封装一个 v-loading 指令，实现加载中的效果

3.分析

1.本质 loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

4.实现

1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层

2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 自定义

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办

4.插槽的基本语法

组件内需要定制的结构部分，改用<slot></slot>占位

使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

给插槽传入内容时，可以传入纯文本、html标签、组件

插槽-后备内容（默认值）

1.问题

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

2.插槽的后备内容

封装组件时，可以为预留的 <code><slot> 插槽提供后备内容（默认内容）。

3.语法

在 <slot> 标签内，放置内容, 作为默认显示内容

4.效果

外部使用组件时，不传东西，则slot会显示后备内容

外部使用组件时，传东西了，则slot整体会被换掉

插槽-具名插槽

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制

上面的弹框中有三处不同，但是默认插槽只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

多个slot使用name属性区分名字

template配合v-slot:名字来分发对应标签

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

作用域插槽

1.插槽分类

默认插槽

具名插槽

插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

3.场景

封装表格组件

4.使用步骤

给 slot 标签, 以 添加属性的方式传值

<code><slot :id="item.id" msg="测试文本"></slot>code>

所有添加的属性, 都会被收集到一个对象中

{ id: 3, msg: '测试文本' }

在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

<MyTable :list="list">code>

  <template #default="obj">code>

    <button @click="del(obj.id)">删除</button>code>

  </template>

</MyTable>