VUE系统学习五
发表更新VUE

VUE系统学习五

自定义指令

1.指令介绍

  • 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用

  • 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

    每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

3.自定义指令语法

  • 全局注册

    1
    2
    3
    4
    5
    6
    7
    //在main.js中
    Vue.directive('指令名', {
      "inserted" (el) {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
    })

  • 局部注册

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //在Vue组件的配置项中
    directives: {
      "指令名": {
        inserted (el) {
          // 可以对 el 标签，扩展额外功能
          el.focus()
        }
      }
    }

  • 使用指令

    注意：在使用指令的时候，一定要先注册，再使用，否则会报错
    使用指令语法： v-指令名。如：<input type="text" v-focus/>

    注册指令时不用加v-前缀，但使用时一定要加v-前缀

4.指令中的配置项介绍

inserted:被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

5.代码示例

需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

main.jss

1
2
3
4
5
6
7
// 1. 全局注册指令
Vue.directive('focus', {
  // 进入页面，让元素自动获取焦点
  inserted (ele) {
    ele.focus() // 让元素获取焦点
  }
})

App.vue

1
<input type="text" v-focus />

自定义指令-指令的值

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

1
<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

1
2
3
4
5
6
7
8
9
10
directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

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

1.场景

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

2.需求

封装一个 v-loading 指令，实现加载中的效果

3.分析

1.本质 loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

4.实现

1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层

2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

1
2
3
4
5
6
7
8
9
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./loading.gif") no-repeat center;
}

5.准备代码

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
  <div class="box">
    <h3>需求：Ajax请求数据，并设计loading指令</h3>
    <!-- list数据为空，加 loading 类，让loading图片显示 -->
    <!-- list数据不为空，移除 loading 类，让loading图片隐藏 -->
    <ul v-loading="list.length">
      <li class="news" v-for="item in list" :key="item.id">
        <div class="left">
          <div class="title">{{ item.title }}</div>
          <div class="info">
            <span>{{ item.source }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  directives: {
    loading: {
      // 刷新页面后，立即判断有没有数据，loading图片要不要显示
      inserted (ele, obj) {
        obj.value <= 0
          ? ele.classList.add('loading')
          : ele.classList.remove('loading')
      },
      update (ele, obj) {
        obj.value <= 0
          ? ele.classList.add('loading')
          : ele.classList.remove('loading')
      }
    }
  },
  data () {
    return {
      list: []
    }
  },
  async created () {
    const { data: res } = await axios.get('http://hmajax.itheima.net/api/news')
    setTimeout(() => {
      this.list = res.data
    }, 2000)
  }
}
</script>

<style>
.loading::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./loading.gif') no-repeat;
  content: '';
}
</style>

插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 自定义

68241021524

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分，改用****占位
  2. 使用组件时, ****标签内部, 传入结构替换slot
  3. 给插槽传入内容时，可以传入纯文本、html标签、组件

68241032979

插槽-（默认值）

1.问题

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

68241149461

能否给插槽设置 默认显示内容 呢？

2.插槽的后备内容

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。

3.语法

在标签内，放置内容, 作为默认显示内容

68241233912

4.效果

  • 外部使用组件时，不传东西，则slot会显示后备内容

    68241243265

  • 外部使用组件时，传东西了，则slot整体会被换掉

    68241245902

插槽-具名插槽

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制 68241313487

上面的弹框中有三处不同，但是默认插槽只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

  • 多个slot使用name属性区分名字

    68241339172

  • template配合v-slot:名字来分发对应标签

    68241341192

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

image-20240708095650541

作用域插槽

1.插槽分类

  • 默认插槽

  • 具名插槽

    插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用,也就是父组件要获得子组件的数据

3.使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

    1
    <slot :id="item.id" msg="测试文本"></slot>

  2. 所有添加的属性, 都会被收集到一个对象中

    1
    { id: 3, msg: '测试文本' }

  3. 在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

    1
    2
    3
    4
    5
    <MyTable>
      <template #default="obj">
        <button @click="del(obj.id)">删除</button>
      </template>
    </MyTable>

