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

TracyCoder1232024-01-14 8:23

文章目录

代码仓库：跳转

当前分支：05

一、自定义指令

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

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

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

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

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

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

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

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

main.js：

javascript 复制代码 
// 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：

html 复制代码 
<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
javascript 复制代码 
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：
html 复制代码 
<template>
  <div v-hover-color="'lightblue'" style="width: 200px; height: 200px;">
    鼠标悬停我看看背景色会变成什么颜色
  </div>
</template>

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

鼠标悬停：

二、路由

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

html 复制代码 
npm install vue-router

1.创建一个router实例

router.js

javascript 复制代码 
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

html 复制代码 
<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>

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

MyAbout.vue

html 复制代码 
<!-- 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

javascript 复制代码 
// 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

javascript 复制代码 
<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 对象来实现异步通信的技术，它使得网页能够实现动态更新内容的功能，提升了用户体验。

  • 首先，安装依赖：
shell 复制代码 
npm install axios
  • 代码示例：
javascript 复制代码 
// 发起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);
  });
相关推荐
你挚爱的强哥1 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
天天进步20154 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒5 小时前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
瑞雨溪5 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背5 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M5 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