Vue.js
Niestandardowe dyrektywy

Składnia

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

Parametry

Podstawy

Oprócz domyślnego zestawu dyrektyw dostarczanych w rdzeniu, Vue.js umożliwia także rejestrowanie dyrektyw niestandardowych. Niestandardowe dyrektywy zapewniają mechanizm mapowania zmian danych na dowolne zachowanie DOM.

Możesz zarejestrować globalną dyrektywę niestandardową za pomocą metody Vue.directive(id, definition) , przekazując identyfikator dyrektywy, a następnie obiekt definicji. Możesz także zarejestrować lokalną dyrektywę niestandardową, włączając ją w opcję directives komponentu.

Funkcje zaczepu

• bind : wywoływany tylko raz, gdy dyrektywa jest najpierw powiązana z elementem.
• aktualizacja : wywoływana po raz pierwszy natychmiast po bind z wartością początkową, a następnie ponownie za każdym razem, gdy zmienia się wartość wiązania Nowa wartość i poprzednia wartość są podane jako argument.
• unbind : wywoływany tylko raz, gdy dyrektywa jest niezwiązana z elementem.

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

Po rejestracji możesz używać go w szablonach Vue.js takich jak ten (pamiętaj, aby dodać przedrostek v- ):

<div v-my-directive="someValue"></div>

Gdy potrzebujesz tylko funkcji update , możesz przekazać jedną funkcję zamiast obiektu definicji:

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

Właściwości wystąpienia dyrektywy

Wszystkie funkcje hak zostaną skopiowane do aktualnej dyrektywy obiektu, który można uzyskać dostęp do tych funkcji wewnątrz ich this kontekście. Obiekt dyrektywy ujawnia kilka użytecznych właściwości:

• el : element związany z dyrektywą.
• vm : kontekst ViewModel, który jest właścicielem tej dyrektywy.
• wyrażenie : wyrażenie wiązania, z wyłączeniem argumentów i filtrów.
• arg : argument, jeśli jest obecny.
• name : nazwa dyrektywy bez prefiksu.
• modyfikatory : obiekt zawierający modyfikatory, jeśli występują.
• deskryptor : obiekt zawierający wynik analizy całej dyrektywy.
• parametry : obiekt zawierający atrybuty parametrów. Wyjaśniono poniżej.

Wszystkie te właściwości należy traktować jako tylko do odczytu i nigdy ich nie modyfikować. Możesz także dołączyć właściwości niestandardowe do obiektu dyrektywy, ale uważaj, aby przypadkowo nie zastąpić istniejących właściwości wewnętrznych.

Przykład niestandardowej dyrektywy wykorzystującej niektóre z tych właściwości:

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

JavaScript

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

Wynik

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

Obiekt dosłowny

Jeśli twoja dyrektywa wymaga wielu wartości, możesz również przekazać literał obiektu JavaScript. Pamiętaj, że dyrektywy mogą przyjmować dowolne prawidłowe wyrażenie JavaScript:

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

JavaScript

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

Dosłowny modyfikator

Gdy dyrektywa jest używana z modyfikatorem dosłownym, jej wartość atrybutu zostanie zinterpretowana jako zwykły ciąg i przekazana bezpośrednio do metody update . Metoda update zostanie również wywołana tylko raz, ponieważ zwykły ciąg znaków nie może być reaktywny.

HTML

<div v-demo.literal="foo bar baz">

JavaScript

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})