Test Vue.js

Two Ways data binding

by Sebastien Roy

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>2 Ways data binding démontré dans 5 secondes...</p>
  <ul>
    <li><strong>{{ message }}</strong></li>
    <li><strong>{{ obj.specialAttribute }}</strong></li>
  </ul>
</div>

JavaScript

// Définition d'un objet
var obj = {};
obj.specialAttribute = 'My special attribute value';

// Construction de la vue et de son modèle de données
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    obj: obj
  }
});

// On appelle une fonction qui  modifie le modèle de la vue dans 5 secondes...
setTimeout(function() {
  vm.message = 'Bonjour';
  vm.obj.specialAttribute = vm.obj.specialAttribute + '... <--- Valeur modifiée :-)'
}, 5000);