文章目录
代码仓库:跳转
当前分支:05
一、自定义指令
自定义指令是Vue.js框架提供的一个非常强大的特性,它允许开发者直接操作DOM,扩展Vue.js的能力。自定义指令的主要作用包括:
-
封装常用操作:当你发现在多个组件中需要重复执行相同的DOM操作时,可以将这些操作封装成一个自定义指令,以提高代码的复用性和可维护性。
-
与第三方库集成:有时候你可能需要与第三方库(如图表库、地图库等)进行集成,自定义指令可以帮助你在Vue组件中使用这些库,并提供统一的接口。
-
访问底层DOM:有些特定的DOM操作可能需要直接访问底层的DOM元素,而不适合放在组件的模板中,自定义指令可以提供一个更灵活的方式来处理这些操作。
-
解耦视图层和业务逻辑:有些操作可能更适合放在指令中而不是组件中,这样可以更好地将视图层和业务逻辑解耦,使代码更清晰易懂。
总的来说,自定义指令为开发者提供了一种扩展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');
- 在组件中使用自定义指令:
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 技术通常用于实现以下功能:
- 动态加载数据:例如在网页中实现无刷新加载新内容。
- 表单验证:通过 Ajax 可以在用户输入数据后实时验证数据的有效性。
- 实时搜索:在用户输入搜索关键词时,实时向服务器请求数据并展示搜索结果。
总的来说,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);
});