Vue自定义指令、插槽、路由的简单使用

1.Vue中的自定义指令：

像Vue中的v-model,v-for等指令一样，我们也可以自定义这样的指令，有两种写法：

（1）全局写法：

在main.js中定义全局指令：

复制代码

Vue.directive('指令名',{
    inserted(e){
    相关操作
}
})

这里的e是指的是当前的标签；

（2）局部写法：

在作用的组件中，在export default{}中进行定义：

复制代码

<script>
export default {
	directives: {
		指令名: {
			inserted(e) {
				相应的操作
			}
		}
	}
}
</script>

调用时都是v-指令名进行使用；

这里注意，inserted这个钩子函数只在元素被添加到页面中时的逻辑，而如果使用update的话则在指令值进行修改的时候进行dom更新；

2.插槽的使用

作用：让组件内部的一些结构支持自定义，组件内需要定制的结构部分，使用slot占位，然后在使用组件时标签内部传入自定义的结构代替slot；

在子组件中定义slot标签占位：

在父组件中使用子组件时传入特定的结构进行自定义：

注意这里的是默认插槽，也就是子组件只有一个插槽的情况下，可以直接在使用子组件的时候加内容。

那如果子组件有多个的时候需要在子组件中的slot要加name作为标识，在父组件中使用时在子组件中用<templete #slot名>进行指定slot的定制；

这也叫做具名插槽；

那如果说出现我们在子组件内部有要在slot中进行使用的数据，则在子组件的slot中追加:属性名="属性值",并在父组件中通过#slot名="{属性名}进行获取"

3.单页应用和多页应用：

我觉得简单来说单页应用就是有一个页面作为主体，其他扩展功能都是在本页面进行页面更新渲染。而多页应用则是在一个页面作为主题，扩展功能都进行跳转展示；

4.路由的简单使用:

Vue中的路由就是路径和组件之间的对应关系：

路由的使用需要用到VueRouter

VueRouter的使用：

（1）用yarn add vue-router@3.6.5指令进行下载

（2）在main.js中导入VueRouter插件

html 复制代码

import VueRouter from 'vue-router'

（3）给Vue配置上VueRouter

html 复制代码

Vue.use(VueRouter)

（4）创建路由对象：

html 复制代码

const router = new VueRouter()

（5）将路由注入到Vue实例中

html 复制代码

new Vue({
    reader: h=>h(App)
    router:别名
})

以上五部基本上都是重复的，接下来我们要在项目中进行使用：

在main.js的VueRouter实例中进行路由规则的编写，再在App主组件中进行导航的配置，实现跳转入口的实现；

5.components目录和views目录的区别：

页面组件放在views中，复用组件放在components目录下