Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:vuejs [2017/05/23 18:13] – [Directives] sgariepy
+++ web:javascript:vuejs [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 423: / Ligne 423: @@
 ====== Créer et utiliser des directives ======
+Dans le fichier ''main.js'', on peut enregistrer des directives globalement:
+<code javascript>
+Vue.directive('highlight');
+</code>
+===== Hooks =====
+  * bind(el, binding, vnode), quand la directive est attachée
+  * inserted(el, binding, vnode), quand la directive est insérée dans le node parent
+  * update(el, binding, vnode, oldVnode), Quand le component est mis à jour (sans enfants)
+  * componentUpdated(el, binding, vnode, oldVnode), Quand le component est mis à jour (avec enfants)
+  * unbind(el, binding, vnode), quand la directive est enlevée
+===== Créer une directive =====
+Utilisation d'une directive avec un argument.
+<code javascript>
+Vue.directive('highlight', {
+    bind(el, binding, vnode) {
+        if (binding.arg === 'background') {
+            el.style.backgroundColor = binding.value;
+        } else {
+            el.style.color = binding.value;
+        }
+    }
+});
+</code>
+<code html>
+<p v-highlight:background="'red'">Color this</p>  <!-- Aura un fond rouge -->
+<p v-highlight="'red'">Color this</p>  <!-- Aura un texte rouge -->
+</code>
+===== Modifiers =====
+Dans le tableau ''binding.modifiers'' on a les modifiers.  Si on veut un modifier ''delayed'':
+<code html>
+<p v-highlight:background.delayed="'red'">Color this</p>
+</code>
+<code javascript>
+Vue.directive('highlight', {
+    bind(el, binding, vnode) {
+        let delay = 0;
+        if (binding.modifiers['delayed']) {
+            delay = 3000;
+        }
+        setTimeout(() => {
+            if (binding.arg === 'background') {
+                el.style.backgroundColor = binding.value;
+            } else {
+                el.style.color = binding.value;
+            }
+        }, delay);
+    }
+});
+</code>
+===== Directive locale =====
+Dans le ''export default {}'', on peut spécifier ''directives''.
+<code javascript>
+export default {
+    directives: {
+        'local-highlight': {
+            bind(el, binding, vnode) {
+                // code
+            }
+        }
+    }
+}
+</code>
+===== Passer des valeurs complexes =====
+On peut faire ceci:
+<code html>
+<p v-local-highlight:background.delayed.blink="{mainColor: 'red', secondColor: 'blue', delay: 500}" >Color this</p>
+</code>
+Dans le code, après on peut référer à ces valeurs via ''binding.value.mainColor'', ''binding.value.secondColor'' ou ''binding.value.delay''.
+====== Filtres et mixins ======
+Les [[http://vuejs.org/v2/guide/syntax.html#Filters|filtres]] sont utilisés pour transformer les données affichées.
+Globalement on fait:
+<code javascript>
+Vue.filter('to-lowercase', (value) => {
+    return value.toLowerCase();
+});
+</code>
+Localement:
+<code javascript>
+export default {
+    data() {
+        return {
+            text: 'Hello World!'
+        }
+    },
+    filters: {
+        toUppercase(value) {
+            return value.toUpperCase();
+        }
+    }
+}
+</code>
+<code html>
+<p>{{ text | toUppercase | to-lowercase }}</p>
+</code>
+Pour des raisons de performance, il est parfois mieux d'utiliser des [[#proprietes_calculees|propriétés calculées]].
+====== Propriétés calculées ======
+Les propriétés calculées (//computed properties//) servent souvent à obtenir une autre propriété (d'un composant) sans affecter la //vraie// propriété.
+Par exemple, si on a une liste de fruits dans un tableau:
+<code javascript>
+export default {
+    data() {
+        return {
+            fruits: ['Apple', 'Banana', 'Mango', 'Melon'],
+            filterText: ''
+        }
+    }
+}
+</code>
+On peut ajouter une propriété calculée:
+<code javascript>
+export default {
+    // ..
+    computed: {
+        filteredFruits() {
+            return this.fruits.filter((fruit) => {
+              return fruit.match(this.filterText);
+            });
+        }
+    }
+}
+</code>
+====== Mixins ======
+Les [[http://vuejs.org/v2/guide/mixins.html|mixins]] sont du code qu'on voudrait réutiliser à plusieurs endroits.