程序员书籍笔记
yuadh
2022-03-04
目录

Vue插槽

# Vue插槽

<slot> 占位标签

组件插槽-为了让封装的组件显示不同的标签结构

具体应用场景：组件内使用 <slot> 标签占位，在不确定组件内的标签是什么结构时显示不同的结构

不确定的组件

<template>
	<div>
        ...
        <div class="container">
        	    <slot></slot>
   		</div>
    </div>
</template>
1
2
3
4
5
6
7
8

使用组件插槽

<yuadh>
    <p>此处填补插槽内容</p>
    <p>此处填补插槽内容</p>
</yuadh>
1
2
3
4

# 设置插槽的默认内容

slot 内部的是默认显示的内容

# 具名插槽

一个组件内有2处以上需要外部传入标签的地方

v-slot:[name]

对插槽起名

具体使用

<yuadh>
	<template v-slot:[name]></template>
    <template v-slot:showItem></template>
    <template v-slot:shownO></template>
</yuadh>
1
2
3
4
5

也可以使用 #[name] 的方式简化

<template #showItem></template>
1

# 插槽作用域

插槽不能直接使用其组件里的数据

插槽之间的通信

  1. 在插槽上绑定自定义的属性和值

    <slot :obj="defaultObj">defaultObj.name</slot>
    1

  2. 使用组件，用 v-slot 属性接收

  3. 在插槽中使用对应组件的数据

    <yuadh>
	<p v-slot="allData">
        {{allData.defaultObj.name}}
    </p>
</yuadh>
    1
    2
    3
    4
    5

# 插槽使用场景

某表格内的标签不确定使用什么内容

<tbody>
	<tr v-for="(obj,index) in arr" :key="index">
    	<td>{{index+1}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.zzz}}</td>
        <td>
        	<slot :Item="obj">
            	{{obj.URL}}
            </slot>
        </td>
    </tr>
</tbody>
1
2
3
4
5
6
7
8
9
10
11
12

使用

<yuadh>
	<template v-slot="obj">
		<a :href="obj.Item.URL">URL</a>
    </template>
</yuadh>
<yuadh>
	<template v-slot="obj">
		<img :src="obj.Item.URL">
    </template>
</yuadh>
1
2
3
4
5
6
7
8
9
10

给不同的单元格内插入了不同的标签

# 自定义指令

功能添加

语法

局部自定义指令

Vue.directive("yfocus",{
	inserted(el){
		//获取到元素标签
		el.focus()
	}
})
1
2
3
4
5
6

使用

<input type="text" v-yfocus>
1

执行对应指令，自动聚焦

局部自定义指令

