Vue3.0 directive的使用说明

1. 指令生命周期关键字变更

在3.0中指令的注册和其生命周期是这样的

import { createApp } from 'vue'
const app = createApp({})// 注册
app.directive('my-directive', {// Directive has a set of lifecycle hooks:// called before bound element's parent component is mountedbeforeMount() {},// called when bound element's parent component is mountedmounted() {},// called before the containing component's VNode is updatedbeforeUpdate() {},// called after the containing component's VNode and the VNodes of its children // have updatedupdated() {},// called before the bound element's parent component is unmountedbeforeUnmount() {},// called when the bound element's parent component is unmountedunmounted() {}
})

在2.x中指令的注册和其生命周期是这样的

import Vue from 'vue'
// 注册
Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {}
})

2. 全局directive

与Vue 2.x的使用方法基本相同
在main.js中添加全局directive。
在3.0中创建vue实例的方式不再是new Vue，而是使用createApp方法进行创建

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.directive('focus', {// When the bound element is mounted into the DOM...mounted(el) {// Focus the elementconsole.log(el);el.focus()}
})
app.mount('#app')

在其他单文件组件调用全局directive

<template><input type="text" name="" id="" v-focus>
</template>

3. 局部使用directive

与Vue 2.x的使用方法基本相同
在单文件组件中使用directive

<template><input type="text" name="" id="" v-focus>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},data() { return { };},directives: {focus: {// 参数 el, binding, vnode, oldVnodemounted: function (el) { el.focus()}}}
}
</script>

Vue3.0 directive的使用说明相关推荐

Vue3.0笔记（B站天禹老师）
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
Vue3.0实现原生高度可自定义菜单组件vue3-menus
vue3-menus Vue3.0 自定义右键菜单 Vue3.0 原生实现完全自定义右键菜单组件, 零依赖,可根据可视区域自动调节显示位置,可支持插槽完全重写每一项菜单项目地址 GitHub Git ...
【Vue系列】Vue3.0知识点汇总整理
目录一.Vue3简介 1.Vue3带来了什么? 二.创建Vue3工程 1.使用vue-cli创建 2.使用vite创建补充:分析Vue3的工程结构三.常用Composition API 1.初识 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
Vue3.0尚硅谷（讲师：张天禹）视频学习笔记
一.创建Vue3.0工程 1.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ...
15分钟上手vue3.0(小结)
这篇文章主要介绍了15分钟上手vue3.0,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 Vue 3 还没有正式发布,但是 Alpha 版本已经发布了. 虽然官方还不推荐 ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
Vue3.0中的变化
1.Vue3 简介 2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王) 2.Vue3 带来了什么 1.性能的提升打包大小减少 41% 初次渲染快 5 ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...
尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...

Vue3.0 directive的使用说明

1. 指令生命周期关键字变更

2. 全局directive

3. 局部使用directive

Vue3.0 directive的使用说明相关推荐

最新文章

热门文章