前言：本章文章主要介绍了Vue中的自定义指令，插件以及路由基本使用的相关知识。
【从零开始学Vue | 第五章】Vue核心技术
-
- 一：自定义指令
- 二：插槽
- 三：认识路由
- 四：路由的基本使用
一：自定义指令
自己定义的指令，可以封装一些dom操作，扩展额外功能
全局注册 – 语法
//在mian.js里面进行写入
Vue.directive('指令名', {
// inserted 会在 指令所在的元素，被插入到页面中时触发
inserted (el) {
// el 就是指令所绑定的元素
//此处是封装自定义焦点指令
el.focus()
}
})
局部注册 – 语法
directives: {
// 指令名：指令的配置项
指令名: {
inserted (el) {
//此处是封装自定义焦点指令
el.focus()
}
}
}
使用：
<input v–指令名 type="text">
自定义指令 – 指令的值
例如：实现一个color指令 – 传入不同的颜色，给标签设置文字颜色
语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
<div>
<h1 v–color="color1">指令的值1测试</h1>
<h1 v–color="color2">指令的值2测试</h1>
</div>
通过binging.value可以拿到指令值，指令值修改会触发update函数
directives: {
color: {
// 1. inserted 提供的是元素被添加到页面中时的逻辑
inserted (el, binding) {
// console.log(el, binding.value);
// binding.value 就是指令的值
el.style.color = binding.value
},
// 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
update (el, binding) {
console.log('指令的值修改了');
el.style.color = binding.value
}
}
}
二：插槽
作用：让组件内部的一些结构支持自定义
需求：要在页面中显示一个对话框，封装成一个组件
问题：组件的内容部分，不希望写死，希望能使用的时候自定义 
例如出现这种情况时，两部分框架相同，不相同的地方用插槽定制
基本语法： 1.组件内需要定制的结构部分，使用<slot></slot>占位
2.使用组件时，<MyDialog></MyDialog>标签内部传入结构替代这个slot
<div class="dialog-content">
<!— 1. 在需要定制的位置，使用slot占位 —>
<slot></slot>
</div>
<div>
<!— 2. 在使用组件时，组件标签内填入内容 —>
<MyDialog>
<div>你确认要删除么</div>
</MyDialog>
<MyDialog>
<p>你确认要退出么</p>
</MyDialog>
</div>
注：通过插槽完成的内容的定制，传什么显示什么，如果不传，则是空白。
解决方法：封装组件时，可以为预留的<slot></slot>插槽提供后备内容（默认内容） 语法：在<slot></slot>标签内放置内容作为默认显示内容
<slot>
我是默认的文本内容
</slot>
效果：外部使用组件时，不传东西，则<slot></slot>会显示后备内容；外部使用组件时，传东西了，则<slot></slot>会被换掉。
具名插槽 需求：一个组件内有多处结构，需要外部传入标签进行定制。（默认插槽一个的定制位置）
语法： 1.多个slot使用name属性区分名字
<div class="dialog">
<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>
</div>
2.template配合v-slot:名字来分发对应的标签
<MyDialog>
<!— 需要通过template标签包裹需要分发的结构，包成一个整体 —>
<template v–slot:head>
<!— v–slot:head===#head —>
<div>我是大标题</div>
</template>
<template v–slot:content>
<div>我是内容</div>
</template>
<template #footer>
<button>取消</button>
<button>确认</button>
</template>
</MyDialog>
作用域插槽： 概念：定义插槽的同时，是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用。 场景：封装表格组件 1.父传子，动态渲染表格内容 2.利用默认插槽，定制操作列 3.查看都需要用到当前项的ID，属于组件内部的数据。
使用步骤： 1.给slot标签，以添加属性的方式传值 2.所有添加的属性，都会被收集到一个对象中
<tr v–for="(item, index) in data" :key="item.id">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<!— 1. 给slot标签，添加属性的方式传值 —>
<slot :row="item" msg="测试文本"></slot>
<!— 2. 将所有的属性，添加到一个对象中 —>
<!—
{
row: { id: 2, name: '孙大明', age: 19 },
msg: '测试文本'
}
—>
</td>
</tr>
3.在template中，通过#插槽名="obj"接收，默认插槽名为default
<MyTable :data="list2">
<template #default="{ row }">
<button @click="show(row)">查看</button>
</template>
</MyTable>
4.配置方法
show (row) {
// console.log(row);
alert(`姓名：${row.name}; 年纪：${row.age}`)
}
三：认识路由
在了解路由之前，我们先介绍单页面应用和多页面应用的区别 
单页面应用一般用于系统类网站，内部网站，文档类网站，移动端站点 多页面应用一般用于公司官网，电商类网站
其中单页面应用程序之所以开发效率高，性能高，用户体验好，最大的原因就是页面按需更新，要按需更新，首先就需要明确访问路径和主键的关系。而路由就是路径和组件的映射关系。
四：路由的基本使用
VueRouter 作用：修改地址栏路径时，切换显示匹配的组件 说明：Vue官方的一个路由插件，是一个第三方包 使用： 五个基础步骤 1.下载：下载VueRouter模板到当前工程，版本3.6.5(Vue2)
yarn add vue–router@3.6.5
2.引入
import VueRouter from 'vue-router'
3.安装注册
Vue.use(VueRouter)
4.创建路由对象
const router = new VueRouter({})
5.注入，将路由对象注入到uw实例中建立关联
new Vue({
render: h => h(App),
router
}).$mount('#app')
两个核心步骤
1.创建需要的组件(views目录)，配置路由规则
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
const router = new VueRouter({
// routes 路由规则们
// route 一条路由规则 { path: 路径, component: 组件 }
routes: [
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
]
})
2.配置导航，配置路由出口（路径配置的组件显示的位置）
<div>
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<!— 路由出口 → 匹配的组件所展示的位置 —>
<router–view></router–view>
</div>
</div>
组件存放目录问题
注：.vue文件本质并无区别，但分开存放更易维护 组件分类：页面组件和复面组件 .src/views文件夹 页面组件 – 页面展示 – 配合路由用 .src/components文件夹 复用组件 – 展示数据 – 常用于复用
如果我的内容对你有帮助，请点赞，评论，收藏，创作不易。大家的支持就是我坚持下去的动力！