export default{
	directives:{
		focus:{
			inserted(el){
				el.focus();
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

使用 v-[name]

# 传值

自定义指令

Vue.directive('name',{
	inserted(el,obj){//此方法在数据更新后并不会执行，类挂载阶段
		el.style.color=obj.value
	},
	uptate(){//数据的更新后会执行的函数
		el.stle.color=obj.value
	}
})
1
2
3
4
5
6
7
8

# Vue路由

# 什么是路由

前端路由：路径和组件的映射关系，是一种映射关系

场景

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

前端路由作用：实现业务场景切换

优点：

  • 整体不刷新页面，用户体验好
  • 数据传递容易，开发效率高

缺点：

  • 开发成本
  • 首次加载会比较慢一些，不利于 seo

# vue-router

模块包，和 Vue.js 深度集成

  • 可定义--试图表
  • 模块化的
  • 提供2个内置全局组件
  • 申明式导航自动激活的 CSS class的链接

# 组件分类

  • 页面组件
  • 复用组件

一般习惯

src/views 文件加下放页面组件-页面展示-配合路由使用

src/componets 文件下放复用组件-展示数据/常用于复用

# 基本使用

  • 下载 vue-router 模块到当前工程
  • 在 main.js 中引入 VueRouter 模块
  • 添加到 Vue.use() - 注册全局组件
  • 创建路由规则数组-路径和组件名对应关系
  • 用规则生成路由对象
  • 把路由对象注入到 new Vue 实例中
  • 用 router-view 作为挂载点，切换不同的路由页面
//1.引入 vueRouter 模块
import  VueRouter from 'vue-router'
//2.注册全局组件
Vue.use(VueRouter)
//3.创建路由规则数组
const routes[]=[
    {
        path:'/find',
        component:Find
    },
    {
        path:'/my',
        component:My
    },
    {
        path:'/part',
        component:Part
    }
]
//4.生成路由对象
const router = new VueRouter({
    routes:routes//es6key和value同值可以简写
})
//5.路由对象注入到vue实例中，this可以访问 $route和 $router
new Vue({
    router,
    render:h=>h(app),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 设置挂载点-当url的hash值路径切换，显示规则里对应的数组此

<div class="header">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/part"><朋友/a>
</div>

<div class="showMain">
<router-view></router-view>
</div>
1
2
3
4
5
6
7
8
9

# 声明式导航

使用 router-link 来替代 a 标签，来实现一些功能

<div class="header">
    <router-link to="#/find">发现音乐</a>
    <router-link to="#/my">我的音乐</a>
    <router-link to="#/part"><朋友/a>
</div>
1
2
3
4
5

激活的 router-link 标签会添加

:class router-link-exact-active router-link-active 两个类名

可以利用这个类名对激活的标签做一些功能

.router-link-active{
	color:white;	
	background:black;
}
1
2
3
4

传值

  1. to属性传值

    to="/part?name=yuadh"

    使用：

  2. 动态路由

    1. main.js 定义接收的具体值

      {
    path:"/part/:username",
    component:Part
}
      1
      2
      3
      4

    2. App.vue 传入值

      <router-link to="/part/yuadh"></router-link>
      1

    3. Part.vue 组件接收

      <p>
    {{$route.params.username}}
</p>
      1
      2
      3

# 重定向

网页刚打开，默认路由没有设置

需要将 / 重定向路由跳转到指定页面

const routers = {
	{
		path:"/",
		redirect:"/find"
	},
	 {
        path:'/find',
        component:Find
    },
}
1
2
3
4
5
6
7
8
9
10

# 404页面设置

  • 创建404页面在 views 文件夹下

  • 在路由规则的最下面写404的匹配

    {
	path:"*",
	component:NotFound
}
    1
    2
    3
    4

# 路由模式修改

将 hash 模式的路径 改为普通的 history 模式

const router = new VueRouter({
	routers,
	mode:"histroy"
})
1
2
3
4

修改后没有 URL/#/find hash路径

# 编程式导航

用普通的 js 方法，跳转路由

<span @click="btn('/part')>我的</span>

编程式导航语法

  • this.$router.push({path:'路由路径'})
  • this.$router.push({name:'路由名'})
btn(targetPath){
	this.$router.push({
		path:targetPath
	})
}
1
2
3
4
5

使用路由名，就需要在路由规则里给路由起名

{
	path:"/find",
	name:"find",
	component:find
}
1
2
3
4
5
btn(targetPath,targeName){
	this.$router.push({
		name:targetName
	})
}
1
2
3
4
5

# 编程式导航传参

<btn @click="oneBtn"></btn>

methods:{
	oneBtn(){
		this.$router.push({
			name:'part',
			params:{usernma:"yuadh"}//path会自动忽略 params
		})
	},
	twoBtn(){
		this.$router.push({
			name:'Part',
			query:{
				username:"yuadh"// name+query 是比较推荐的方法
			}
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

用什么传就用什么接收

# 路由嵌套

  • 创建所需组件，二级路由在 views 下创建 Second
  • 二级路由在一级路由处定义，且无需写根符号/ ，children 关键字
  • 在父组件中使用 router-view
{
	path:"/find",
	name:"find",
	component:find,
	children:[
		{path:'yaudh1',component:yuadh1},
		{path:'yaudh2',component:yuadh2},
		{path:'yaudh3',component:yuadh3},
	]
}
1
2
3
4
5
6
7
8
9
10

使用在一级路由组件中使用

# 扩展：激活类名区别

router-link-exact-active url的hash值和 href 完全匹配会自动分配此类名

router-link-active url 的hash值包含在 href 中会自动分配此类名

# 路由守卫

router.beforeEach((to,from,next)=>{...})

场景：当你要对路由页面跳转权限判断时使用

  • to ， 要跳转的路由对象-目标的对象
  • from，从那个路由对象跳转-来源的对象
  • next，next() 函数传参为 false 禁止跳转，或传入一个路由路径

简单的例子

const isLogin = true;
router.beforeEach((to,from,next)=>{
    if(to.path==='/my'&&isLogin===false){
        alter('未登入');
        next(false);//停留页面
    }else{
        next();//正常跳转
    }
})
1
2
3
4
5
6
7
8
9
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
Vue生命周期+
Vue组件库

← Vue组件库→

Theme by Vdoing | Copyright © 2021-2023 yuadh
×