正文

vue2.0笔记——自定义指令(代码片段)

author  author  2022-11-04  274

关键词：

自定义指令

自定义指令主要用于，除系统提供外，自己对DOM的底层操作。
例如当页面加载时需要将一个文本框为自动获得焦点。只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。

我们通过全局自定义指令和局部自定义指令来讲解autofouce案例。

全局自定义指令

在全局API中通过Vue.directive( id, [definition] )来注册或获取全局指令。
参数:

id表示自定义的指令名称
definition为自定义指令的定义，一般可以含有几个生命周期钩子函数
bind() 指令第一次绑定到元素上时调用，且只调用一次，可执行初始化操作
inserted() 被绑定元素插入到DOM时调用
update() 被绑定元素所在模板更新时调用
componentUpdated() 被绑定元素所在模板完成一次更新周期时调用
unbind() 指令与元素解绑时调用，只调用一次

bind与inserted在加载页面初始化实例并挂载之后调用
update，componentUpdated 当指令所绑定的元素模板更新时调用
unbind解绑时调用

语法:

// 注册
Vue.directive(‘my-directive‘, 
  bind: function () ,
  inserted: function () ,
  update: function () ,
  componentUpdated: function () ,
  unbind: function () 
)

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () 
  // 这里将会被 `bind` 和 `update` 调用
)

// getter，返回已注册的指令
var myDirective = Vue.directive(‘my-directive‘)

示例:

//el参数为绑定的元素，自动载入
Vue.directive(‘focus‘,
    inserted:function(el)
        console.log(el);
        el.focus();
    
);

<div id="app">
    <input type="text" v-focus>
</div>

2.当然，你也可以使用简单的指令函数。

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () 
  // 这里将会被 `bind` 和 `update` 调用
)

3.我们可以在bind函数中为其添加两个参数，第一个是绑定的元素，第二个是当前自定义指令对象。

Vue.directive(‘focus‘,
    bind(el,binding)
        console.log(binding);
    
);

局部，实例的自定义指令

局部的自定义指令定义在directives选项中，所配置的数据与全局的完全一样。

directives:
    focus:
        inserted(el) //当被绑定元素插入到DOM的时候，进行自动获焦
        el.focus();

focus即为指令名称，使用时直接，v-focus即可。

el参数和binding参数，获得绑定元素与当前指令对象只有在bind函数绑定之后才能得到值。所以inserted，update也是可以的。

vue2.0学习—自定义指令（四十九）(代码片段)

【Vue2.0学习】—自定义指令（四十九）需求：需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦... 查看详情

vue2.0笔记——模板与自定义过滤器(代码片段)

模板语法让我们回到最开始<divid="app"><h1>message</h1></div><script>varvm=newVue(el:‘#app‘,data:message:‘HelloWorld‘)</script>这是一个HelloWorld，简单的通过模板输出。我们称之为数据绑定，而最常见的就是“ 查看详情

vue3.0如何自定义指令(代码片段)

前言本篇博客是基于vue3.0的自定义指令开发教程，（有版本变化会持续更新）其中会列出如何使用以及与vue2.0的自定义指令的对比。一，Vue3.0自定义指令教程demo中，包含一个很简单的一键复制指令,不需要再下... 查看详情

vue3.0如何自定义指令(代码片段)

vue2.0笔记——常用指令(代码片段)

常用指令v-model指令该指令用于数据的双向绑定，即通过inputtext文本框，和Vue进行双向的显示。一般用于表单元素。只需要这样编写挂载目标：<divid="app"><inputtype="text"v-model="message"/><br/>文本框的内容为:message</div>... 查看详情

vue自定义指令(代码片段)

Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。//注册一个全局自定义指令`v-focus`Vue.directive(‘focus‘,//当被绑定的元素插入到DOM中时……inserted:function(el)//聚焦元素el.focus()) 局部指令：directiv... 查看详情

vue2.0笔记——组件(代码片段)

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件是自定义元素，Vue.js的编译器为它添加特殊功能。使用组件组件的注册与使用全局注册我们需要通过一个全局的API来构造。Vue.extend(options)... 查看详情

vue2.xdirective自定义指令

directive自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。注意，在Vue2.0里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令... 查看详情

vue3.0如何自定义指令(代码片段)

vue2.0自定义指令的使用方法

感觉2.0好坑啊，自定义指令和1.0完全不一样，并且文档写得也不太清晰，下面是我写得一个demo,希望帮助大家更好地理解自定义指令<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsr... 查看详情

vue指令(代码片段)

自定义指令简介除了核心功能默认内置的指令(v-model 和 v-show)，Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用... 查看详情

vue2.0-自定义指令vue-directive

...M。。binding: 一个对象，包含指令的很多信息。　　自定义指令有五个生命周期：　　　　》1、bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定查看详情

vue：八种实用的自定义指令(代码片段)

除了核心功能默认内置的指令，Vue也允许注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。示例：... 查看详情

vue2.0学习笔记之自定义组件

stepone: 推荐结构steptwo: Loading.vue<template><h3>{{msg}}</h3></template><script>exportdefault{data(){return{msg:"loading"}}}</script><stylesc 查看详情

vue自定义指令(代码片段)

自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html简介WatchafreevideolessononVueSchool除了核心功能默认内置的指令(v-model 和 v-show)，Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的... 查看详情

vue2.0笔记——属性绑定和class与style绑定(代码片段)

属性绑定通过指令v-bind可以绑定属性,该指令同v-on一样，也有一个简写，“：”冒号。绑定元素的属性，并且可与元素的原属性共存。当原属性有值时则显示原属性的值，无值则使用绑定的值。<divid="app"><img:src="url":width="wi... 查看详情

尚硅谷vue系列教程学习笔记(代码片段)

尚硅谷Vue系列教程学习笔记（5）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共有... 查看详情

vue2.0中v-on绑定自定义事件的理解(代码片段)

...件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。每个Vue实例都实现了【事件接口】，即：1、使用 $on(eventName) 监听事件2、使用 $emit(eventName) 触发事件父组件可以在使用子组件的地方直接... 查看详情