[JAVA] [Développement SPA avec Rails x Vue] Apprenez les bases de Vue.js (Vue d'ensemble de vue.js, syntaxe du modèle)

Contexte

Mon objectif est de changer d'emploi d'inexpérimenté à ingénieur. J'ai décidé d'étudier le développement SPA en utilisant l'API Rails et vue.js pour créer un bon portefeuille.

Le niveau actuel de connaissances est le développement d'applications simples à l'aide de Ruby on rails, la gestion des versions à l'aide de git et le déploiement à l'aide d'heroku. J'espère que cela sera utile à ceux qui envisagent d'essayer vue.js dans leur propre mémorandum et au même niveau.

Objectifs de cet article

Comprendre les bases de vue et la grammaire de base de vue

【référence】 Cet article concerne le cours d'udemy "Pack complet Super Vue.js 2 - Plus besoin d'acheter d'autres matériaux! (Y compris Vue Router et Vuex) »est le résultat de ce que vous avez appris. Par conséquent, le code, etc. est basé sur le contenu du cours.

【Article associé】 [Développement SPA avec Rails x Vue] Apprenez les bases de Vue.js (Présentation de vue.js / syntaxe du template) [Développement SPA avec Rails x Vue] Apprenez les bases de Vue.js (composant d'instance vue VueCLI) [Développement SPA avec Rails x Vue] Apprenez les bases de Vue.js (transitions de directives personnalisées, etc.) [Développement SPA avec Rails x Vue] En savoir plus sur Vue Router / Vuex

table des matières

1. À propos des tendances JavaScript
2. À propos de Vue.js
3. À propos du SPA
4. À propos de la grammaire de base de Vue.js

Allons vite!

1. À propos des tendances JavaScript

javascript est implémenté dans la plupart des applications Web et est facile à écrire De nos jours, les trois principaux cadres, vue, réaction et angulaire, attirent l'attention. Si vous regardez les tendances, vous pouvez voir que jQuery est en déclin, mais les trois principaux frameworks sont à la hausse.

【référence】 Voir dans la tendance laquelle de Vue.js vs React vs Angular choisir Qu'est-ce que jQuery? Pourquoi ne pas l'utiliser (ou ne pas l'utiliser)?

Cette fois, je voudrais sélectionner vue, qui a un faible coût d'apprentissage et peut être facilement introduit même dans le développement à petite échelle.

2. À propos de Vue.js

En plus de react, vue.js est adopté par de nombreuses entreprises au Japon. Il y a quatre raisons principales pour lesquelles vue.js est adopté par de nombreuses entreprises.

I. Facile à installer et flexible

Par exemple, dans rails 6.0, vous pouvez utiliser vue.js en installant webpacker pour vue.js et en n'écrivant qu'une seule ligne. En d'autres termes, il est possible d'utiliser partiellement vue.js pour les applications de rails, et vue.js peut être principalement développé pour le développement d'API.

Ii. Faible coût d'apprentissage

La fonctionnalité de vue.js est que même les débutants peuvent facilement l'apprendre tant qu'ils comprennent HTML, CSS et javascript. De plus, la formule vue.js prend en charge le japonais, donc si vous avez un problème, vous pouvez généralement le résoudre en regardant la formule.

III. Développement efficace

vue.js facilite l'assemblage des applications en unités appelées composants. Les composants sont comme des pièces qui composent l'interface utilisateur, et en les rendant communs, ils peuvent être utilisés encore et encore.

Iv. Le DOM virtuel, les types crpit, etc. peuvent être utilisés

Le framework javascript devient standard pour utiliser des technologies telles que le DOM virtuel et Typescript. Étant donné que vue.js prend également en charge le DOM virtuel et le typographie, une implémentation plus rapide et plus extensible est possible.

【référence】 (vue.js official) Introduction -Qu'est-ce que vue.js? (vue.js official) Comparaison avec d'autres frameworks

3. À propos du SPA

SPA est une abréviation de «Application à une seule page» et, comme son nom l'indique, c'est une application qui change le contenu sur une seule page. Des exemples spécifiques incluent slack et google map. Les deux vous permettent d'obtenir de nouvelles informations sans transition de pages (en laissant une seule page). SPA est un mécanisme qui a attiré l'attention ces dernières années car le temps de transition des pages est court et l'UX est augmenté.

Vous pouvez facilement créer un SPA en utilisant vue.js.

【référence】 Principes de base du SPA (application à page unique)

4. À propos de la grammaire de base de Vue.js

Vérifions maintenant la grammaire de base de vue.js.

■ À propos des fichiers

Il existe trois types d'installation vue.js: "CDN", "npm" et "vuecli". "CDN" est la méthode décrite dans la balise body de html, "npm" est la méthode d'utilisation du gestionnaire de packages de node.js et "vuecli" est la méthode d'utilisation de la commande vue dans le terminal. Cette fois, j'utiliserai "CDN". Créez le fichier index.html de manière appropriée et décrivez-le comme suit.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
  </div>
  <script>
    new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

• L'intérieur de la balise head est le même que la description html normale. --Dans la description sur la première ligne de la balise body, vue est appelée par CDN. C'est tout ce dont vous avez besoin pour utiliser vue.js. Notez que la balise body contient cet appel. --Pour la balise div, l'id est spécifié par l'application. Il s'agit de déterminer la portée de vue.js qui sera spécifiée ultérieurement.
• La balise de script "new Vue" crée une instance de vue. En termes simples, c'est une déclaration qui utilise vue.js. ―― La partie de "el:" #app "s'appelle la propriété el et décrit où appliquer vue.js. Étant donné que l'id appelé app est spécifié ici, il est spécifié dans la balise div plus tôt.

• À première vue, la partie de la balise div spécifiée par l'id de l'application ressemble à du HTML, mais dans le monde de vue.js, on l'appelle un modèle. Et la syntaxe que vue.js décrit de manière unique dans le modèle est appelée la syntaxe du modèle.

Ce qui précède est la préparation du fichier pour l'utilisation de vue.js. J'expliquerai la grammaire détaillée de la suite, mais j'omettrai tout dans la balise head, la balise body et la partie appel CDN.

■ Appelez la valeur de vue.js

index.html

<div id="app">
　<p>{{message}}</p>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       message: "HelloWorld",
    }
  })
