码迷,mamicode.com
首页 > Windows程序 > 详细

Vue API(directives) 自定义指令

时间:2018-11-10 15:32:29      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:引用   它的   www.   export   script   nbsp   exp   dir   image   

前言:除了vue的内置指令以外,我们可以定义自定义指令。内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html

我们定义一个最简单的

<script>
export default {
  name: ‘App‘,
  data(){
    return{
      yanse:‘red‘
    }
  },
  // 所有自定义指令
  directives:{
    zzh(el,binding){
      console.log(el);
      console.log(binding);
      el.style=‘color:‘+binding.value;
    }
  }
}
</script>

 我们在这里定义了一个指令,用于改变字体的颜色,我们如何去调用我们自定义的指令,实际上你就可以当作是内置指令一样去调用它了!

 技术分享图片

给zzh绑定的值一定要是 具体的数据/state/computed,不可以直接绑定值。

其中el是绑定的这个dom,而binding里是一些源数据

技术分享图片

 其中呢,我们不光可以去指定它的style,能干的事情还有很多,我们再去指定一下它的className,为了演示效果,我们引用一下animate.css,在main.js全局注册一下就好.

fadeInDown(el){
      el.className = ‘animated fadeInDown‘;
 }

 在dom标签上写上classname就ok了。

 

Vue API(directives) 自定义指令

标签:引用   它的   www.   export   script   nbsp   exp   dir   image   

原文地址:https://www.cnblogs.com/ZaraNet/p/9939035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!