自定义指令

定义：自己定义指令, 封装dom操作，扩展额外功能语法：v-指令名="" 使用：作为在组件中作为标签属性使用。如：<div v-color="red"></div> 全局注册

vue.directive("指令名", {		// directive没有s，是单数，只能注册一个，要注册多个得另外写vue.directive
  inserted(el){
    // el是标签所在的DOM，可以通过el.style对标签属性操作
  }
});

局部注册

<script>
export default {
  directives: {		// directives 有s，是复数，能注册多个
    "指令名": {
      inserted(el) {
        // el是标签所在的DOM，可以通过el.style对标签属性操作
      },
    },
  },
};
</script>

自定义指令传值

语法：v-指令名="指令值"

指令所在DOM渲染时触发 inserted 函数
1. 通过 binding.value 可以拿到指令值
2. 也可以通过 { value } 可以拿到指令值
指令值修改会触发 update 函数

<script>
export default {
  directives: {
    color: {
      // inserted：指令所在DOM渲染完触发
      inserted(el, binding) {
      // 这里的binding可以写成{value}，对应下面的binding.value直接写成value
         el.style.color = binding.value;
      },
      
      // update：指令的值改变时触发
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
};
</script>

生命周期

vue组件生命周期：是Vue组件实例，从创建到销毁的全过程

钩子函数

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。作用：特定的时间点，执行特定的操作分类：三大阶段，8个方法

三大阶段

组件初始化阶段
1. 数据初始化 —— beforeCreate 和 created
2. DOM渲染 —— beforeMount 和 mounted
组件运行阶段
1. 数据更新据 —— beforeUpdate 和 updated
组件销毁阶段 —— beforeDestroy 和 destroyed

8个钩子函数

beforeCreate：data数据初始化之前，组件还没有数据
created: data数据初始化之后，可以获取到组件的数据
1. 使用场景：调接口，获取数据
beforeMount：DOM渲染之前，DOM还没渲染
mounted：DOM渲染之后，可以操作DOM了
1. 使用场景：操作首次渲染的DOM
beforeUpdate: 数据更新，DOM更新前
updated: 数据更新，DOM更新后
1. 任意数据更新都会触发改变，需要写很多限制条件，否则会消耗性能
2. 不常用，一般用$nextTick
beforeDestroy: 组件销毁前
destroyed: 组件销毁后
1. 使用场景：资源回收，如定时器关闭等

路由

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

单页应用程序SPA

定义：所有功能在一个html页面上实现 (多页面应用程序MPA) 优点：

切换页面不刷新整个页面，速度快，每次请求仅获取需要的部分，用户体验更好
数据传递容易, 开发效率高

缺点：

开发成本高(需要学习专门知识 - 路由)
首次加载会比较慢一点。不利于SEO（搜索引擎优化）
- 解决：SSR（Server Side Render）

vue-router

vue-router本质是 vue 官方的一个路由插件，是一个第三方包官网：v3.router.vuejs.org/zh/api/ 集成了路径和组件的切换匹配处理，我们只需要配置规则即可。

组件分类

页面组件：页面展示 - 配合路由用，放在src/views文件夹
复用组件：展示数据 - 常用于复用，放在src/components文件夹

路由的使用

下载vue-router模块到当前工程，版本3.5.3
1. Vue2使用3.x版本，Vue3使用4.x版本
2. npm i vue-router@3
在main.js中引入VueRouter函数
1. 在main.js中配置import VueRouter from "vue-router";
添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
1. 在main.js中配置Vue.use(VueRouter);
创建路由对象

const router = new VueRouter({
    routes: {
      path: '',   // 组件路径
      component: {}, // 组件对象
    }，
});

将路由对象注入到new Vue实例中
1. 在 new Vue({ })中添加 router: router,

// 1.先在终端下载模块
// 2.引入VueRouter函数
import VueRouter from "vue-router";
// 引入组件
import page1 from "./views/page1.vue";
import page2 from "./views/page2.vue";
// 3.注册VueRouter的功能
Vue.use(VueRouter);
// 4.创建路由对象
const router = new VueRouter({
  // rotues代表路由配置
  routes: [
    {
      path: "/page1",
      component: page1,
    },
    {
      path: "/page2",
      component: page2,
    },
  ],
});
// 5.将路由对象注入到new Vue实例中
new Vue({
  router,			// 简写
  render: (h) => h(App),
}).$mount("#app");

缺点：访问需要手动输地址

http://localhost:8080/#/page1
/#/page1/——不用刷新页面，先找页面中的page1组件

在组件中使用：

路由的封装抽离

需求：代码都写在main.js，比较冗余，不便于维护好处：拆分模块，利于维护

// 在src/router/index.js中配置
// 1.引用vue
import Vue from "vue";
// 2.引入VueRouter函数
import VueRouter from "vue-router";
// 引入组件
import page1 from "../views/page1.vue";
import page2 from "../views/page2.vue";
// 3.注册VueRouter的功能
Vue.use(VueRouter);
// 4.创建路由对象
const router = new VueRouter({
  // rotues代表路由配置
  routes: [
    {
      path: "/page1",
      component: page1,
    },
    {
      path: "/page2",
      component: page2,
    },
  ],
});
// 6.输出
export default router;

// 在main.js中配置
// 7.引入路由
import router from "./router/index";
// import router from "./router";		//可以直接这么写，会自动找index

new Vue({
  // 8.将路由对象注入到new Vue实例中
  router,
  render: (h) => h(App),
}).$mount("#app");

声明式导航

导航链接 router-link

router-link定义：VueRouter提供的全局组件，本质就是a标签优点：自带激活时的类名，可以做高亮

router-link-active，模糊匹配，如 to="/my" 可以匹配 /my、/my/a、/my/b...
router-link-exact-active，精确匹配，如 to="/my"仅可以匹配 /my
可以在const router=new VueRouter({ })中修改，但不推荐

使用：当标签使用，必须传入to属性，指定路由路径值

<template>
  <div>
    <router-link to="page1">页面1</router-link> | 
    <router-link to="page2">页面2</router-link>
    <router-view></router-view>
  </div>
</template>

跳转传参（query传参）

需求：在跳转路由时, 可以给路由对应的组件内传值步骤：

在router-link上的to属性传值，语法格式如下

query接参：:to="{ path: '/page1', query: { ... } }"
params接参：需要路由对象提前配置 path: "/path/:参数名"（写在routes[]中）
- 写法一：:to="/page2/${变量}"
- 写法二：:to="{ name: '路由名', params: { 参数名: 变量 } }"
  - params不能和path配合使用
  - 需要在路由对象提前配置 name: "路由名"写在routes[]中）
params可以强制要求必须传参（原理：path: "/path/:参数名"）

对应页面组件接收传递过来的值，写在created(){}中

$route.query.参数名
$route.params.参数名

<template>
  <div class="footer_wrap">
    
    <router-link :to="{ path: '/page1', query: { name: 'page1', age: 0.1 } }">11</router-link> | 
    <!-- 默认写法： -->
    <router-link :to="`/page2/${id}`">22</router-link>
    <!-- <router-link :to="{ name: '路由名', params: { id } }">22</router-link> -->
    <router-view></router-view>
  </div>
</template>

Vue学习笔记05