关键词:
目录
其他区别 ===》 vue2.0和vue3.0中语法的区别
自定义指令是什么?类似于vue中的v-for v-if v-model...类似的指令语法,自定义指令是自己注册的指令
为什么使用自定义指令?对于现有的指令需求达不到目的,有时候需要对DOM进行其他操作,用自定义扩展更多的功能
使用自定义指令
vue2.0
组件中注册
<template>
<div>
<input type="text" v-focus='123' >
</div>
</template>
<script>
export default
directives:
focus: // 自定义指令的名字
// 下面每个方法都是一个钩子函数
// el代表 当前绑定的dom元素
bind: (el, binding) =>
el.value = 56 // 可以赋值 不能使用方法
console.log('bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。')
,
inserted: (el, binding) =>
el.focus() // 可以使用方法
console.log('inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。')
,
update: (el, binding) =>
console.log('update:被绑定元素所在模板更新时调用,模板还没更新完成')
,
componentUpdated: (el, binding) =>
console.log('componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。')
,
unbind: (el, binding) =>
console.log('unbind:只调用一次,指令与元素解绑时调用。')
</script>
全局中注册
Vue.directive('focus',
inserted: function (el, bind)
el.focus()
console.log(el, bind)
)
具有高端b格写法(利用插件的形式)
export default
install (Vue)
Vue.directive('focus',
inserted: function (el, bind)
el.focus()
console.log(el, bind)
)
//main.js
import directive from './views/directive'
Vue.use(directive)
Vue3.0
import createApp from 'vue'
const app = createApp()
// 注册
app.directive('my-directive',
// 指令是具有一组生命周期的钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created (el, binding) ,
// 在绑定元素的父组件挂载之前调用
beforeMount (el, binding) ,
// 绑定元素的父组件被挂载时调用
mounted (el, binding) ,
// 在包含组件的 VNode 更新之前调用
beforeUpdate (el, binding) ,
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated (el, binding) ,
// 在绑定元素的父组件卸载之前调用
beforeUnmount (el, binding) ,
// 卸载绑定元素的父组件时调用
unmounted (el, binding)
)
// 注册 (功能指令)
app.directive('my-directive', () =>
// 这将被作为 `mounted` 和 `updated` 调用
)
小坑
vue3.0中我们通过vue-cli生成的脚手架中的main.js是这么写的
import createApp from 'vue'
import App from './App.vue'
const app = createApp(App)
createApp(App).use(store).use(router).use(components).mount('#app')
注册全局指令
import createApp from 'vue'
import App from './App.vue'
const app = createApp(App) //cv过来的代码 第一次定义createApp(App)
app.directive('blue',
mounted (el, binding)
console.log(el, binding)
)
createApp(App).use(store).use(router).use(components).mount('#app') //错误代码
上面又是一个createApp(App) 相当于后面的给前面的替换掉了 也就相当于没有定义自定义指令 修改记得改成app
app.use(store).use(router).use(components).mount('#app')
import createApp from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('blue',
mounted (el, binding)
console.log(el, binding)
)
app.use(store).mount('#app')
具有高端b格写法(利用插件的形式)
directive.js
export default
install (app)
app.directive('test',
mounted (el, binding)
console.log(el, binding)
)
main.js
import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)
dom使用
<div v-test></div>
自定义指令中的参数
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:
name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 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
。vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。除了
el
之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的dataset
来进行。
常用
① el 获取dom进行操作
② binding中的value属性 通过binding.value拿到 自定义指令中传过来的值 v-test="1" ===binding.value
小demo 把当前元素设为绝对定位 并移动指定的top值
directive/index.js
export default
install (app)
app.directive('top',
mounted (el, binding)
console.log(el, binding)
el.style.position = 'absolute'
el.style.top = binding.value + 'px'
)
main.js
import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)
dom
<div v-top='50' style="width:100px;height:100px;background:pink"></div>
vue2.0和vue3.0中的区别
vue2.0中和vue3.0中 自定义指令的原理是一致的,只是生命周期 钩子函数不同
vue2中绑定的钩子函数为
- bind - 指令绑定到元素后发生。只发生一次。
- inserted - 元素插入父 DOM 后发生。
- update - 当元素更新,但子元素尚未更新时,将调用此钩子。
- componentUpdated - 一旦组件和子级被更新,就会调用这个钩子。
- unbind - 一旦指令被移除,就会调用这个钩子。也只调用一次。
vue3.0
将钩子函数的命名与生命周期的钩子函数命名相一致
- bind → beforeMount
- inserted → mounted
- beforeUpdate:新的!这是在元素本身更新之前调用的,很像组件生命周期钩子。
- componentUpdated → updated
- beforeUnmount:新的!与组件生命周期钩子类似,它将在卸载元素之前调用。
- unbind -> unmounted
vue3.0如何自定义指令(代码片段)
前言本篇博客是基于vue3.0的自定义指令开发教程,(有版本变化会持续更新)其中会列出如何使用以及与vue2.0的自定义指令的对比。一,Vue3.0自定义指令教程demo中,包含一个很简单的一键复制指令,不需要再下... 查看详情
vue3.0如何自定义指令(代码片段)
前言本篇博客是基于vue3.0的自定义指令开发教程,(有版本变化会持续更新)其中会列出如何使用以及与vue2.0的自定义指令的对比。一,Vue3.0自定义指令教程demo中,包含一个很简单的一键复制指令,不需要再下... 查看详情
vue中自定义指令
自定义指令默认设置的核心指令(v-model,v-bind,v-for,v-if,v-on等),Vue也允许注册自定义指令。注意,在Vue2.0里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定... 查看详情
vue2.0和vue3.0中的区别(代码片段)
...项式(optionAPI)和组合式(CompositionAPI)四、钩子函数五、路由vue2vue3 六、vuexvue2七、响应式数据refreactive八、v-model vue2中的v-model vue3中的v-model一、mian.js中vue的实例化main.js入口文件:初始化实例使用的 查看详情
同一电脑上安装且使用vue2.0和vue3.0版本(代码片段)
问题:想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现?方法:第一步:卸载全局安装的vue版本。(注:自行百度搜索如何卸载全局vue2vue3脚手架)第二步:在自己想要的位置... 查看详情
关于angular中自定义防抖指令的实现
angular对于input的防抖功能实现借用rxjs的debounceTime实现定义directive.ts指令文件import{Directive,ElementRef,Input}from‘@angular/core‘;import{fromEvent,Observable}from‘rxjs‘;import{debounceTime}from‘rxjs/operators‘;@Direc 查看详情
vue3.0的proxy响应式原理简单实现
...handler参数也是一个对象,用来定制拦截行为。baseHandler中定义拦截的getset方法,监测和改写数据,为了方便,我们需要先将所有依赖收集起来,一旦数据发生变化,就统一通知更新。就是典型的“发布订阅者”模式,数据变化为... 查看详情
vue2.0与vue3.0循环渲染对比
参考技术A(1)将<el-table-column>标签的属性定义为一个数组columns,循环渲染数据。(2)由于v-for和v-if不能作用在同一标签上,所以要用<template>包裹所有的<el-table-column>。(3)循环渲染<<el-table-column>标签,并将... 查看详情
vue2.0笔记——自定义指令(代码片段)
自定义指令自定义指令主要用于,除系统提供外,自己对DOM的底层操作。例如当页面加载时需要将一个文本框为自动获得焦点。只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。我们通过全局... 查看详情
vue2.0学习—自定义指令(四十九)(代码片段)
【Vue2.0学习】—自定义指令(四十九)需求:需求1:定义一个v-big指令,和v-text功能相似,但会把绑定的数值放大10倍需求2:定义一个v-fbind指令,和v-bind功能相似,但可以让其绑定的input元素默认获取焦... 查看详情
vue3.0中用自定义指令实现图片懒加载(代码片段)
....0使用)中的 useIntersectionObserver vue.use插件的使用vue3.0自定义指令 使用场景①每一张图片都要进行懒加载操作,在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态浏... 查看详情
vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsr... 查看详情
vue3.0总结(代码片段)
...props与context,props:用来接收props数据,context用来定义上下文,上下文对象中包含了一些有用的属性,这些属性 查看详情
vue2.xdirective自定义指令
directive自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。注意,在Vue2.0里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令... 查看详情
vue3笔记(代码片段)
...ed计算属性11.watch监视12.watchEffect函数13.VUE3.0生命周期14.自定义hook函数15.toRef与toRefs16.其他CompositionAPI16.1.shallowReactive与shallowRef16.2.readonly与shallowReadonly16.3.toRaw与markRaw16.4.customRef1.vue3带来了什么打包大小减少41%初次渲染开55%,更... 查看详情
vue2.0-自定义指令vue-directive
...M。。binding: 一个对象,包含指令的很多信息。 自定义指令有五个生命周期: 》1、bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定 查看详情
敲黑板,划重点!!!vue3.0响应式实现原理——proxy()(代码片段)
Vue3.0响应式实现原理1.先来回顾一下Vue2.0的响应式原理2.Vue3.0原理实现——Proxy()3.重点说明——Reflect1.先来回顾一下Vue2.0的响应式原理通过Object.defineProperty()实现数据劫持存在的问题针对对象:新增属性,删除属性,界... 查看详情
敲黑板,划重点!!!vue3.0响应式实现原理——proxy()(代码片段)
Vue3.0响应式实现原理1.先来回顾一下Vue2.0的响应式原理2.Vue3.0原理实现——Proxy()3.重点说明——Reflect1.先来回顾一下Vue2.0的响应式原理通过Object.defineProperty()实现数据劫持存在的问题针对对象:新增属性,删除属性,界... 查看详情