5.代码示例

student组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <slot :student="stus"></slot>
  </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            stus: ['巧克力', '小猫', '猿']
        }
    }
}
</script>

使用student组件

1
2
3
4
5
6
7
<Student>
      <template v-slot="data">
        <ul>
          <li v-for="s in data.student" :key="s.index">{{ s }}</li>
        </ul>
      </template>
</Student>

单页应用程序介绍

1.概念

单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现

2.具体示例

单页应用网站： 网易云音乐 https://music.163.com/

多页应用网站：京东 https://jd.com/

3.单页应用 VS 多页面应用

68244191297

单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点

多页应用类网站：公司官网 / 电商类网站

路由介绍

1.思考

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是：页面按需更新

68244269977

比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的

要按需更新，首先就需要明确：访问路径和 组件的对应关系！

访问路径 和 组件的对应关系如何确定呢？ 路由

2.路由的介绍

生活中的路由：设备和ip的映射关系

68244294505

Vue中的路由：路径和组件的映射关系

68244304037

路由的基本使用

1.目标

认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用

修改地址栏路径时，切换显示匹配的组件

3.说明

Vue 官方的一个路由插件，是一个第三方包

4.官网

https://v3.router.vuejs.org/zh/

5.VueRouter的使用（5+2）

固定5个固定的步骤（不用死背，熟能生巧）

  1. 下载 VueRouter 模块到当前工程，版本3.6.5

    1
    yarn add vue-router@3.6.5

  2. main.js中引入VueRouter

    1
    import VueRouter from 'vue-router'

  3. 安装注册

    1
    Vue.use(VueRouter)

  4. 创建路由对象

    1
    const router = new VueRouter()

  5. 注入，将路由对象注入到new Vue实例中，建立关联

    1
    2
    3
    4
    5
    new Vue({
      render: h => h(App),
      router:router
    }).$mount('#app')

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

68247920745

6.代码示例

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联


import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter()

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

7.两个核心步骤

  1. 创建需要的组件 (views目录)，配置路由规则

    68247963966

  2. 配置导航，配置路由出口(路径匹配的组件显示的位置)

    App.vue

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>

组件的存放目录问题

注意： .vue文件 本质无区别

1.组件分类

.vue文件分为2类，都是 .vue文件（本质无区别）

  • 页面组件 （配置路由规则时使用的组件）
  • 复用组件（多个组件中都使用到的组件）
68244539795

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹

    页面组件 - 页面展示 - 配合路由用

  2. src/components文件夹

    复用组件 - 展示数据 - 常用于复用

路由的封装抽离

问题：所有的路由配置都在main.js中合适吗？

目标：将路由模块抽离出来。 好处：拆分模块，利于维护

68248141030

路径简写：

脚手架环境下 @指代src目录，可以用于快速引入组件

VUE系统学习五

https://bubuweiying.site/VUE系统学习五/

作者

步步为营

发布于

2024-07-08

更新于

2025-03-15

许可协议

#

喜欢这篇文章？打赏一下作者吧

交个朋友 ↘

分类

链接

标签

.net5
.net core40
AI11
AJAX4
C#5
C#互操作1
C#接口1
C++1
C++/CLI5
C/C++2
CPP9
CSS3
CSnakes1
ChatGPT1
Docker1
Dos1
Flex1
GMesh2
Git1
HTML5
JavaScript10
Linux1
MCP2
Nginx3
NumPy1
OCC6
OSS1
QML1
QT28
Quartz.net3
SEO2
SVG1
Semantic Kernel18
TypeScript1
UML1
VTK4
VUE30
WPF51
Web APIs6
Workflow Core7
blazor5
hexo1
http1
node.js2
python17
three.js2
单元测试1
模式匹配1
源代码生成器2
观察者模式1
计算机图形学5
高级调试2

最新文章

×