Maison > Article > interface Web > Comment utiliser des directives personnalisées dans Vue.JS

Comment utiliser des directives personnalisées dans Vue.JS

php中世界最好的语言original: 2018-03-07 11:50:331623parcourir

Cette fois, je vais vous montrer comment utiliser les instructions personnalisées de Vue.JS. Quelles sont les précautions lors de l'utilisation des instructions personnalisées de Vue.JS. Voici des cas pratiques, jetons un coup d'œil.

Vue.js vous permet d'enregistrer des directives personnalisées, vous permettant essentiellement d'enseigner à Vue quelques nouvelles astuces : comment mapper les modifications de données au comportement du DOM. Vous pouvez utiliser la méthode Vue.directive(id, definition) pour enregistrer une directive personnalisée globale en transmettant l'identifiant de la directive et l'objet de définition. Définir l'objet nécessite de fournir quelques fonctions hook (toutes facultatives) :

bind : appelée une seule fois, lorsque l'instruction lie l'élément pour la première fois.

mise à jour : la première fois qu'il est appelé immédiatement après la liaison, le paramètre obtenu est la valeur initiale de la liaison ; à l'avenir, il sera appelé à chaque fois que la valeur liée change, et à la fois la nouvelle valeur et la les anciennes valeurs sont obtenues.

unbind : Appelé une seule fois, lorsque l'instruction dissocie l'élément.

Exemple :

Vue.directive(&#39;my-directive&#39;, {  bind: function () {    // 做绑定的准备工作
    // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
  },  update: function (newValue, oldValue) {    // 根据获得的新值执行对应的更新
    // 对于初始值也会被调用一次
  },  unbind: function () {    // 做清理工作
    // 比如移除在 bind() 中添加的事件监听器
  }
})

Une fois la directive personnalisée enregistrée, vous pouvez l'utiliser dans le modèle Vue.js comme ceci (vous devez ajouter le préfixe de directive Vue.js, la valeur par défaut est v-) :

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

Si vous n'avez besoin que de la fonction de mise à jour, vous pouvez simplement transmettre une fonction à la place de l'objet de définition :

Vue.directive(&#39;my-directive&#39;, function (value) {  // 这个函数会被作为 update() 函数使用})

Toutes les fonctions de hook seront copiées dans l'objet de commande réel, et cet objet de commande sera le contexte this
de toutes les fonctions hook. Certaines propriétés publiques utiles sont exposées sur l'objet directive :

el : l'élément auquel la directive est liée
vm : le contexte ViewModel qui possède la directive
expression : l'expression de la directive , excluant les paramètres et les filtres
arg : paramètres de la commande
raw : expression brute non analysée
name : nom de la commande sans préfixe

Ces propriétés sont en lecture seule, ne les modifiez pas. Vous pouvez également attacher des propriétés personnalisées à l'objet directive, mais veillez à ne pas écraser les propriétés internes existantes.

Exemple d'utilisation des attributs d'objet directive :

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
    Vue.directive(&#39;demoDirective&#39;, {
        bind: function () {            this.el.style.color = &#39;#fff&#39;
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {            this.el.innerHTML =                    &#39;name - &#39;       + this.name + &#39;<br>&#39; +                    &#39;raw - &#39;        + this.raw + &#39;<br>&#39; +                    &#39;expression - &#39; + this.expression + &#39;<br>&#39; +                    &#39;argument - &#39;   + this.arg + &#39;<br>&#39; +                    &#39;value - &#39;      + value
        }
    });    var demo = new Vue({
        el: &#39;#demo&#39;,
        data: {
            msg: &#39;hello!&#39;
        }
    })</script></body></html>

Clauses multiples

Au sein du même attribut, plusieurs clauses séparées par des virgules seront liées comme plusieurs instances de directive. Dans l'exemple suivant, la directive est créée et appelée deux fois :

<div v-demo="color: &#39;white&#39;, text: &#39;hello!&#39;"></div>

Si vous souhaitez utiliser une seule instance de directive pour gérer plusieurs paramètres, vous pouvez utiliser des objets littéraux comme expressions :

<div v-demo="{color: &#39;white&#39;, text: &#39;hello!&#39;}"></div>
Vue.directive(&#39;demo&#39;, function (value) {  console.log(value) // Object {color: &#39;white&#39;, text: &#39;hello!&#39;}})

Directive littérale

Si isLiteral: true est passé lors de la création d'une directive personnalisée, la valeur de l'attribut sera traitée comme une chaîne directe et affectée à l'expression de la directive. Les instructions littérales ne tentent pas d’établir une surveillance des données.
Exemple :

<div v-literal-dir="foo"></div>
Vue.directive(&#39;literal-dir&#39;, {  isLiteral: true,  bind: function () {    console.log(this.expression) // &#39;foo&#39;
  }
})

