两周掌握Vue3（五）：自定义指令、路由、ajax

news2025/3/1 0:00:10

文章目录

  • 一、自定义指令
    • 1.创建和使用自定义指令
    • 2.钩子函数
    • 3.使用参数
  • 二、路由
    • 1.创建一个router实例
    • 2.在components目录中创建组件
    • 3.将路由实例挂载到应用
    • 4.使用路由
  • 三、Ajax

代码仓库：跳转
当前分支：05

一、自定义指令

自定义指令是Vue.js框架提供的一个非常强大的特性，它允许开发者直接操作DOM，扩展Vue.js的能力。自定义指令的主要作用包括：

  1. 封装常用操作：当你发现在多个组件中需要重复执行相同的DOM操作时，可以将这些操作封装成一个自定义指令，以提高代码的复用性和可维护性。

  2. 与第三方库集成：有时候你可能需要与第三方库（如图表库、地图库等）进行集成，自定义指令可以帮助你在Vue组件中使用这些库，并提供统一的接口。

  3. 访问底层DOM：有些特定的DOM操作可能需要直接访问底层的DOM元素，而不适合放在组件的模板中，自定义指令可以提供一个更灵活的方式来处理这些操作。

  4. 解耦视图层和业务逻辑：有些操作可能更适合放在指令中而不是组件中，这样可以更好地将视图层和业务逻辑解耦，使代码更清晰易懂。

总的来说，自定义指令为开发者提供了一种扩展Vue.js功能的方式，使得在处理DOM操作和与第三方库集成时更加灵活和便捷。

1.创建和使用自定义指令

我们可以在任何Vue文件中创建自定义指令。在这个例子中，我们将创建一个简单的自定义指令，用于将元素的背景颜色设置为红色。

main.js：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('red-color', {
  mounted(el) {
    el.style.backgroundColor = 'red';
  }
});

app.mount('#app');
  1. 在组件中使用自定义指令：

App.vue：

<template>
  <div v-red-color>这个div的背景颜色会变成红色</div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • 效果：

在这里插入图片描述

2.钩子函数

  • 指令定义函数提供了几个钩子函数：

    created : 在绑定元素的属性或事件监听器被应用之前调用。
    beforeMount：在被绑定元素挂载之前调用。
    mounted：在被绑定元素挂载后调用。
    beforeUpdate：在包含组件的 VNode 更新之前调用，但可能在其子 VNode 更新之前调用。
    updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
    beforeUnmount：在卸载绑定元素之前调用。
    unmounted：在卸载绑定元素后调用。

这些钩子函数允许在自定义指令的生命周期中执行相应的操作，例如在元素挂载前后进行初始化和清理、在元素更新前后执行特定逻辑、在解绑时进行清理等。通过合理使用这些钩子函数，可以更好地控制自定义指令的行为，并与Vue 3的生命周期进行交互。

  • 参数： 在Vue 3中，自定义指令的钩子函数可以接收以下参数：
    el：指令所绑定的元素，可以用来直接操作DOM。
    binding：一个对象，包含指令的信息。包括name、value、oldValue、arg、modifiers等属性。
    vnode：Vue 编译生成的虚拟节点。
    prevVNode：上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

3.使用参数

假设我们要创建一个自定义指令，当鼠标悬停在元素上时，元素的背景颜色会变成红色，当鼠标移出时，背景颜色会恢复。我们将使用自定义指令的钩子函数来实现这个功能。

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('hover-color', {
  beforeMount(el, binding) {
    el.style.transition = 'background-color 0.3s';
    el.style.backgroundColor = binding.value;
  },
  mounted(el, binding) {
    el.addEventListener('mouseenter', () => {
      el.style.backgroundColor = 'red';
    });
    el.addEventListener('mouseleave', () => {
      el.style.backgroundColor = binding.value;
    });
  }
});

app.mount('#app')
  • App.vue：
<template>
  <div v-hover-color="'lightblue'" style="width: 200px; height: 200px;">
    鼠标悬停我看看背景色会变成什么颜色
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • 效果：

在这里插入图片描述

鼠标悬停：

在这里插入图片描述

二、路由

要想在vue中使用路由，第一步需要安装react-router：

npm install vue-router

1.创建一个router实例

router.js

import { createRouter, createWebHistory } from 'vue-router';
import MyHome from './components/MyHome.vue';
import MyAbout from './components/MyAbout.vue';

const routes = [
  { path: '/', component: MyHome },
  { path: '/about', component: MyAbout }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2.在components目录中创建组件

MyHome.vue

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyHome',
  data() {
    return {
      msg: 'Home'
    };
  }
};
</script>

MyAbout.vue

<!-- components/HelloWorld.vue -->
<template>
  <div class="about">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyAbout',
  data() {
    return {
      msg: 'About'
    };
  }
};
</script>

3.将路由实例挂载到应用

main.js

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4.使用路由

App.vue

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • 效果：

在这里插入图片描述

