Différences

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

--- web:javascript:vuejs [2017/05/26 18:14] – [Filtres et mixins] 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 filtres sont utilisés pour transformer les données affichées.
+Les [[http://vuejs.org/v2/guide/syntax.html#Filters|filtres]] sont utilisés pour transformer les données affichées.
@@ Ligne 555: / Ligne 555: @@
 <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.