Directive littérale dynamique

Cependant, dans le cas où la directive littérale contient la balise Moustache, la directive se comporte comme suit :

La L'instance de directive aura un attribut An, this._isDynamicLiteral est défini sur true

Si aucune fonction de mise à jour n'est fournie, l'expression Moustache ne sera évaluée qu'une seule fois et la valeur sera attribuée à this.expression. Aucune surveillance des données n'est effectuée sur l'expression.

Si la fonction de mise à jour est fournie, l'instruction établira une surveillance des données pour l'expression et appellera la mise à jour lorsque le résultat du calcul change.

Directive bidirectionnelle

Si votre directive souhaite réécrire des données dans l'instance Vue, vous devez passer twoWay: true . Cette option permet d'utiliser this.set(value) dans les directives.

Vue.directive(&#39;example&#39;, {  twoWay: true,  bind: function () {    this.handler = function () {      // 把数据写回 vm
      // 如果指令这样绑定 v-example="a.b.c",
      // 这里将会给 `vm.a.b.c` 赋值
      this.set(this.el.value)
    }.bind(this)    this.el.addEventListener(&#39;input&#39;, this.handler)
  },  unbind: function () {    this.el.removeEventListener(&#39;input&#39;, this.handler)
  }
})

Déclaration en ligne

Le passage de acceptStatement: true peut faire en sorte que la directive personnalisée accepte les déclarations en ligne comme v-on :

<div v-my-directive="a++"></div>
Vue.directive(&#39;my-directive&#39;, {  acceptStatement: true,  update: function (fn) {    // the passed in value is a function which when called,
    // will execute the "a++" statement in the owner vm&#39;s
    // scope.
  }
})

Mais soyez prudent, utilisez ceci présentez judicieusement car nous voulons généralement éviter les effets secondaires dans les modèles.

Observation approfondie des données

Si vous souhaitez utiliser une instruction personnalisée sur un objet et déclencher la fonction de mise à jour de l'instruction lorsque les propriétés imbriquées à l'intérieur de l'objet changent, alors vous devez Pass deep: true in la définition de la directive.

<div v-my-directive="obj"></div>
Vue.directive(&#39;my-directive&#39;, {  deep: true,  update: function (obj) {    // 当 obj 内部嵌套的属性变化时也会调用此函数
  }
})

Priorité de la commande

Vous pouvez éventuellement fournir un numéro de priorité pour la commande (la valeur par défaut est 0). Les instructions ayant une priorité plus élevée sur le même élément seront traitées plus tôt que les autres instructions. Les instructions ayant la même priorité seront traitées dans l'ordre dans lequel elles apparaissent dans la liste des attributs d'élément, mais il n'y a aucune garantie que cet ordre soit cohérent dans les différents navigateurs.

De manière générale, en tant qu'utilisateur, vous n'avez pas besoin de vous soucier de la priorité des instructions intégrées. Si vous êtes intéressé, vous pouvez vous référer au code source. Les instructions de contrôle logiques v-repeat et v-if sont considérées comme des « instructions de terminal » et elles ont toujours la priorité la plus élevée lors du processus de compilation.

Directives d'élément

Parfois, nous pouvons souhaiter que nos directives soient disponibles en tant qu'élément personnalisé, plutôt qu'en tant que fonctionnalité. Ceci est très similaire au concept des directives de type E d'Angular. La directive element peut être considérée comme un composant léger auto-défini (sera discuté plus tard). Vous pouvez enregistrer une commande d'élément personnalisé comme suit :

Vue.elementDirective(&#39;my-directive&#39;, {  // 和普通指令的 API 一致
  bind: function () {    // 对 this.el 进行操作...
  }
})

Lors de son utilisation, on ne l'écrit plus comme ceci :

<div v-my-directive></div>

mais on écrit plutôt :

<my-directive></my-directive>

元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus