Débuter rapidement avec VueJS 2

Pour démarrer très rapidement, créez un fichier HTML index.html dans un sous-répertoire de votre votre installation WAMP, ou si vous n’avez pas WAMP, un répertoire quelconque.Ce qui suit est largement inspiré du site d’origine.

 

Collez le code ci-dessous :

<!DOCTYPE html>
<html>
<head>
  <title>VUE</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>


</body>
<script type="text/javascript">
  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</html>

Ce bout de code attache un modèle de données à un élément HTML ayant pour id= »app ».

Contenu

Les directives

Directive v-bind

Ceux ayant fait du Angular savent que ce sont les directives qui apportent le plus de valeur dans un application Javascript. Nous les retrouvons dans VueJS, pour le moment je vous monte quelque chose de simple car les directives sont très puissantes

<!DOCTYPE html>
<html>
<head>
  <title>VUE</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>


</body>
<script type="text/javascript">
  var app = new Vue({
 el: '#app',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
</script>
</html>

v-bind accepte en entrée des arguments après les deux points. Dans l’exemple ci-dessus l’argument passé est « title », et  a pour valeur « message ». Il existe une version courte de v-bind afin d’alléger la notation dans le cas où il y a beaucoup d’occurences.

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

 

Directive v-if

Cette directive sert à éxécuter quelquechose de façon conditionnelle.

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>


var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Dans l’exemple ci-dessus, si la propriété seen est à true, on affiche le tag <span>

Directive v-for

Cette directive sert à répéter une action (boucle for)

Directive v-on

Elle sert à détecter un événement de type click de la souris. v-on prend également un argument en paramètre. v-on prend aussi une notation raccourcie :

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

 

Directive v-model

Elle sert à lier un model, c’est à dire un objet qui contient des données (ces données pouvant provenir d’une base de données ou toute autre source de données), le binding entre le model et la vue se fait de manière bidirectionnelle. Un changement de la vue impactera le model, et vice versa.

Retour en haut