Vue学习笔记三

• 1.组件的引入及使用
• 2.插槽
• 3. 插槽三种写法
• • 3.1 第一种
  • 3.2 第二种
  • 3.3 第三种简化写法
• 4.组件生命周期
• 4.Vue路由

1.组件的引入及使用

在components中写入组件Header.vue

在App.vue中进行引入

2.插槽

基本使用：
在components中的组件中添加slot
MySlotDemo.vue

App.vue

3. 插槽三种写法

3.1 第一种

在App.vue中template 中 声明slot=“body”

3.2 第二种

在App.vue中template 中 使用v-slot:footer

3.3 第三种简化写法

在App.vue中template 中 使用#body

4.组件生命周期

MyLifeCom

App.vue

4.Vue路由

Vue路由官网
Demo
在views中新建index.vue

在App.vue中

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";// 引入组件
import Index from "../views/Index.vue";Vue.use(VueRouter);
// 用于配置 路径 和 组件 的对应关系 
const routes = [{path: "/fz",  //path代表路径name: "Index", // 名字 是这个配置的名字后续有用component: Index,  // 对应的组件},{path: "/about",name: "about",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () =>import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),},
];const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,
});export default router;