自定义指令
-
- [1. 认识自定义指令](#1. 认识自定义指令)
- [1.2. 自定义指令分为两种:](#1.2. 自定义指令分为两种:)
- [1.3. 自定义指令的简单案例: 当某个元素挂载完成后可以自动获取焦点](#1.3. 自定义指令的简单案例: 当某个元素挂载完成后可以自动获取焦点)
- [1.4. 自定义指令的生命周期](#1.4. 自定义指令的生命周期)
- [1.5. 自定义指令参数和修饰符](#1.5. 自定义指令参数和修饰符)
- [1.6. 统一抽取自定义全局指令](#1.6. 统一抽取自定义全局指令)
- [1.7. 自定义指令时间格式化案例](#1.7. 自定义指令时间格式化案例)
1. 认识自定义指令
- 1.1. 在Vue的模板语法中有各种各样的质量:
v-show,v-for, v-model
等,除了使用这些指令外,Vue
也允许我们来自定义自己的指令- 1.1.1. 注意:在
Vue
中,代码的复用和抽象主要还是通过组件; - 1.1.2. 通常在某些情况下,需要对
DOM
元素进行底层操作,这个时候就会用到自定义指令
- 1.1.1. 注意:在
1.2. 自定义指令分为两种:
- 1.2.1. 全局指令:
app
的directive
方法,可以在任意组件中被使用 - 1.2.2. 局部指令:组件中通过的
directives
方法,只能在当前组件中使用
1.3. 自定义指令的简单案例: 当某个元素挂载完成后可以自动获取焦点
- 1.3.1. 实现方式一: 使用默认的实现方式
- 1.3.2. 实现方式二: 自定义一个
v-focus
的局部指令-
1.3.2.1.
options
实现方式-
自定义指令实现,需要在组件选项中使用
directives
; -
它是一个对象,在对象中编写自定义指令的名称(注意:这里不需要加v-);
-
自定义指令有一个生命周期,是在组件挂载后调用的
mounted
, 可以在其中完成操作 -
代码如下:
javascript<script> export default { directives: { focus: { mounted (el) { // 生命周期的函数(自定义指令) el?.focus() } } } } </script>
-
-
1.3.2.2.
Composition Api
实现方式-
自定义局部指令, 必须v开头
-
代码如下:
javascript<script setup> // 2. 方式二: 自定义局部指令, 必须v开头 const vFocus = { mounted (el) { // 生命周期的函数(自定义指令) el?.focus() } } </script>
-
-
1.3.3. 实现方式三: 自定义一个
v-focus
的全局指令- 代码如下:
javascriptconst app = createApp(App) // 自定义全局指令 app.directive('focus', { mounted (el) { el.focus() } }) app.mount('#app')
-
1.4. 自定义指令的生命周期
-
created
: 在绑定元素的attribute或时间监听器被应用之前调用; -
beforeMount
: 当指令第一次绑定到元素并且挂载父组件之前调用; -
mounted
: 在绑定元素的父组件被挂载后调用; -
beforeUpdate
: 在更新包含组件的VNode之前调用; -
updated
: 在更新包含组件的VNode及其子组件的VNode更新后调用; -
beforeUnmount
: 在卸载绑定元素的父组件之前调用; -
unmounted
: 当指令与元素解除绑定且父组件已卸载时,只调用一次; -
代码如下:
javascript<script setup> const vWhy = { created () { console.log('created'); }, beforeMount () { console.log('beforeMount'); }, mounted(el) { console.log('mounted'); }, beforeUpdate () { console.log('beforeUpdate'); }, updated () { console.log('updated'); }, beforeUnmount () { console.log('beforeUnmount'); }, unmounted () { console.log('unmounted'); } } </script>
1.5. 自定义指令参数和修饰符
-
代码如下:
html<!-- 自定义指令的参数和修饰符 v-model:title.lazy.trim="message" title: 指令参数 -> args -> arguments lazy: 修饰符 -> modifiers -> 懒加载 trim: 修饰符 -> modifiers -> 去除空格 message: 绑定的变量,值 -> value -> 最后赋值给title --> <input type="text" v-model:title.lazy.trim="message">
-
案例代码如下:
javascript<template> <div class="app"> // 1.参数-修饰符-值 <h2 v-why:kobe.cba.abc="message" class="title">哈哈哈</h2> // <!-- 2.价格拼接单位符号 --> <h2 v-unit>{{ 111 }}</h2> </div> </template> <script setup> import { ref } from 'vue'; const price = ref(111); const unit = ref('¥') const message = ref('你好,李银河'); const vWhy = { mounted(el, bindings) { el.textContent = bindings.value }, } </script>
1.6. 统一抽取自定义全局指令
-
1.6.1. 创建
directives
文件夹javascript// 在main.js中引入 import { useDirectives } from './01_自定义指令/directives/index.js' const app = createApp(App) useDirectives(app) ```
-
1.6.2.
directives
下创建index.js
统一导入导出所有自定义指令javascript// 导入对应指令文件 import directiveUnit from "./unit"; // 导出useDirective函数并执行指令 export function useDirectives (app) { directiveUnit(app) } ```
-
1.6.3. 创建
指令.js
文件 (例如:unit.js
)javascriptexport default function directiveUnit (app) { app.directive('unit', { mounted (el, bindings) { // 获取默认文本值 const defaultText = el.textContent; // 如果没传单位参数,设置默认值 let unit = bindings.value; if(!unit) { unit = '¥' } // 添加单位 el.textContent = unit + defaultText } }) }
1.7. 自定义指令时间格式化案例
-
1.7.1. 创建
ftime
文件- 代码如下:
javascript// ftime.js import dayjs from "dayjs"; export default function directiveFTime (app) { app.directive('ftime', { mounted (el, bindings) { // 1.获取时间,并且转化成毫秒 let defaultText = el.textContent; if(defaultText.length === 10) { defaultText = defaultText * 1000 } console.log('bindings=-====', bindings); // 2.获取传入的参数 let value = bindings.value if(!value) { value = 'YYYY-MM-DD HH:mm:ss' } // 3.对时间进行格式化 const formatTime = dayjs(defaultText).format(value) el.textContent = formatTime } }) }
-
1.7.2.
directives/index.js
文件中引入ftiem
文件javascriptimport directiveFtime from "./ftime"; export function useDirectives (app) { directiveFtime(app) }
-
1.7.3. 在
main.js
中引入useDirectives
函数并执行指令javascriptimport { useDirectives } from './01_自定义指令/directives/index.js' const app = createApp(App) useDirectives(app)