Vue 应用实例的关键方法与配置案例二

前端基地

于 2024-08-08 12:51:21 发布

阅读量728

点赞数 23

分类专栏： vue3.0第一季文章标签：自定义指令 mixin app.use app.directive 自定义插件 app.mixin 全局混合

本文链接：https://blog.csdn.net/chinayun_6401/article/details/141018307

版权

非 VIP 用户能够免费下载博文资源

createApp

详见上一章节：Vue 应用实例的关键方法与配置案例一-CSDN博客

createSSRApp

详见上一章节：Vue 应用实例的关键方法与配置案例一-CSDN博客

app.mount

详见上一章节：Vue 应用实例的关键方法与配置案例一-CSDN博客

app.unmount

详见上一章节：Vue 应用实例的关键方法与配置案例一-CSDN博客

app.component

详见上一章节：Vue 应用实例的关键方法与配置案例一-CSDN博客

app.directive

Vue3.X自定义全局指令

在 Vue 3.0 中，app.directive 方法用于注册自定义指令。自定义指令可以让您对 DOM 元素进行更精细和特定的操作，增强了对页面元素的控制能力。与 Vue 2.x 相比，Vue 3.0 中的自定义指令在钩子函数的参数上有所变化，提供了更清晰和灵活的接口。

自定义指令的钩子函数包括：

created：在指令实例被创建时调用，此时还未绑定到元素。

beforeMount：在绑定到元素之前调用。

mounted：指令绑定到元素时调用。

beforeUpdate：在组件的 VNode 更新之前调用。

updated：组件的 VNode 更新之后调用。

beforeUnmount：在指令与元素解绑之前调用。

unmounted：指令与元素解绑时调用。

在这些钩子函数中，您可以获取到指令的相关参数，如元素节点、绑定的值、修饰符等，从而进行相应的操作。

示例代码如下：

<body>  
    <div id="app">  
        <p>段落</p>  
        <p v-highlight="'yellow'" v-if="isShow">这是一段需要突出显示的文字</p>  
        <button @click="isShow=!isShow">v-if显示隐藏</button>  
        <input type="text" v-focus v-show="flag"/>

最低0.47元/天解锁文章

前端基地

关注

23
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 应用实例的关键方法与配置案例二

本篇博文详述了 Vue 应用实例的关键方法与配置案例，涵盖了 createApp()、createSSRApp()、app.mount()、app.unmount()、app.component()、app.directive()、app.use()、app.mixin()、app.provide()、app.runWithContext()、app.version、app.config、app.config.errorHandler、app.config.warnHandler、app.config.pe
复制链接

扫一扫