Директивы VueJS. Создание и работа со своей директивой

Создание своей директивы

Для создания директивы создаем файл js с содержанием:

color.js

/* jshint ignore:start */
export default {

}

В main.js импортируем директиву

main.js

import Vue from 'vue'
import App from './App.vue'
import ColorDerective from "./color"

Vue.directive ("colored", ColorDerective)

new Vue({
  el: '#app',
  render: h => h(App)
})

Взаимодействие с элементом

Прежде напишем код, который будет выполнять наша директива. Для этого в js директивы напишем специальную функцию bind.

color.js

/* jshint ignore:start */
export default {
  bind(el, bindings, vnode) {
    el.style.color = "red"
  }
}

Тепрь, так как нашу директиву мы уже проинициализировали, все что нам нужно сделать, это указать директиву во app.vue или каком либо элементе. 

app.vue

<template>
  <div v-colored>
    {{ title }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  }
}
</script>

<style></style>

Жизненный цикл директивы 

Жизненный цикл состоит из следующих функций:

• bind - создание директивы,
• inserted - директива создалась,
• update - обновление директивы при изменении DOM дерева,
• componentUpdated - обновление компонента,
• unbind - удаление.

Для большей наглядности опудликую код, который поможет проследить все жизненные циклы директивы.

color.js

/* jshint ignore:start */
export default {
  bind(el, bindings, vnode) {
    el.style.color = "red"
    console.log("bind")
  },
  inserted(el, bindings, vnode) {
    console.log("inserted")
  },
  update(el, bindings, vnode, oldVnode) {
    console.log("update")
  },
  componentUpdated(el, bindings, vnode, oldVnode) {
    console.log("componentUpdated")
  },
  unbind() {
    console.log("unbind")
  }
}

app.vue

<template>
  <div>
    <h2 v-colored v-if="visible">{{ title }}</h2>

    <button @click="visible = !visible">Toggle</button>
    <button @click="title = 'New Title'">New Title</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue",
      visible: true
    }
  }
}
</script>

<style></style>

Параметры в директивах

Параметры в директиву передаются с помощью bindings.value. Приведем пример:

main.js

/* jshint ignore:start */
import Vue from 'vue'
import App from './App.vue'
import ColorDerective from "./color"

Vue.directive ("colored", ColorDerective)

new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue

<template>
  <div>
    <h2 v-colored="'green'">{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  }
}
</script>

<style></style>

color.js

/* jshint ignore:start */
export default {
  bind(el, bindings, vnode) {
    // el.style.color = "red"
    el.style.color = bindings.value
  }
}

Аргументы в директивах 

Приведу пример.

app.vue

<template>
  <div>
    <h2 v-colored:background="'green'">{{ title }}</h2>
    <h2 v-colored:color="'green'">{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  }
}
</script>

<style></style>

color.js

/* jshint ignore:start */
export default {
  bind(el, bindings, vnode) {
    //el.style.color = "red"
    //el.style.color = bindings.value
    const arg = bindings.arg
    el.style[arg] = bindings.value
  }
}

Модификаторы

Приведу пример:

app.vue

<template>
  <div>
    <h2 v-colored:background.font="'green'">{{ title }}</h2>
    <h2 v-colored:color.delay.font="'red'">{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  }
}
</script>

<style></style>

color.js

/* jshint ignore:start */
export default {
  bind(el, bindings, vnode) {
    const fontModifier = bindings.modifiers["font"]
    if (fontModifier) {
      el.style.fontSize = "30px"
    }

    const delayModifier = bindings.modifiers["delay"]
    let delay = 0
    if (delayModifier) {
      delay = 3000
    }
    setTimeout(()=> {
      const arg = bindings.arg
      el.style[arg] = bindings.value
    }, delay)
  }
}

Локальная регистрация

Директивы можно подключать не только глобально как в примерах выше, но и локально, как в примере ниже.

app.vue

<template>
  <div>
    <h2 v-colored:background.font="'green'">{{ title }}</h2>
    <h2 v-colored:color.delay.font="'red'">{{ title }}</h2>

    <h2 v-font>Local Directive</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  },
  directives: {
    font: {
      bind(el, bindings, vnode) {
        el.style.fontSize = "50px"
      }
    }
  }
}
</script>

<style></style>