Vue小节五

自定义指令

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

●全局注册﹣语法

 Vue.directive ('指令名', {
"inserted" (el) {
//可以对 el 标签，扩展额外功能
 el.focus()}
})

局部注册﹣语法

directives: {
"指令名": {
 inserted () {
/／可以对 el 标签，扩展额外功能
 el.focus()
}
}
}

需求：当页面加载时，让元素将获得焦点( autofocus 在 safari 浏览器有兼容性）

操作 dom : dom元素.focus()

mounted () {
 this.$refs.inp.focus ()
}

使用：

 <input v﹣指令名 type="text">

小结:

1．通过指令的值相关语法，可以应对更复杂指令封装场景
2．指令值的语法：

① v ﹣指令名＝"指令值"，通过等号可以绑定指令的值
②通过 binding . value 可以拿到指令的值
③通过 update 钩子，可以监听指令值的变化，进行 dom 更新操作

自定义指令- v - loading 指令封装

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态

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

分析：

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

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

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

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

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

3.利用指令语法，封装 v - loading 通用指令

 inserted 钩子中， binding . value 判断指令的值，设置默认状态
 update 钩子中， binding . value 判断指令的值，更新类名状态

插槽﹣默认插槽

插槽基本语法：

1．组件内需要定制的结构部分，改用<slot><slot＞占位
2．使用组件时，<MyDialog></MyDialog＞标签内部，传入结构替换 slot 

<template >
<div class="dialog">
<div class="dialog-header">
<h3>友情提示</h3>
<span class="close"> X </span>
</div>


<div class="dialog-content">
<slot></slot>//<MyDialog>你确认要退出本系统么？</MyDialog>

 </div>
<div class="dialog-footer">
<button>取消</button>
<button>确认</button>
</div>
</div>
</template>

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

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

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

效果：

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

<MyDialog></MyDialog>

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

<MyDialog>我是内容</MyDialog>

插槽﹣具名插槽

具名插槽简化语法：

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

<div class="dialog-header"><slot name ="head"></slot></div>
<div class="dialog-content"><slot name ="content"></slot></div>
<div class="dialog-footer"><slot name ="footer"></slot></div>

2.template配合 v - slot ：名字来分发对应标签

<MyDialog>
<template #head>
大标题
</template>
<template #content>
内容文本
</template>
<template #footer>
<button>按钮</button>
</template>
</MyDialog>

3. v-slot:插槽名   可以简化成    ＃插槽名

插槽-作用域插槽

插槽分类：1默认插槽（组件内定制一处结构）2具名插槽（组件内制多处结构）

作用域插槽：是插槽的一个传参语法.。定义 slot 插槽的同时，可以传值。给插槽上可以绑定数据，将来使用组件时可以用。

场景：封装表格组件

件时可以用。场景：封装表格组件
1．父传子，动态渲染表格内容
2．利用默认插槽，定制操作列
3. 删除或查看都需要用到 当前项的 id，属于 组件内部的数据
通过 作用域插槽 传值绑定，进而使用

<MyTable :list="list">
<button>删除</button>
</MyTable>
<MyTable :list="list2">
<button>查看</button>
</MyTable>

插槽-作用域插槽

基本使用步骤：
1．给 slot 标签，以添加属性的方式传值

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

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

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

3.在 template 中，通过'＃插槽名＝" obj "`接收，默认插槽名为 default

<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
</MyTable>

单页应用程序：SPA - Single Page Application

单页面应用（SPA)：所有功能在一个html页面上实现

 单页面应用程序，之所以开发效率高，性能高，用户体验好最大原因：页面按需更新

首先需要明确：访问路径和组件的对应关系(路由)

路由的介绍 

生活中的路由：设备和ip的映射关系

VueRouter

作用：修改地址栏路径时，切换显示匹配的组件

5个基础步骤（固定）

1 下载：下载VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5
2引入

import VueRouter from 'vue-router'

3安装注册

Vue.use(VueRouter)

3创建路由对象

const router = new VueRouter()

4注入，将路由对象注入到new Vue实例中，建立关联

new Vue({
render: h => h(App),
router
}).$mount('#app')

 组件存放目录问题 

.vue文件 本质无区别

路由相关的组件，为什么放在views 目录呢？
组件分类

import Find from './views/Find.vue'

组件分类：1页面组件2复用组件

1src/views 文件夹

页面组件,配合路由,页面展示

2src/components 文件夹

复用组件,展示数据,常用于复用