VUE之全局API（自定义指令directive）

最新推荐文章于 2024-04-11 16:09:04 发布
最新推荐文章于 2024-04-11 16:09:04 发布
阅读量612 收藏 1
点赞数 1
分类专栏： 今日所学 日报
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihua130427/article/details/102900811
版权
这篇博客介绍了Vue的全局API，特别是自定义指令的使用。内容包括Vue.directive用于创建自定义指令，Vue.extend扩展实例构造器，以及Vue.set、Vue.delete等其他常用全局API。文章探讨了自定义指令的必要性，特别是在Vue2.0中当组件无法满足某些底层DOM操作需求时。文中详细展示了如何注册全局和局部自定义指令，并通过实例演示了如何实现输入框自动聚焦的功能，以及自定义指令的生命周期钩子，如bind钩子用于元素初始化时的操作。
摘要由CSDN通过智能技术生成

什么是全局API？

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive
通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。

常用vue 的全局 API列表

1、Vue.directive 自定义指令
2、Vue.extend 扩展实例构造器
3、全局操作Vue.set + Vue.delete
4、Vue 的生命周期
5、Vue component 组件 + Vue template模板
6、Vue.nextTick线程操作、Vue.filter筛选、Vue.use调用

小结：全局API就是在构造器外部用Vue提供的API函数来定义新的功能。

缘由：

Vue2.0开始代码复用性和抽象的主要形式是组件，然而个别情况下仍然需要对普通DOM元素进行底层操作。
之前所学的v-if、v-show等都是vue内置指令，有时部分功能是无法通过内置指令实现，此时便需要用到自定义指令。

注册自定义指令语法如下：
全局

// 注册自定义指令
		Vue.directive("directiveName",{
   
			// 选项
		})

局部

// 注册局部自定义指令
			directive:{
   
				"directiveName":{
   
					// 选项
				}
			}

全局自定义指令注册语法为Vue.directive()
局部自定义指令注册需要借助directives选项

