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

关键词：

Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。

// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, 
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) 
    // 聚焦元素
    el.focus()
  
)

局部指令：

directives: 
  focus: 
    // 指令的定义
    inserted: function (el) 
      el.focus()
    
  


使用：

<input v-focus>

钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

参数：

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • 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 来进行。

例子：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive(‘demo‘, 
  bind: function (el, binding, vnode) 
    var s = JSON.stringify
    el.innerHTML =
      ‘name: ‘       + s(binding.name) + ‘<br>‘ +
      ‘value: ‘      + s(binding.value) + ‘<br>‘ +
      ‘expression: ‘ + s(binding.expression) + ‘<br>‘ +
      ‘argument: ‘   + s(binding.arg) + ‘<br>‘ +
      ‘modifiers: ‘  + s(binding.modifiers) + ‘<br>‘ +
      ‘vnode keys: ‘ + Object.keys(vnode).join(‘, ‘)
  
)

new Vue(
  el: ‘#hook-arguments-example‘,
  data: 
    message: ‘hello!‘
  
)

函数简写：

Vue.directive(‘color-swatch‘, function (el, binding) 
  el.style.backgroundColor = binding.value
)

对象字面量

<div v-demo=" color: ‘white‘, text: ‘hello!‘ "></div>

Vue.directive(‘demo‘, function (el, binding) 
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
)

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

在Vue中可以自定义指令，通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供快速解决问题的思路，而且让我们对Vue的底层有了进一步的了解。我们可以通过Vue.directive()或... 查看详情

十自定义指令eslint代码检查工具与axios挂载到vue原型(代码片段)

一、自定义指令1.1、什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。1.2、自定义指令的分类vue中的自定义指令分为两类，分别是：私有自定义指令全局自定义... 查看详情

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

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

vue3的自定义指令(代码片段)

...系列指令(比如v-model或v-show)之外，Vue还允许你注册自定义的指令(CustomDirectives)。1.自定义指令的目的和简单介绍自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩... 查看详情

vue3的自定义指令(代码片段)

...系列指令(比如v-model或v-show)之外，Vue还允许你注册自定义的指令(CustomDirectives)。1.自定义指令的目的和简单介绍自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩... 查看详情

十自定义指令与eslint代码检查工具使用(代码片段)

一、自定义指令1.1、什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。1.2、自定义指令的分类vue中的自定义指令分为两类，分别是：私有自定义指令全局自定义... 查看详情

vue_(组件)自定义指令(代码片段)

  　　Vue.js自定义指令　　传送门  　　自定义指令：除了内置指令，Vue也允许用户自定义指令　　注册指令：通过全局APIVue.directive可以注册自定义指令 　　自定义指令的钩子函数参数：自定义指令的钩子函... 查看详情

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

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

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

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

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

一、自定义指令　　除了默认设置的核心指令(v-model和v-show)，Vue也允许注册自定义指令。　　下面我们注册一个全局指令v-focus，该指令的功能是在页面加载时，元素获得焦点：<divid="app"><p>页面载入时，input元素自动获... 查看详情

vue---自定义指令的使用(代码片段)

在vue开发项目中，指令的使用场景也是比较多的，那么该如何定义使用呢？找到src/directive下新建gender目录，下面新建index.js和gender.js index.jsimportgenderfrom‘./gender‘constinstall=function(Vue)Vue.directive(‘gender‘,gender)if(window.Vue)win 查看详情

vue全局自定义指令input自动获取焦点指令(代码片段)

在main.js中全局注册自定义指令Vue.directive('myfocus',inserted:(el,binding)=>if(binding.value==true||binding.value==undefined)el.focus());使用自定义的自动获取焦点指令//执行<inputv-myfocusv-model 查看详情

vue基础进阶之自定义指令(代码片段)

自定义指令-----钩子函数自定义指令除了内置指令，Vue也允许用户自定义指令； 注册指令：通过全局APIVue.directive可以注册自定义指令；自定义指令的钩子函数：bind；inserted；update；componentUpdated；unbind；自定义指令的使用：... 查看详情

vue自定义指令及动态指令参数(代码片段)

...按钮级别权限控制 v-permission3.代码埋点,根据操作类型定义指令4.input输入框自动获取焦点注意事项注意：  1.自定义指令名称，不能使用驼峰规则，而应该使用"my-dir"或“my_dir”或“mydir”    2... 查看详情

vue2.0和vue3.0中自定义指令（directive）的区别(代码片段)

目录使用自定义指令vue2.0组件中注册全局中注册Vue3.0小坑自定义指令中的参数 vue2.0和vue3.0中的区别其他区别===》 vue2.0和vue3.0中语法的区别自定义指令是什么？类似于vue中的v-for v-if v-model...类似的指令语法，... 查看详情

分享8个非常实用的vue自定义指令(代码片段)

...核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue... 查看详情

vue.directive自定义指令的问题(代码片段)

1.今天复习一下Vue自定义指令的代码，结果出现一个很无语的结果，先贴代码。 2.<divid="example"v-change-by="myColor"></div><scriptsrc="vue.min.js"></script><script>newVue(el:"#example",data:msg:"",myCo 查看详情

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

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content=" 查看详情