三、Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的技术。它通过在不重新加载整个页面的情况下，利用 JavaScript 发起 HTTP 请求并接收服务器返回的数据，从而实现页面的局部刷新和动态更新。

Ajax 技术的核心是通过 XMLHttpRequest 对象来实现异步通信。通过使用 Ajax，网页可以在后台与服务器进行数据交换，从而实现动态更新页面内容的功能。这种技术使得用户能够在不刷新整个页面的情况下，获取最新的数据并更新页面的部分内容，从而提升了用户体验。

Ajax 技术通常用于实现以下功能：

  1. 动态加载数据：例如在网页中实现无刷新加载新内容。
  2. 表单验证：通过 Ajax 可以在用户输入数据后实时验证数据的有效性。
  3. 实时搜索：在用户输入搜索关键词时，实时向服务器请求数据并展示搜索结果。

总的来说，Ajax 技术是一种利用 JavaScript 和 XMLHttpRequest 对象来实现异步通信的技术，它使得网页能够实现动态更新内容的功能，提升了用户体验。

  • 首先，安装依赖：
npm install axios
  • 代码示例：
// 发起GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发起POST请求
axios.post('https://api.example.com/postData', { data: 'example' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1381328.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

掌握WPF控件：熟练常用属性（一）

掌握WPF控件：熟练常用属性（一）

WPF布局常用控件&#xff08;一&#xff09; Border Border控件是一个装饰控件&#xff0c;用于围绕其他元素绘制边框和背景。它提供了一种简单的方式来为其他控件添加边框和背景样式&#xff0c;而无需自定义控件的绘制逻辑。 常用属性描述Background用于设置背景颜色或图像…
阅读更多...
增删改查管理系统 总结1

增删改查管理系统 总结1

//提醒&#xff1a; 管理员也要有增删改查 新增员工代码完善2可能需要用到 目录 细节1 pom文件出现奇怪页面&#xff1f; 细节2 如何联系DataGrip与idea&#xff1f; 细节3 Yapi?接口文档&#xff1f;如何有以下画面&#xff1f; ​细节4 如何将时间转化为好看的时间&…
阅读更多...
【.NET Core】Lazy＜T＞ 实现延迟加载详解

【.NET Core】Lazy＜T＞ 实现延迟加载详解

【.NET Core】Lazy 实现延迟加载详解 文章目录 【.NET Core】Lazy<T> 实现延迟加载详解一、概述二、Lazy<T>是什么三、Lazy基本用法3.1 构造时使用默认的初始化方式3.2 构造时使用指定的委托初始化 四、Lazy.Value使用五、Lazy扩展用法5.1 实现延迟属性5.2 Lazy实现…
阅读更多...
语义分割miou指标计算详解

语义分割miou指标计算详解

文章目录 1. 语义分割的评价指标2. 混淆矩阵计算2.1 np.bincount的使用2.2 混淆矩阵计算 3. 语义分割指标计算3.1 IOU计算方式1(推荐)方式2 3.2 Precision 计算3.3 总体的Accuracy计算3.4 Recall 计算3.5 MIOU计算 参考 MIoU全称为Mean Intersection over Union&#xff0c;平均…
阅读更多...
山西电力市场日前价格预测【2024-01-13】

山西电力市场日前价格预测【2024-01-13】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-13&#xff09;山西电力市场全天平均日前电价为231.81元/MWh。其中&#xff0c;最高日前电价为345.71元/MWh&#xff0c;预计出现在00:15。最低日前电价为0.00元/MWh&#xff0c;预计出…
阅读更多...
大模型实战笔记04——XTuner 大模型单卡低成本微调实战

大模型实战笔记04——XTuner 大模型单卡低成本微调实战

大模型实战笔记04——XTuner 大模型单卡低成本微调实战 1、Finetune简介 2、XTuner 3、8GB显存玩转LLM 4、动手实战环节 注&#xff1a; 笔记内容均为截图 课程视频地址&#xff1a;https://www.bilibili.com/video/BV1yK4y1B75J/?spm_id_from333.788&vd_source2882acf…
阅读更多...
行为型设计模式——备忘录模式

行为型设计模式——备忘录模式

备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作…
阅读更多...
计算机网络NCEPU复习资料

计算机网络NCEPU复习资料

目录 一&#xff0e;概述&#xff1a; 计算机网络组成&#xff1a; 计算机网络分类&#xff1a; 计算机网络体系结构&#xff1a; C/S架构与P2P架构区别&#xff1a; OSI开放式系统互连参考模型&#xff1a; OSI开放式系统互连参考模型 相关协议&#xff1a; 五层协议网…
阅读更多...
【Vue2】一个数组按时间分割为【今年】和【往年】俩个数组

【Vue2】一个数组按时间分割为【今年】和【往年】俩个数组

一. 需求 后端返回一个数组&#xff0c;前端按时间维度将该数组的分割为【今年】和【往年】俩个数组后端返回的数组格式如下 timeList:[{id:1,billTime:"2024-01-10",createTime:"2024-01-10 00:00:00",status:0},{id:2,billTime:"2022-05-25"…
阅读更多...
（收藏）数据治理：一文讲透数据安全

（收藏）数据治理：一文讲透数据安全

数据治理&#xff1a;一文讲透数据安全 数据安全是数据治理的核心内容之一&#xff0c;随着数据治理的深入&#xff0c;我不断的碰到数据安全中的金发姑娘问题&#xff08;指安全和效率的平衡&#xff09;。 DAMA说&#xff0c;降低风险和促进业务增长是数据安全活动的主要…
阅读更多...
详解Java信号量-Semaphore

详解Java信号量-Semaphore

第1章&#xff1a;引言 大家好&#xff0c;我是小黑。今天&#xff0c;咱们一起来深入探讨一下Semaphore。在Java中&#xff0c;正确地管理并发是一件既挑战又有趣的事情。当谈到并发控制&#xff0c;大家可能首先想到的是synchronized关键字或者是ReentrantLock。但其实&…
阅读更多...
Open3D 获取点云坐标最值（17）

Open3D 获取点云坐标最值（17）

Open3D 获取点云坐标最值（17） 一、算法介绍二、算法实现1.代码2.结果人生天地间，忽如远行客 一、算法介绍 快速获取点云块，沿着 x y z 各方向的坐标最值，这些在点云处理中的应用范围是如此广泛，这也是点云最常被用到的关键信息，后续的很多算法都会设置到这一处理方法。…
阅读更多...
迈入AI智能时代！ChatGPT国内版免费AI助手工具 peropure·AI正式上线 一个想法写一首歌？这事AI还真能干！

迈入AI智能时代！ChatGPT国内版免费AI助手工具 peropure·AI正式上线 一个想法写一首歌？这事AI还真能干！

号外&#xff01;前几天推荐的Peropure.Ai迎来升级&#xff0c;现已支持联网模式&#xff0c;回答更新更准&#xff0c;欢迎注册体验&#xff1a; https://sourl.cn/5T74Hu 相信很多人都有过这样的想法&#xff0c;有没有一首歌能表达自己此时此刻的心情&#xff1a; 当你在深…
阅读更多...
【LabVIEW FPGA入门】模拟输入和模拟输出

【LabVIEW FPGA入门】模拟输入和模拟输出

1.简单模拟输入和输出测试 1.打开项目&#xff0c;在FPGA终端下面新建一个VI 2.本示例以模拟输入卡和模拟输出卡同时举例。 3.新建一个VI编写程序&#xff0c;同时将卡1的输出连接到卡2的输入使用物理连线。 4.编译并运行程序&#xff0c;观察是否能从通道中采集和输出信号。 5…
阅读更多...
计算机缺失msvcr100.dll如何修复？分享五种实测靠谱的方法

计算机缺失msvcr100.dll如何修复？分享五种实测靠谱的方法

在计算机系统的日常运行与维护过程中&#xff0c;我们可能会遇到一种特定的故障场景&#xff0c;即系统中关键性动态链接库文件msvcr100.dll的丢失。msvcr100.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;对于许多基于Windows的应用程序来说&#xff…
阅读更多...
【动态规划】LeetCode-42. 接雨水

【动态规划】LeetCode-42. 接雨水

42. 接雨水。 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1…
阅读更多...
GPUMD分子动力学模拟-学习与实践

GPUMD分子动力学模拟-学习与实践

GPUMD分子动力学模拟-学习与实践 【20220813-樊哲勇 |基于GPUMD程序包的机器学习势和分子动力学模拟】 https://www.bilibili.com/video/BV1cd4y1Z7zi?share_sourcecopy_web 纯GPU下的MD分子模型系统软件 https://github.com/brucefan1983/GPUMD 跟GPUMD对接的一些python程…
阅读更多...
绘制几何图形（Shape）

绘制几何图形（Shape）

目录 1、创建绘制组件 2、形状视口viewport 3、自定义样式 4、场景示例 绘制组件用于在页面绘制图形&#xff0c;Shape组件是绘制组件的父组件&#xff0c;父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考Shape。 1、创建绘制组件 绘制组件可以由以下两种形式…
阅读更多...
Servlet-Request

Servlet-Request

一、预览 在上一篇Servlet体系结构中&#xff0c;我们初步了解了怎么快速本篇将介绍Servlet中请求Request的相关内容&#xff0c;包括Request的体系结构&#xff0c;Request常用API。 二、Request体系结构 我们注意到我们定义的Servlet类若实现Servlet接口时&#xff0c;请求…
阅读更多...
第十七周周报

第十七周周报

文章目录 摘要目标检测锚框交并比NMS 非极大值抑制输出 文献阅读&#xff1a;SMPL: A Skinned Multi-Person Linear ModelIntroductionRelated WorkModel FormulationTraining评估动态SMPL讨论结论 总结 摘要 本周看了三维人体重建的领域&#xff0c;看了一篇SMPL的文章&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023