最低0.47元/天 解锁文章
Vue 全局自定义指令使用
pzh044511的博客
08-19 527
2.自定义指令内部逻辑。
Vue3探秘系列— directive：指令的实现原理（十一）
最新发布
weixin_47588164的博客
09-19 1230
一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。比如定义一个v-log指令，这个指令做的事情就是在指令的各个生命周期去输出一些log信息：javascript代码解读复制代码然后你可以在创建应用后注册它：javascript代码解读复制代码接着在App组件中使用这个指令：javascript代码解读复制代码当你点击按钮后，会先执行指令定义的和mounted钩子函数，然后你在input输入框中输入一些内容，会执行和。
vue全局自定义指令和局部自定义指令
kingov
10-20 1万+
局部自定义指令(只针对组件内的元素) 定义全局自定义指令 自定义指令的钩子函数 自定义指令钩子函数的参数 例子 除了默认设置的核心指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 局部自定义指令(只针对组件内的元素) 父组件app.vue <template> <div id="app"> <tes...
vue全局API_vue.directive（自定义指令）
weixin_43550562的博客
04-21 196
<template> <div id="app"> <span v-hello='color3'>{{ message }}</span> <button @click="add">点击开始加1</button> <button onclick="jiebang()">解绑</button> &l...
vue.js基础__Vue.directive 自定义指令，全局API
alanbiz1314的博客
06-27 160
一、什么是全局API? 全局API并不在构造器里，而是先声明全局变量或者直接在Vue省定义一些新功能，Vue内置了一些全局API， 比如指令Vue.directive。简单来说就是在构造器外部用Vue提供给我们的API函数来定义新的功能 二、自定义绑定事件 - 自定义指令有五个生命周期（也叫钩子函数），分别是 bind, inserted, update, componen...
VUE之全局API 自定义指令directive & extend 扩展实例构造器
weixin_45492145的博客
11-04 461
全局API （1）什么是全局API？ 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive 通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。 （2）常用vue 的全局 API列表 1、Vue.directive 自定义指令 2、Vue.extend 扩展实例构造器 3、全局操作V...
vue自定义指令的注册方法(Vue全局API之Vue.directive)
庚中
03-20 7189
1.全局注册 在vue实例前写,如: Vue.directive('focus',{ inserted:function(el){ el.focus()//添加焦点事件,也可以给dom元素添加其它,比如input标签中用到el.value='请输入内容' } }) 注意:全局注册是没有directive是没有s,局部注册是有s. 2.局部注册 在vue实例里面写,如: directive...
详解Vue.directive 自定义指令
10-17
Vue.directive 是 Vue.js 框架中用于创建自定义指令的全局 API。自定义指令允许开发者扩展 Vue 的基础功能，实现一些特定的 DOM 操作或复杂行为。下面我们将深入探讨这个话题。 首先，我们要理解什么是全局 API。...
Vue高级API - directives 自定义指令
JavaAlliance
08-28 920
背景 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 从一个输入框自动聚焦的案例入手： 正常情况下，考虑复用性，自定义一个指令我们希望能给全局使用，因此选择全局注册 Vue.directive('foc......
【深入vue3 之 directive 指令的使用与讲解】
热门推荐
从今年开始写写博客~~
01-26 2万+
自定义全局指令：实例app.directive() 参数： {string} name {Function | Object} [definition] 返回值： 如果传入 definition 参数，则返回应用实例。 如果不传入 definition 参数，则返回指令定义。 用法： 注册或检索全局指令。 自定义指令概念： 在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 自定义指令是vue提供给我们用原生DOM封装一系
vue 注册或获取全局指令directive
01-07
注册方法 Vue.directive(‘my-directive’, { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) {{msg}} 更新 ```import Vue from 'vue'; Vue.directive(loading,{ update(el,binding,vnode){ if(binding.value){ co
Vue---自定义指令directive的全局注册和局部注册（含vue3）
COCOLI_BK的博客
10-14 3985
实现自动获取焦点(autofocus) // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) directives(局部组件自定义事件属性) 注意focus处的字段名要是事件名，而非自定义的名字 directives: { focus: { // 指令的定义 bind..
Vue3自定义指令（directive）
smz的博客
09-12 2461
此文章主要讲了vue3中自定义指令的使用，以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用。
Vue3自定义指令directives介绍
前端打工人的博客
10-10 1515
Vue内置的一系列指令 ，比如v-modelv-showv-ifv-for等等，自定义指令从命名上看主要区别于Vue自带的内置指令，我们可以创建自己想要的指令，使用必须以v-为前缀created：在绑定元素的 attribute 或事件监听器被应用之前调用；：当指令第一次绑定到元素并且在挂载父组件之前调用；mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里；：在更新包含组件的 VNode 之前调用；updated。
vue3从精通到入门21：自定义指令directive
qq_40358970的博客
04-11 1236
自定义指令directive是一种扩展HTML标签能力的机制。通过自定义指令，开发者可以直接在模板中使用指令名，并为其提供相应的逻辑。这些指令在Vue应用程序中扮演着重要角色，允许开发者执行一些低级DOM操作或访问元素状态
Vue3 - 全局指令（详细教程）
王佳斌
11-18 2958
vue3.js官方文档，vue3全局指令，vue3全局指令官方文档，vue3全局自定义指令，Vue3全局指令，Vue3.x教程-Vue3，Vue3自定义指令，vue3中全局和局部自定义指令怎样实现，vue3自定义全局指令，vue3封装全局指令，vue3 学习笔记 (三)——vue3 自定义指令，Vue3 中自定义指令，Vue全局指令:如何添加全局指令，Vue3-巧用指令，Vue自定义指令的使用详细介绍，Vue3 - 全局指令（详细教程）。
VueJS----[全局API-2.1]----Vue.directive 自定义指令
_cheny
07-25 851
Vue.directive 自定义指令 1.什么是全局API 全局API并不在构造器里，而是先声明全局变量或者在Vue上定义一些新的功能，vue内置了一些全局API，比如今天要说的Vue.directive，简单的来说就是在构造器外部用Vue提供给我们的 API函数来定义新的功能. 2.Vue.directive自定义指令 在上几篇文章中学习的 主要是Vue 的内部指令，我们也可以定义...
vue 全局注册img自定义指令引入axios
05-05
可以通过以下方式，实现在 Vue 中全局注册 img 自定义指令并引入 axios： 1. 创建一个 Vue 自定义指令： ```javascript // main.js import Vue from 'vue' import axios from 'axios' Vue.directive('img', { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值