Vue.js

pour un développeur jQuery

Pascal.Rigaux @ univ-paris1.fr

Tendances Javascript dév

• utilisation de babel ou typescript pour écrire du Javascript récent qui tourne sur des vieux navigateurs
• permet d'utiliser dès maintenant des trucs super : arrow functions, template literals, destructuring, method properties, modules import/export, async/await rest/spread properties,
  NB : ES6 en standard sur la grande majorité des navigateurs (presque plus de Safari 9 ou de IE)
• utilisation de webpack pour bundle/minify/cache-buster
• mais on peut faire sans, notamment pour des petits projets

jQuery

Surcouche aplanissant les différences entre les navigateurs : moins utile depuis que les vieux IE sont morts

• sélecteurs à la CSS, manipulation DOM
  à la main ou moteur de template
• requêtes Ajax
  à la main ou librairie « axios »
• utilitaires (each, map, extend...)
  ES5 pour les Array
  pour le reste librairie « lodash » et/ou ES2018

jQuery - Vue.js

  Afficher
  
Long texte...


<script>  
$('#content').hide();
$('#button').click(function() {
  $('#content').show();
});
</script>

  Afficher
  
Long texte...

        
<script>  
new Vue({
  el: '#app',
  data: { visible: false }
});
</script>

jQuery - Vue.js

  Afficher
  
Long texte...


<script>  
$('#content').hide();
$('#button').click(function() {
  $('#content').toggle();
  $('#button').text(
    $('#content').is(":visible") ? 'Cacher' : 'Afficher'
  );
});    
</script>

    
        {{visible ? 'Cacher' : 'Afficher'}}
    
    
Long texte...

        
<script>  
new Vue({
  el: '#app',
  data: { visible: false }
});
</script>

A la découverte de Vue.js

Éléments de choix

Éléments de choix

Conseils

• les computed properties de Vue.js sont synchrones. Solution, utiliser le plugin vue-async-computed
• attention avec les accès à des propriétés d'objets inconnues, elles ne seront pas réactives