Outils pour utilisateurs

Outils du site


web:javascript:vuejs

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
web:javascript:vuejs [2017/05/23 18:10] – [Soumettre le formulaire] sgariepyweb:javascript:vuejs [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 422: Ligne 422:
  
  
-====== Directives ======+====== 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. 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
  
  
web/javascript/vuejs.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1