Comment utiliser des directives personnalisées dans Vue.JS-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment utiliser des directives personnalisées dans Vue.JS

php中世界最好的语言

Mar 07, 2018 am 11:50 AM

javascriptvue.js自定义

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中文网其它相关文章！

Article connexe

Frameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AM

La puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.

La relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AM

INTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr

Node.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

See all articles