Différences

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

--- web:javascript:vuejs [2017/05/25 18:25] – [Passer des objets] sgariepy
+++ web:javascript:vuejs [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 523: / Ligne 523: @@
 ====== 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.