</script>

• Vous pouvez définir la clé et la valeur en déclarant "data:" dans l'instance vue. --La valeur définie dans "data:" peut être appelée entre parenthèses doubles comme {{key}} dans le modèle. --En double parenthèse, il peut être traité comme la syntaxe de javascrpt. Dans ce qui précède, num est plus 3.

■ Appeler une méthode

index.html

<div id="app">
　<p>{{greeting()}}</p>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       message: "HelloWorld",
    },
    methods: {
      greeting: function(){
         return this.message;
      }
    }
  })
</script>

• Vous pouvez définir des méthodes en déclarant des "méthodes" de la même manière que "data:".
• "Greeting" est le nom de la méthode, suivi de la fonction écrite en javascript.
• Ajoutez ceci lors du référencement d'une clé ou d'une valeur dans la même instance, comme "this.message".
• Lors de l'appel d'une méthode dans un modèle, n'oubliez pas le "()" après le nom de la méthode.
  

■v-bind

index.html

<div id="app">
　<a v-bind:href="url"> qiita <a>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       url: "https://qiita.com/"
    }
  })
</script>

--Les choses qui commencent par "v-" sont appelées directives et font référence aux attributs de vue.js qui peuvent être utilisés dans le modèle.

• "V-bind" peut être spécifié pour les attributs HTML et vue.js peut être appelé. Dans ce cas, l'attribut href est spécifié dans "v-bind: href". Et "= url" appelle l'url décrite dans vue.js
• Comme "v-bind" est souvent utilisé, il peut être abrégé en ": href". --Si vous avez écrit l'objet dans vue.js, vous pouvez également appeler l'objet.
  

