Vue2+Vue3基础入门到实战项目（四）——课程学习笔记

 大家好， Capybara 继续与大家一起学习Vue框架。坚持就是胜利。

day05

自定义指令

指令注册

directive 指令

 main.js（全局注册）

// inserted 会在 指令所在的元素，被插入到页面中时触发

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// // 1. 全局注册指令
 Vue.directive('focus', {
   // inserted 会在 指令所在的元素，被插入到页面中时触发
   inserted (el) {
     // el 就是指令所绑定的元素
     console.log(el);
     el.focus()
   }
 })


new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue（局部注册）

directives

指令的值

 实操：

（1）没有传入指令的值

 （2）传入指令的值

  （3）传入指令的值（并用于修改元素文字颜色）

// 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑

修改指令的值：

 页面发生变化

（打印多次，是内部更新机制问题）

 

自定义指令 - v-loading 指令封装

 代码：

效果:

 总结：

插槽

默认插槽

 基本语法

代码演示：

不使用插槽时（组件内容一样、不可变、固定）：

使用插槽：

MyDialog.vue

 App.vue

效果：

后备内容

 slot标签里面的内容会作为默认显示内容：

 没有默认内容时（不显示任何内容）：

往slot标签内部，编写内容，可以作为后备内容(默认值)

 同时使用：

 总结：

具名插槽

既想定制标题，也要定制内容： 

用法：

template标签包裹内容，配合v-slot:名字来分发对应标签

v-slot可以简写成#

使用具名插槽：

总结：

作用域插槽

作用域插槽：是插槽的一个传参语法

 使用步骤：

父组件 无法跨组件 拿到子组件的item

使用作用域插槽：

MyTable.vue

App.vue

总结：

个人认为作用域插槽传值，比组件通信-子传父-$emit 会更加简洁方便。

综合案例：商品列表

MyTag.vue

MyTable.vue

效果：

 总结

路由入门

单页应用程序

 对比：

 总结：

路由概念

 生活中的路由

 Vue中的路由：

 小结：

VueRouter 的基本使用

介绍：

 使用步骤5+2

 Vue版本对应关系：2 3 3 3 4 4

2个核心步骤

route

router

小结： 

组件目录存放问题

 页面组件和复用组件：

 分类分开存放，更容易维护

练习1： 

练习2：

 小结：