美文网首页
Vue自定义指令的运用

Vue自定义指令的运用

作者: 里昂的凍檸茶 | 来源:发表于2019-06-14 11:09 被阅读0次

-Vue的指令以v-开头,除了官方的指令,有时候我们想要自己全局设定一些自定义指令,方便全局运用。

Vue.directive('name',{
   inserted:function(el){
       el.focus();           
   }
})
钩子函数
Vue.directive('name',{
   bind:function(el){
       el.style.color = "red";           
   }
})
简写模式

-在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

Vue.directive("fontsize",function(el,binding){
    console.log(typeof(binding.value),binding);
    el.style.fontSize = binding.value + "px";
})
自定义指令可以配合data变量,进而形成动态的样式
 <div v-fontsize='fs'>一起摇摆</div>
-在脚手架中如何引用自定义指令?

1.建一个js文件
2.在里面定义指令以及函数

import Vue from 'vue'

Vue.directive('focus',{
    inserted:function(el){
        console.log(1);
        el.focus();
    }
})
Vue.directive('title',{
    bind:function(el){
        el.style.color = "blue";
        el.classList.add("animated", "bounceInRight");
    },
    inserted:function(el){

    }
})
Vue.directive("fontsize",function(el,binding){
    console.log(typeof(binding.value),binding);
    el.style.fontSize = binding.value + "px";
})

3.在main.js引入js文件,就可以在全局使用自定义指令了。

相关文章

  • season2-全局API

    第1节:Vue.directive 自定义指令 Vue.directive自定义指令 自定义的指令:changec...

  • Vue div节点滚动事件-加载更多

    使用Vue.directive注册全局指令 绑定事件 对于Vue自定义指令不明白的同学请移步: Vue自定义指令 ...

  • VUE-2:自定义指令、事件

    directive自定义指令 我们还可以通过`Vue`提供的directive方法来自定义指令 注册指令 `vue...

  • Vue自定义指令的运用

    -Vue的指令以v-开头,除了官方的指令,有时候我们想要自己全局设定一些自定义指令,方便全局运用。 简写模式 -在...

  • vue入门6---vue基本指令、自定义指令、插件

    一、vue常用指令概览 二、vue自定义指令 注册全局指令Vue.directive('my-directive'...

  • vue自定义指令初探

    vue自定义指令初探 一、什么是自定义指令 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非...

  • vue 有自定义指令

    vue 的自定义指令,分为全局自定义指令和局部自定义指令,局部自定义指令等价于局部组件。 自定义指令可以对DOM进...

  • vue自定义指令

    除了内置的指令外,Vue 也允许注册自定义指令。 vue用Vue.directive(id,definition)...

  • vue知识集锦(三)

    自定义指令 除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。尽管Vue...

  • Vue指令钩子函数

    Vue指令上篇文章有讲过了,现在分析Vue指令钩子函数。 自定义指令 全局定义:Vue.directive( ' ...

网友评论

      本文标题:Vue自定义指令的运用

      本文链接:https://www.haomeiwen.com/subject/hkfcfctx.html