免费个人博客建站,长沙景点,高清无线视频传输系统,wordpress的模板制作文章目录 一、自定义指令1.创建和使用自定义指令2.钩子函数3.使用参数 二、路由1.创建一个router实例2.在components目录中创建组件3.将路由实例挂载到应用4.使用路由 三、Ajax 代码仓库#xff1a;跳转 当前分支#xff1a;05
一、自定义指令
自定义指令是Vue.js框架提供的… 文章目录 一、自定义指令1.创建和使用自定义指令2.钩子函数3.使用参数 二、路由1.创建一个router实例2.在components目录中创建组件3.将路由实例挂载到应用4.使用路由 三、Ajax 代码仓库跳转 当前分支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
templatediv v-red-color这个div的背景颜色会变成红色/div
/templatescript
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等属性。 vnodeVue 编译生成的虚拟节点。 prevVNode上一个虚拟节点仅在 beforeUpdate 和 updated 钩子中可用。
3.使用参数
假设我们要创建一个自定义指令当鼠标悬停在元素上时元素的背景颜色会变成红色当鼠标移出时背景颜色会恢复。我们将使用自定义指令的钩子函数来实现这个功能。
main.js
import { createApp } from vue
import App from ./App.vueconst 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
templatediv v-hover-colorlightblue stylewidth: 200px; height: 200px;鼠标悬停我看看背景色会变成什么颜色/div
/templatescript
export default {name: App
}
/script
效果 鼠标悬停 二、路由
要想在vue中使用路由第一步需要安装react-router
npm install vue-router1.创建一个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
templatediv classhomeh1{{ msg }}/h1/div
/templatescript
export default {name: MyHome,data() {return {msg: Home};}
};
/scriptMyAbout.vue
!-- components/HelloWorld.vue --
templatediv classabouth1{{ msg }}/h1/div
/templatescript
export default {name: MyAbout,data() {return {msg: About};}
};
/script3.将路由实例挂载到应用
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
templatedivrouter-link to/Home/router-linkrouter-link to/aboutAbout/router-linkrouter-view/router-view/div
/templatescript
export default {name: App
}
/script
效果 三、Ajax
AjaxAsynchronous 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);});
