Comment utiliser des directives personnalisées dans Vue.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('my-directive', { 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('my-directive', 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('demoDirective', {
bind: function () { this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value
}
}); var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})</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: 'white', text: 'hello!'"></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: 'white', text: 'hello!'}"></div>
Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}})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('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'
}
})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('example', { 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('input', this.handler)
}, unbind: function () { this.el.removeEventListener('input', 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('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,
// will execute the "a++" statement in the owner vm'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('my-directive', { 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('my-directive', { // 和普通指令的 API 一致
bind: function () { // 对 this.el 进行操作...
}
})<div v-my-directive></div>
<my-directive></my-directive>
元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment configurer rapidement un avatar personnalisé dans Netflix
Feb 19, 2024 pm 06:33 PM
Un avatar sur Netflix est une représentation visuelle de votre identité de streaming. Les utilisateurs peuvent aller au-delà de l'avatar par défaut pour exprimer leur personnalité. Continuez à lire cet article pour savoir comment définir une photo de profil personnalisée dans l'application Netflix. Comment définir rapidement un avatar personnalisé dans Netflix Dans Netflix, il n'y a pas de fonctionnalité intégrée pour définir une photo de profil. Cependant, vous pouvez le faire en installant l'extension Netflix sur votre navigateur. Tout d’abord, installez une photo de profil personnalisée pour l’extension Netflix sur votre navigateur. Vous pouvez l'acheter dans la boutique Chrome. Après avoir installé l'extension, ouvrez Netflix sur votre navigateur et connectez-vous à votre compte. Accédez à votre profil dans le coin supérieur droit et cliquez sur
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.
Comment personnaliser les paramètres des touches de raccourci dans Eclipse
Jan 28, 2024 am 10:01 AM
Comment personnaliser les paramètres des touches de raccourci dans Eclipse ? En tant que développeur, la maîtrise des touches de raccourci est l'une des clés pour améliorer l'efficacité du codage dans Eclipse. En tant qu'environnement de développement intégré puissant, Eclipse fournit non seulement de nombreuses touches de raccourci par défaut, mais permet également aux utilisateurs de les personnaliser selon leurs propres préférences. Cet article explique comment personnaliser les paramètres des touches de raccourci dans Eclipse et donne des exemples de code spécifiques. Ouvrez Eclipse Tout d'abord, ouvrez Eclipse et entrez
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
Dec 17, 2023 pm 12:09 PM
Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande
Le processus de fonctionnement de la disposition d'écran personnalisée edius
Mar 27, 2024 pm 06:50 PM
1. L'image ci-dessous est la disposition d'écran par défaut d'edius. La disposition par défaut de la fenêtre EDIUS est une disposition horizontale. Par conséquent, dans un environnement à moniteur unique, de nombreuses fenêtres se chevauchent et la fenêtre d'aperçu est en mode fenêtre unique. 2. Vous pouvez activer le [Mode double fenêtre] via la barre de menu [Affichage] pour que la fenêtre d'aperçu affiche simultanément la fenêtre de lecture et la fenêtre d'enregistrement. 3. Vous pouvez restaurer la disposition d'écran par défaut via [Barre de menu Affichage> Disposition des fenêtres> Général]. De plus, vous pouvez également personnaliser la disposition qui vous convient et l'enregistrer comme disposition d'écran couramment utilisée : faites glisser la fenêtre vers une disposition qui vous convient, puis cliquez sur [Affichage > Disposition de la fenêtre > Enregistrer la disposition actuelle > Nouveau], et dans le pop-up [Enregistrer la mise en page actuelle] Mise en page] entrez le nom de la mise en page dans la petite fenêtre et cliquez sur OK
Comment personnaliser l'axe X et l'axe Y dans Excel ? (Comment personnaliser l'échelle des axes Excel)
Mar 14, 2024 pm 02:10 PM
Dans un tableau Excel, vous devrez parfois insérer des axes de coordonnées pour voir l'évolution des données de manière plus intuitive. Certains amis ne savent toujours pas comment insérer les axes de coordonnées dans le tableau. Ensuite, je partagerai avec vous comment personnaliser l'échelle des axes de coordonnées dans Excel. Méthode d'insertion de l'axe des coordonnées : 1. Dans l'interface Excel, sélectionnez les données. 2. Dans l'interface d'insertion, cliquez pour insérer un histogramme ou un histogramme. 3. Dans l'interface développée, sélectionnez le type de graphique. 4. Dans l'interface contextuelle du tableau, cliquez sur Sélectionner les données. 5. Dans l'interface étendue, vous pouvez la personnaliser.
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous
