[MAJ] Bases de Vue - Introduction aux composants

NaoDevWeb31 · Nov 23, 2021 · 7680401 · 7680401
1 parent 142dbb2
commit 7680401
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.html b/index.html
@@ -10,30 +10,44 @@
 
   <body>
     <div id="mon-app1">
-
-
+      <mon-premier-composant></mon-premier-composant>
+      <mon-premier-composant></mon-premier-composant>
+      <mon-premier-composant></mon-premier-composant>
+      <mon-premier-composant></mon-premier-composant>
     </div>
 
     <div id="mon-app2">
       <h1>{{ txt }}</h1>
       <button v-on:click="func1">CHANGEMENT</button>
-
     </div>
 
     <!-- Installation de VueJS 2 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-
     <script type="text/javascript">
+
+      Vue.component("mon-premier-composant", {
+        template: ` <p>Mon premier composant {{ nom }}
+                      <button v-on:click="changementNom">Changement</button>
+                    </p>`,
+        data: function() {
+          return {
+            nom: "John Doe",
+          }
+        },
+        methods: {
+          changementNom: function() {
+            this.nom = "Jack Doe";
+          }
+        }
+      })
+
       // Création d'une instance
       const ins1 = new Vue({
-        template: `<h1>{{ txt }}</h1>`,
+        el: "#mon-app1",
         data: {
           txt: "Hello APP 1"
         },
       });
-      ins1.$mount();
-      document.getElementById("mon-app1").appendChild(ins1.$el);
-
 
       // Création d'une instance
       const ins2 = new Vue({