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

本文介绍: 自定义指令是Vue.js框架提供的一个非常强大的特性，它允许开发者直接操作DOM，扩展Vue.js的能力。封装常用操作：当你发现在多个组件中需要重复执行相同的DOM操作时，可以将这些操作封装成一个自定义指令，以提高代码的复用性和可维护性。与第三方库集成：有时候你可能需要与第三方库（如图表库、地图库等）进行集成，自定义指令可以帮助你在Vue组件中使用这些库，并提供统一的接口。访问底层DOM。

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

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

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

我们可以在任何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');

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

<script>
export default {
  name: 'App'
}
</script>

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')

<template>
  <div v-hover-color="'lightblue'" style="width: 200px; height: 200px;">
    鼠标悬停我看看背景色会变成什么颜色
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

npm install vue-router

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;

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

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

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

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

// 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');

<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>

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);
  });