网站建设的学习方法,淄博网站建设找卓迅,网站里自动切换图片怎么做,网站优化怎么样做文章目录 一、自定义指令是什么#xff1f;二、自定义指令有啥用#xff1f;三、自定义指令怎么用#xff1f;1.自定义指令的参数2.自定义指令的钩子函数#xff08;1#xff09;五个钩子函数的说明#xff08;2#xff09;钩子函数的参数(主要参数#xff1a;el和valu… 文章目录 一、自定义指令是什么二、自定义指令有啥用三、自定义指令怎么用1.自定义指令的参数2.自定义指令的钩子函数1五个钩子函数的说明2钩子函数的参数(主要参数el和value) 3.动态参数和修饰符1参数的使用2动态参数的使用3修饰符 四、完整的vue2自定义指令使用1. 在src下面创建directive文件夹表示是自定义文件夹2. 新建文件copy.js表示是个复制的自定义指令3. copy.js 的完整代码4 .main.js 五、局部指令了解六、完整的vue3自定义指令使用全局和局部1. 指令钩子2. 钩子参数3. 全局自定义组件的使用1 在src下面创建directive文件夹表示是自定义文件夹2新建文件copy.js表示是个复制的自定义指令3copy.ts 的完整代码4main.ts 4. setup函数的局部组件使用5. setup script的局部组件使用6. setup 函数和setup script的局部指令使用 代码图 一、自定义指令是什么 直接看官网的说明带有v- 前缀的特殊 attribute属性。 二、自定义指令有啥用 作用一个指令的任务是在其表达式的值变化时响应式地更新 DOM p v-ifseen现在你看到我了/pv-if 指令会基于表达式 seen 的值的真假来移除/插入该 p 元素。 三、自定义指令怎么用
1.自定义指令的参数
/*
* {string} id 自定义指令的名称
* {Function | Object} [definition] 自定义指令的回调函数
*/
Vue.directive( id, [definition] )2.自定义指令的钩子函数
1五个钩子函数的说明
// 注册一个全局自定义指令 my-directive(Vue.directive注册自定义指令)
Vue.directive(my-directive, {bind(el, binding, vnode) {}, // 当指令绑定到元素上时调用inserted(el) {}, // 当绑定元素插入到 DOM 中时调用update(el, binding, vnode, oldVnode) {} // 在包含组件的 VNode 更新时调用componentUpdated(el, binding, vnode, oldVnode) {} // 在包含组件的 VNode 及其子 VNode 全部更新后调用unbind(el, binding, vnode) {} // 当指令与元素解绑时调用
});2钩子函数的参数(主要参数el和value) el指令所绑定的元素可以用来直接操作 DOM。binding一个对象包含以下 property name指令名不包括 v- 前缀。value指令的绑定值例如v-my-directive1 1 中绑定值为 2。 oldValue指令绑定的前一个值仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression字符串形式的指令表达式。例如 v-my-directive“1 1” 中表达式为 “1 1”。 arg传给指令的参数可选。例如 v-my-directive:foo 中参数为 “foo”。 modifiers一个包含修饰符的对象。例如v-my-directive.foo.bar 中修饰符对象为 { foo: true, bar: true }。 vnodeVue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 oldVnode上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用。 3.动态参数和修饰符
理论说完直接看demo
1参数的使用
div v-copyvalue1的值
// binding 参数会是一个这样的对象
{arg: copy,modifiers: {},value: /* value1 的值 */,oldValue: /* 上一次更新时 value1 的值 */
}div v-example:foo.barvalue2
// 你将获得的binding 参数会是一个这样的对象
{arg: foo,modifiers: { bar: true },value: /* value2 的值 */,oldValue: /* 上一次更新时 value2 的值 */
}2动态参数的使用
div v-example:[arg]value/div3修饰符 同点击事件这种使用修饰符 // 提交事件使用
form submit.preventonSubmit.../form// 自定义指令使用
button v-copy.preventbaz.../button
// v-copy 是定义的自定义名称
// prevent 是修饰符
// baz 是自定义的value四、完整的vue2自定义指令使用
1. 在src下面创建directive文件夹表示是自定义文件夹
2. 新建文件copy.js表示是个复制的自定义指令
3. copy.js 的完整代码
import Vue from vue
import { Message } from view-design // 根据你使用的不同框架替换提示语句
// 注册一个全局自定义复制指令 v-copy
Vue.directive(copy, {// 参数1 ‘el’ 就是操作的dom第二个参数就是binding获取里面的属性value也就是要复制的值bind (el, { value }) {el.$value valueel.handler () {el.style.position relativeif (!el.$value) {// 值为空的时候给出提示alert(无复制内容)return}// 动态创建 textarea 标签const textarea document.createElement(textarea)// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘同时将 textarea 移出可视区域textarea.readOnly readonlytextarea.style.position absolutetextarea.style.top 0pxtextarea.style.left -9999pxtextarea.style.zIndex -9999// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value el.$value// 将 textarea 插入到 el 中el.appendChild(textarea)// 兼容IOS 没有 select() 方法if (textarea.createTextRange) {textarea.select() // 选中值并复制} else {textarea.setSelectionRange(0, el.$value.length)textarea.focus()}const result document.execCommand(Copy)if (result) Message.success(复制成功)el.removeChild(textarea)}el.addEventListener(click, el.handler) // 绑定点击事件},// 当传进来的值更新的时候触发componentUpdated (el, { value }) {el.$value value},// 指令与元素解绑的时候移除事件绑定unbind (el) {el.removeEventListener(click, el.handler)}
})
4 .main.js 因为在copy.js中 import ./directive/copy五、局部指令了解 全局指令通过 Vue.directive() 函数注册一个全局的指令。 局部指令通过组件的 directives 属性对该组件添加一个局部的指令 注意点directives 和 methods 确实是同级的配置项别放在methods里面了。其他使用同全局指令。 directives: {copy: {// 指令的定义inserted: function (el) {// 复制逻辑不在重复了}}
}六、完整的vue3自定义指令使用全局和局部
1. 指令钩子
const myDirective {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode) {}
}2. 钩子参数
el指令绑定到的元素。这可以用于直接操作 DOM。binding一个对象包含以下属性。value传递给指令的值。例如在 v-my-directive1 1 中值是 2。
oldValue之前的值仅在 beforeUpdate 和 updated 中可用。无论值是否更改它都可用。
arg传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中参数是 foo。
modifiers一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中修饰符对象是 { foo: true, bar: true }。
instance使用该指令的组件实例。
dir指令的定义对象。
vnode代表绑定元素的底层 VNode。prevVnode代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
3. 全局自定义组件的使用
1 在src下面创建directive文件夹表示是自定义文件夹
2新建文件copy.js表示是个复制的自定义指令
3copy.ts 的完整代码
import { DirectiveBinding } from vue;
import { message } from ant-design-vue
// 注册一个全局自定义复制指令 v-copy
const copy {// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用mounted(el: HTMLElement, binding: DirectiveBinding) {el.addEventListener(click, () {const textToCopy binding.value;if (textToCopy) {// 如果支持Clipboard APIif (navigator.clipboard navigator.clipboard.writeText) {navigator.clipboard.writeText(textToCopy).then(() {message.success(复制成功)}).catch(err {message.error(err 复制失败)});} else {// 不支持创建一个临时的 textarea 元素来实现复制功能const textarea document.createElement(textarea);textarea.value textToCopy;textarea.style.position fixed;document.body.appendChild(textarea);textarea.focus();textarea.select();try {document.execCommand(copy);message.success(复制成功)} catch (err) {message.error(err 复制失败)}document.body.removeChild(textarea);}}});},// 绑定元素的父组件卸载后调用unmounted(el: HTMLElement) {el.removeEventListener(click, () {});}
}
export default copy4main.ts
import { createApp } from vue
import App from ./App.vue
import copy from ./directive/copy
const app createApp(App)
app.directive(copy, copy);
app.mount(#app)4. setup函数的局部组件使用
templatedivinput v-modeltext placeholderEnter text to copy /button v-copytextCopy Text/button/div
/templatescript
import { ref } from vue;export default {setup() {const text ref();// 定义局部指令const copyDirective {mounted(el, binding) {el.addEventListener(click, () {});},unmounted(el) {el.removeEventListener(click, () {});}};return {text,directives: {copy: copyDirective}};}
};
/script5. setup script的局部组件使用
templatedivvue
templatedivinput v-modeltext placeholderEnter text to copy /button v-copytextCopy Text/button/div
/templatescript setup
import { ref, directive } from vue;// 定义局部指令
const copyDirective {mounted(el, binding) {el.addEventListener(click, () {});},unmounted(el) {el.removeEventListener(click, () {});}
};// 注册局部指令
const directives {copy: copyDirective
};// 定义响应式数据
const text ref();
/script
6. setup 函数和setup script的局部指令使用 代码图
