Formation de base VueJs OFFERTE

Félicitation, vous avez décidé d’évoluer et d’apprendre l’un des derniers framework Javascript du moment : VueJs.

Je vous offre cette formation de base grâce à laquelle vous pourrez découvrir comment installer et utiliser les bases de VueJs.

N’oubliez pas que les choses s’apprennent étape par étape alors regardez les vidéos l’une après l’autre pour ne rien manquer. Je vous souhaite une bonne formation.

1. Introduction

2. Environnement de développement

Liens pour l’environnement de développement :

• Visual Studio Code : https://code.visualstudio.com/download
• NodeJs : https://nodejs.org/en/download/

Vue-Cli :

• Site Web : https://cli.vuejs.org/
• Commande pour l’installer : npm install -g @vue/cli

3. Le binding dans VueJs

CDN VueJS:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

4. Boucles et affichage conditionnel

Voici les 3 images utilisées dans l’exemple de la vidéo :

• Unkown
• Mr
• Mme

5. Les composants

6. La validation des formulaires

Sans librairie

Regex pour les mails :

var regex = /(^$|^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$)/;

Validation avec Vuelidate

Vuelidate :

• Site Web : https://vuelidate.js.org/
• Commande pour l’installer : npm install vuelidate –save

Validation avec Vee-Validate

Vee-validate :

• Site Web : https://logaretm.github.io/vee-validate/
• Commande pour l’installer : npm install vee-validate –save

7. Les traductions avec i18n

Vue i18n :

• Site Web : https://kazupon.github.io/vue-i18n/
• Commande pour l’installer : npm install vue-i18n
• Article du site parlant de i18n : https://developpement-web-facile.com/traduire-son-site-vuejs-pour-le-rendre-multi-lingue
• Code pour utiliser des fichiers json de traductions :

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}