■v-on

index.html

<div id="app">
　<p>num<p>
  <button v-on:click="countUp"> COUNT UP </button>
</div>

<script>
new Vue({
  el: "#app",
    data: {
       num: 0
    },
    methods: {
      countUp: function() {
          this.num += 1
      }
    }
  })
</script>

• "V-on" spécifie un événement spécifique. Puisqu'il s'agit d'un clic, l'heure à laquelle le clic se produit est spécifiée.
• La méthode est appelée avec "countUp".
• Puisque v-on est aussi souvent utilisé, il peut être abrégé en "@click".

■ Objet / argument d'événement

index.html

<div id="app">
　<p>num<p>
  <button v-on:click="countUp(4)"> COUNT UP </button>
　<p v-on:mousemove="change($event, 3)"> Change 
　　<span v-on:mousemove.stop> No Change </span> <p>
　<P> {{x}}: {{y}}
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       num: 0
    },
    methods: {
      countUp: function(times) {
          this.num += 1 * times
       },
      change: function(event, square) {
          this.x = event.clientX * square
          this.y = event.clientY * square
    }
  })
</script>

--Il est également possible de prendre un argument comme un javascript normal.

• Vous pouvez obtenir l'objet événement avec "fonction (événement)". Plus précisément, cette fois, nous obtenons des informations sur l'axe X et l'axe Y lors de la suppression de la souris. --Utilisez "$ event" si vous souhaitez spécifier un objet événement et utiliser plus d'arguments. --Si vous utilisez ".stop", il ne répondra pas à l'événement spécifié. Dans ce cas, même si vous mettez la souris sur "No Change", elle ne répondra pas. Il existe également un modificateur appelé ".prevent" qui interrompt le traitement des événements.

■v-model

index.html

<div id="app">
　<input type="text" v-model="message">
 <p>{{message}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        message: "hello!"
      }
   })
</script>

• "V-model" est une directive qui permet la liaison bidirectionnelle. La liaison bidirectionnelle consiste simplement à joindre des données. Dans cet exemple, les caractères saisis dans le formulaire de balise d'entrée et le contenu de la balise p sont combinés, et le contenu entré dans l'entrée est immédiatement reflété dans la balise p et la sortie.

■computed

index.html

<div id="app">
　<button @click="count += 1"> COUNT UP </button>
 <p>{{lessThanThree}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        count: 0
      },
    computed: {
      lessThanThree: function() {
        return this.count >= 3 ? "3 ou plus" : "Moins de 3"
     }
  })
</script>

• "Calculé" est une propriété dynamique.
• Alors que "data" spécifie des propriétés liées aux valeurs initiales, "calculé" spécifie les propriétés qui changent. Par conséquent, l'intérieur de «calculé» est défini par une fonction. ――La différence entre «calculé» et «méthode» réside dans la manière de lire le fichier. Alors que "computed" met à jour uniquement la partie spécifiée par la fonction, "method" met à jour tout sauf la partie appropriée. Par conséquent, "calculé" se charge plus rapidement.

■watcher

index.html

<div id="app">
　<button @click="count += 1"> COUNT UP </button>
 <p>{{lessThanThree}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        count: 0
      },
    computed: {
      lessThanThree: function() {
        return this.count >= 3 ? "3 ou plus" : "Moins de 3"
    },
    watch: {
       count: function() {
         var vm = this;
         setTimeout(function(){
           vm.count = 0
         }, 3000)
       }
    }
  })
</script>

―― «Watch» est un processus asynchrone.

• Fondamentalement, vous pouvez utiliser "calculé", mais dans ce cas, par exemple, s'il n'y a pas de partie "{{lessThanThree}}" dans le modèle, une erreur se produira s'il est "calculé". En effet, le calcul est un processus synchrone et il doit y avoir un endroit pour synchroniser.
• L'intérieur de "watch" est écrit à l'aide d'une fonction, mais comme "this" ne peut pas être utilisé dans la description d'un traitement asynchrone, il est nécessaire de l'affecter à une variable.

