Vue中自定义指令的使用方法!

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:(咳咳,借官网的用一用)

1、定义全局的自定义变量

main.js

Vue.directive(‘color‘,{
  inserted(el){
//  各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM
    console.log(el)
    el.style.color = "red"
  }
})

app.vue,这里直接写v-color就可以;

<div >前端伪大叔</div>
<div v-color>前端伪大叔</div>

2、自定义指令中,添加属性;

Vue.directive(‘color‘,{
  bind(el,binding){
    switch(binding.value){
      case ‘red‘:
        el.style.color = ‘red‘
        break;
      case ‘blue‘:
        el.style.color = ‘blue‘
        break;
    }
  }
})

App.vue

<div >前端伪大叔</div>
<div v-color="‘red‘">前端伪大叔</div>
<div v-color="‘blue‘">前端伪大叔</div>

可以通过给自定义的属性,添加属性的方式来修改颜色;当然不仅仅只能修改颜色这么简单,因为el直接获得了DOM,所以你懂得!

3、组件内指令-只有自己组件可以使用

注意:directives是一个对象,里面定义的自定义指令也是对象!

//  template
<div >前端伪大叔</div>
<div v-color>前端伪大叔</div>

//  script
//  这里是对象
 directives:{
//  每个指令都是一个对象
   color:{
     inserted(el){
       el.style.color = ‘cyan‘
     }
   }
 }

4、组件内的自定义指令,增加属性

//  template
<div v-color="‘red‘">前端伪大叔</div>
<div v-color="‘blue‘">前端伪大叔</div>
//  script
//  这里是对象
 directives:{
//  每个指令都是一个对象
   color:{
     bind(el,binding){
       if(binding.value == ‘red‘){
         el.style.color = ‘red‘
       }else if (binding.value = ‘blue‘){
         el.style.color = ‘blue‘
       }
     }
   }
 }

给大家奉上地址:https://cn.vuejs.org/v2/guide/custom-directive.html

如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!

原文地址:https://www.cnblogs.com/webfy/p/11565476.html

时间: 2024-10-13 11:10:37

Vue中自定义指令的使用方法!的相关文章

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

vue怎么自定义指令??

最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserted 被指令绑定指令的元素插入 父节点的时候调用 update 被绑定的元素模版只要发生变化,就会触发(通过比较模板变化前后) componentUpdated 被绑定元素所在模版完成一次更新周期时被触发 unbind 指令被解除绑定的时候 */ /*定义指令回调函数(钩子函数的几个参数的意义)第一个参数:绑定

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

Vue.js自定义指令的用法与实例

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义

最简单的方式理解Vue的自定义指令

vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-arguments-example" v-demo:hello.a.b="message" v-color-swatch="bgColor" ></div> js: Vue.directive('demo', { bind: function (el

Vue.js 自定义指令

自定义指令 除了默认设置的核心指令(如:v-model,v-for),Vue.js也允许注册自定义指令,自定义指令提供一种机制将数据的变化映射为DOM行为 Vue.js用 Vue.directive(id, definition)方法注册一个全局自定义指令,它接收两个参数:指令ID和定义对象.也可以用组建的directives选项注册一个局部自定义指令 例如:聚焦一个 input 元素 <div id="directive-focus">     <input v-f

vue.js自定义指令入门

Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一次,当

vue(2) - 自定义指令

我们都知道v-for.v-html.等等都是指令:扩展html 语法 自定义指令: 属性指令 Vue.deirctive(指令名称,function(){ this.el ==>原生的dom元素 }) <div id="box"> <span v-red>1222</span> </div> <script> Vue.directive('red',function(){ this.el.style.background

Vue中,过滤器的使用方法!

Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的来介绍下,接下来直奔主题) 1.定义全局过滤器!任何组件都能用. main.js中定义全局过滤器 // 定义长度为10的过滤器 Vue.filter('length10',(e) =>{ return e.slice(0,10) + '...' }) // 定义转大小写的过滤器 Vue.filter