Custom Directives

 

directives : v-if, v-show, v-model, vi-on 등

 

Vue.directive('rainbow', {

  bind(el, binding, vnode) {

    el.sytle.color = "#" + Math.random().toString().slice(2, 8);

  }

});

 

<h2 v-rainbow>{{ blog.title }}</h2>  ==> 전체가 el

v-rainbow="""에 들어가는 것이 있다면 그것이 binding

 

v-theme:column = "'wide'"

directive: argument = binding

 

Vue.directive('theme', {

  bind(el, binding, vnode) {

    if(binding.value == 'wide') {

      el.style.maxWidth = "1200px";

    } else if (binding.value == 'narrow') {

      el.style.maxWidth = "560px"

    }

    if(bingidng.arg == 'column') {

      el.style.background = '#ddd';

      el.style.padding = '20px';

    }

  }

});