??? ?? ??? ?? ?? ?? ??, ?? ??, ??? ????? ?? ?? DOM? ?? ???? ?????? ????? ?????. ???? ?????? ??? ?????. 1. ?? ??? ???? ??? ? ?? ?. 2. ?? ?? ??? ????? ???????. 3. ????? ?? ????? ???? ??; 4. ?? ?? ?????. ?? ? ? ? ?? ?? ??? ?? ? ? ??? ????? ???? ??? ?? ? ???????. ?? ??, ?? ?? v- ??? ??? ??? ?? ??? ????? ??? ?? ? ? ????. ??? ??? ?? ??? ?? ??? ?????? ??? ???? ??? ???? ? ?? ??? ??? ???? ???? ?? ?? ??? ????? ??????.

?? ?? : Vue? ??? ?? ??? ?? ?????? ?? ???? ?????. ?? ??, ?? ?? ?????, ??? ???? ?? ?? DOM?? ??? ??? ?? ? ? ????.? ??? ???? ?? ?? VUE ??? ?? ???? ???? ???? ??? ???? ?????.

?? ???? ??? ?? ??? ???? ?? ??????

Vue? ???? ? ?? ? ???? ???? ?? ????? ?? ? ?? ????? ?? ??????? ??? DOM? ?? ???????. ?? ?? ??? ?????.

???? ?? ?????? ??? ?????.

• ?? ??? ???? ??? ? ?? ?
• ?? ?? ?? (? : ?? ???? ?? ????? ?? ???)
• ??? ?? ?? ????? ???? ??????
• ?? ?? ????? (??? ??? ? ??? ??? ??? ? ????)

??? DOM? ??? ??? ???? ?? ?? ???? ???? ? ???? ?? ?? ??? ?? ???? ????? ?? ??? ? ????.

?? ??? ??? ??? ??? ??????

VUE?? ??? ?? ???? ??? ?? ???? ? ?? ?? ??? ?? ? ? ????.

??? ?? ? :

 vue.directive ( 'Focus', {
  ?? : ?? (el) {
    el.focus ()
  }
})

?? ?? ??? ?? ????? ??????.

 <?? v-focus />

?? ??? ? :

directives ??? ?? ?? ?? ??? ??????.

 ???? ??? {
  ?? : {
    ????: {
      ?? (el) {
        el.focus ()
      }
    }
  }
}

? ????? ?? ?? ??? ??? ? ????.

• bind : ? ?? ????, ??? ??? ?? ???? ? ?????.
• inserted : ??? ??? ?? ??? ?? ? ? ??
• update : ?? ??? ???? ? ? ?????? ?? ?? ??? ?????? ???
• componentUpdated : ?? ??? ?? ?? ??? ?? ???? ? ? ??
• unbind : ??? ??? ??? ? ??

????? ?? ????? ???? ?? inserted ? update .

???? ?? ?????? : ?? ?? ??? ??????

???? ?? ??? ??? ???? ?? ??? ?? ??? ? ??? ?? ? ? ????.

??? ??? ?? ?? ??? ?? ???? ??? ???? ?? v-permission ??? ??? ? ????.

 vue.directive ( '??', {
  bind (el, binding) {
    const {value} = ???
    const existions = [ 'admin', 'editor'] // ??? ???? ?? ??? ????? ?????.
      const haspermission = value.some (?? => ??.
      if (! haspermission) {
        el.parentNode && el.parentNode.removeChild (el)
      }
    }
  }
})

?? ?? :

 <button v-permission = "[ &#39;admin&#39;]"> delete </button>

????? Admin? ?? ????? ??? ?? ?? ????.

?? :? ??? "??? ?? ??"?? ?? ??? ???? ??? ?? ??? ?????.

???? ?? ? ?? ?? ?? ??

• ???? ?? ??? binding.value ?? ?? ? ??? ??? ???, ???, ?? ?? ? ? ????.
• ?? ??? ???? ? ? ???? ??? ?? ???????? update ??? ?? ????? ???????.
• ? ???? ??? ???? ?? ??? ??? inserted ?? ?? DOM? ???? ?? ?????.
• ??? ??? ? el.remove() ?? el.parentNode.removeChild(el) ???? ?? ??? ????? ??????.

????? ?? ??. ??? ?? ??? ??? ???? ?? ???? ??? ????? ?? ?? ?? ???? ???? ? ????. ??? ? ???? ??????? ??? ?? ?? ??? ???? ? ?? ??? ??????.

? ??? Vue Custom Directives Creation Tutorial? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!