Les propriétés sous VueJS

Aujourd'hui on va voir les différents types de propriétés et comment les utiliser. On repartira de notre code vueJS crée dans la leçon précédente.

Les propriétés "réservées" d'une instance vueJS

Lorsqu'on instancie un objet Vue, on peut le mettre dans une variable (qu'on nomera ici "vm"). On peut définir des propriétés pour chaque instances de Vue. Ces propriétés doivent être déclarés dans "data" comme ceci (dans src/main.js):

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
var vm = new Vue({
  el: '#myApplication',
  template: '<App/>',
  components: { App },
  data: {
    attributeA: 'valueA',
    attributeB: 'valueB'
  }
})

// on les affiches
alert(vm.attributeA) // valueA
alert(vm.attributeB) // valueB

Comme vous le voyez une fois instancié, on peut récupérer les valeurs de ces propriétés dans "data" via l'objet "vm".
Par défault, un objet Vue à des propriétés déja définies comme par exemple l'attribut "el" ou l'attribut "data" qui peuvent être accéssible en les préfixant avec un "$".

Exemple:
Rajoutez à la fin du script précédent :

// on les affiches
alert(vm.$data.attributeA); // valueA
alert(vm.$el.id) //myApplication

Définir et afficher une propriété dans un template vueJS

Avec vueJs, vous pouvez afficher la valeur d'une propriété dans un template en la mettant en doubles accolades comme ceci "{{ mavariable }}". Ansi, si on veut afficher la valeur de "prenom" dans le titre, on va éditer notre composant App /src/App.vue comme ceci :

<template>
  <div id="app">
    <h1>Hello World {{ prenom }} </h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          nom: 'Nom',
          prenom: 'Pierre'
        }
    }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Utiliser les propriétés dynamiques

Imaginons que vous vouliez créer une propriété dynamique qui s'appelera "fullname" qui concaténera le nom et le prénom pour faire une seule chaine. Cette propriété dynamique sera en fait comme une fonction, on va lui dire de concaténer le nom avec le prénom. Il est possible de définir une propriété "computed" dans notre objet Vue pour faire ceci, cette propriété vuejs contient toutes les priopriétés dynamiques. On peut accéder à une "data" de notre objet VueJS via "this". Créons donc la propriété "fullname" comme ceci :

<template>
  <div id="app">
    <h1>Hello World {{ fullname }} </h1>
    <p>little text behind the title</p>
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          firstname: 'Pierre',
          lastname: 'Fay'
        }
  },
  computed: {
    fullname: function () {
      return this.firstname + ' ' + this.lastname
    }
  }
}
</script>

Vous allez maintenant voir s'afficher "Hello World Pierre Fay".
Félicitation vous venez de créer votre premiere "computed property" :)
Ici on fait une simple concaténation mais on pourrait imaginer faire un traitement plus complexe, c'est vous qui décidez ce que vous faites dans la fonction.

Voilà vous savez maintenant utiliser les propriétés avec VueJs ! Comme d'habitude n'hésitez pas à télécharger le code de ce tutoriel en dessous de cet article.