■ Reliure de style classe

index.html

<div id="app">
　<p :class="classObject"> Hello </p>
　<button @click="Active = !Active"> Change </button>
  <h1 :style="styleObject"> Hello </h1>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        styleobject: {
           color: 'red',
           'background-color': 'blue'
        },
        Active: true
      },
      computed: {
        classObject: function(){
          return{
            red: this.Active, 
            'bg-blue': !this.Active}
        }
      }
  })
</script>

• Lors de la liaison d'une classe ou d'un style, vous pouvez le spécifier en tant qu'objet ou en tant que tableau, comme décrit ci-dessus.
• Vous pouvez changer de style dynamiquement en définissant "Active: true".

■v-if

index.html

<div id="app">
 <template v-if="ok">
   <p>Hello</p>
   <p>Goodbye</p>
 </template>
 <template v-else-if="maybe">
   <p>good morning</p>
   <p>good night</p>
 </template>
 <p v-else="ok"> sorry </p> 
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        ok: true,
        maybe: true
      }
  })
</script>

―― «Template» a presque le même rôle que div, mais la fonctionnalité est que «template» n'est pas affiché lorsque vous l'affichez réellement sur un navigateur.

• "V-if" "v-else-if" "v-else" sont des branches conditionnelles. C'est presque la même chose que le rubis. Cette fois, true et false sont spécifiés dans les données de vue.js.
• En remarque, il existe une directive appelée "v-show" qui joue un rôle similaire. Lorsque "v-if" est faux, la description disparaît complètement du DOM, tandis que "v-show" efface la description en définissant css sur "display: none". "V-if" est plus facile à utiliser, mais "v-show" est plus rapide à charger.

■v-for

index.html

<div id="app">
 <ul>
  <div v-for="fruit in fruits" :key="fruit">
    <p>{{fruit}}</p>
　　<hr>
  </div>
 </ul>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        fruits: ['pomme', 'Les pêches', 'Grain de raisin']
      }
  })
</script>

• "V-for" est un processus itératif. En rubis, c'est chaque méthode. ―― «Fruit in fruits» signifie retirer chaque fruit de la gamme de fruits, l'assigner à fruit et exécuter le processus.
• ": key" spécifie la clé comme son nom l'indique. Lorsque vous utilisez "v-for", définissez également la clé.
• Vous pouvez également prendre un deuxième argument comme "(fruit, clé) dans les fruits".
• Vous pouvez utiliser "v-for" non seulement pour les tableaux mais aussi pour les objets. ――Il est également possible de changer «en» de «fruit dans les fruits» en «de».
• Vous pouvez également entrer une valeur entière telle que "n in 5" (* En ruby, c'est une méthode de "5.x ~")

C'est la fin des bases de la syntaxe des modèles. La prochaine fois, j'écrirai un article sur les instants et les composants de vue. Bien que l'affichage sur le navigateur soit omis, il est recommandé de le vérifier si nécessaire.
# Résumé / impression Je pensais que vue.js devait être intuitif, mais je sentais que comprendre le javascript était très important. Je voudrais donc revoir javascript à nouveau, en particulier comment l'utiliser et comment utiliser les fonctions.

référence

【udemy】 "Pack complet Super Vue.js 2 - Plus besoin d'acheter d'autres matériaux! (Y compris Vue Router et Vuex) » → Recommandé! Cet article est également basé sur ce que j'ai appris dans ce cours. Il explique soigneusement les bases, et comme il touche au développement SPA, cela seul peut couvrir les bases de la vue.

"Vue JS Primer Definitive Edition! Développement Web sans jQuery --- Apprendre systématiquement de l'introduction au développement d'applications avec des vidéos » → J'ai pensé qu'il serait bon d'expliquer la grammaire en détail.