Diferència entre revisions de la pàgina «VUEJS»

Revisió del 18:50, 1 març 2024

https://www.youtube.com/watch?v=ub8ZU3JxNsM&list=PL7VXpoQP1k247QUTTxHcYBNyCg1j2ALfD

v-text: para mostrar texto y que no parpadee

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

V-TEXT

<body>
    <div id="el">
            <h1> {{mensaje}}</h1>    <!--podemos ver -->
    </div>
</body>
    
<script src="https://cdn.jsdelivr.net/npm/vue"></script>  //CDN
<script>
     Vue.config.devtools = true;    
     var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"   //datos, hace referencia dentro de elemento #el {{mensaje}} 
        })
    }).mount(#el) //hace referencia al elemento id= el
    
</script>

<body>
    <div id="el">
            <h1>Hola <span v-text="mensaje"> </span></h1>   <!--muestra "Hola" y luego en función del texto del input va rellenando-->
            <input type="text" class="text" v-model="mensaje">
    </div>
</body>
   
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"
        })
    }).mount('#el');
    
</script>

V-SHOW

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

<body>

    <div id="el">
            <h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1>  <!--al recargar la pagina, se puede ver {{mensaje}} para evitar esto se usa la directiva v-text-->
            <input type="text" class="text" v-model="mensaje">
    </div>
</body>

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

    var variable = Vue.createApp({
        data: () => ({
            mensaje: "resultado"
        })
    }).mount("#el")


</script>

<body>
  <div id="el">
    <h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>   <!--si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css-->
    <input type="text" class="text" v-model="mensaje">
  </div>
</body>

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

  var variable = Vue.createApp({
    data: () => ({
      mensaje: "resultado"
    })
  }).mount("#el")

</script>

V-IF

<body>
  <div id="el">
    <h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    <!--en vez de v-show podemos usar v-if-->
    <h1 v-else>otra</h1>
    <input type="text" class="text" v-model="mensaje">
  </div>
</body>

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

  var variable = Vue.createApp({
    data: () => ({
      mensaje: "resultado"
    })
  }).mount("#el")

</script>

V-FOR

<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li> -->
            <li v-for="profesor in profesores" v-text="profesor"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [      //utilizamos un array con cadenas
                "Julio Noguera",
                "Albert Canela",
                "Alex Salinas"
            ]
        })
    }).mount("#el")
</script>

Recorriendo Objetos

<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li> -->
            <li v-for="profesor in profesores" v-text="profesor.nombre"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({    //utilizamos un array con objetos
            profesores: [   
                {nombre:"Julio Noguera"},
                {nombre: "Albert Canela"},
                {nombre: "Alex Salinas"}

            ]
        })
    }).mount("#el")
</script>

Podemos especificar recorrer los objetos y mostrar o acceder a su contenido

<body>
   <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
               
            </li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        })
    }).mount("#el")
</script>

//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas",activo:true})

EVENTOS y FUNCIONES

CLICK

Tenemos los datos mensajes y el array de profesores, también el método invertir que se ejecutará cuando se haga click en botón, también es interesante que para acceder a los datos se utiliza this.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
    <div id="el">
        <input type="text" v-model="mensaje">
        <h1 v-text="mensaje"></h1>
        <!-- <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> --> 
        <!-- @click es abreviación de v-on:click -->
        <button @click="invertir">INVERTIR</button>
    </div>
</body>

<script>
    var variable = Vue.createApp({
        data: () => ({
            mensaje: "",
        }),
        methods: {
            invertir() {
                this.mensaje = this.mensaje.split('').reverse().join('');
            }
        }
    }).mount("#el");
</script>

Mostrar lista asociando evento click

<style>
.false{background:blue}
.true{background: green}
</style>
<body>
    <div class="container">
        <div id="el">
            <ul>
                <li v-for="profe in profesores">
                    <span v-text="profe.nombre"></span>
                    <span @click="profe.activo=false" v-if="profe.activo" class="false">X</span>
                    <span @click="profe.activo=true" v-else class="true">X</span>

                </li>
            </ul>
            <pre>{{$data}}</pre>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = Vue.createApp({
        data: () => ({
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]

        })
    }).mount("#el");
</script>

BOTÓN- AÑADIR LISTA

KEYUP

Eventos de teclado

<body>
    <div id="el">
        <ul>
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
            </li>
          <input v-on:keyup.enter="anadir" type="text" v-model="profe" >

            <!-- <input @keyup.enter="anadir" type="text" v-model="profe" > -->
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var variable = Vue.createApp({
            data:() => ({
              profe: "",
                profesores: [
                  { nombre: "Julio Noguera", activo: true },
                  { nombre: "Albert Canela", activo: true },
                  { nombre: "Alex Salinas", activo: false }
                ]
            }),
            methods: {
                anadir() {
                    this.profesores.push({
                        nombre: this.profe,
                        activo: false
                    });
                    this.profe = ""; // Restableix el valor de profe a una cadena buida després d'afegir-lo
                }
            }
        }).mount("#el");
    </script>
</body>

DIRECTIVA V-BIND

PARA ACTIVAR CLASES

<style>
    .rojo {
        background: red;
    }

    .verde {
        background: green;
    }
    .glyphicon{
        color: white;
    }
</style>
<body>

      <div id="el">
          <ul>
            <!--//en el caso de querer añadir varias clases-->
            <!-- v-bind:class="['glyphicon',tarea.completo ? 'verde': 'rojo']" -->
              <li v-for="tarea in tareas"> 
                  <span v-bind:class="{  
                               'rojo': !tarea.completo,
                               'verde': tarea.completo
                                }" v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" ></span>
                  <input type="checkbox"  v-model="tarea.completo">
              </li>
          </ul>
          <pre>
            {{$data}}
          </pre>
      </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var variable = Vue.createApp({
      data: () => ({
          tareas: [
            {
                nombre: "Estudiar",
                completo: true
            },
            {
                nombre: "Repasar",
                completo: true
            },
            {
                nombre: "Examinar",
                completo: false
            }
          ]
      })
  }).mount("#el");
</script>

INCREMENTAR

Como se puede ver, se produce un incremento de voto modificando su atributo directamente.

<body>
    <div class="container">
        <h1>veamos</h1>
        <div>
            <ul>
              <li v-for="storie in stories"><button  @click="storie.votos++">Vote {{storie.politico}}</button><pre v-text="storie.votos"></pre></li>
            </ul>
        </div>
        <pre>{{$data}}</pre>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  const app = Vue.createApp({
    data() {
      return {
        stories: [
          { politico: "julio", votos: 1 },
          { politico: "paco", votos: 2 },
          { politico: "raúl", votos: 3 },
          { politico: "jorge", votos: 4 }
        ]
      };
    },
    methods: {
      incrementVote(storie) {
        storie.votos++;
      }
    }
  }).mount(".container");

</script>

FILTRAR

<div id="aplicacion">
    <input type="range" v-model="minimo" min="0" max="50">  
    <div v-text="minimo"></div>


    <div v-for="dato in filtrar">
      <div v-text="dato.descripcion"></div>
    </div>

    <input type="search" v-model="campo">

    <div v-for="dato in busqueda">
      <div v-text="dato.descripcion"></div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var app = Vue.createApp({
      data:() => ({

        minimo: "5",

        campo: "",

        datos: [{
          codigo: 1,
          descripcion: 'papas',
          precio: 12.52
        }, {
          codigo: 2,
          descripcion: 'naranjas',
          precio: 21
        }, {
          codigo: 3,
          descripcion: 'peras',
          precio: 18.20
        }]
      }),
      computed: {
        filtrar() {
          return this.datos.filter((dato) => dato.precio > this.minimo);
        },
        busqueda() {
          return this.datos.filter((dato) => dato.descripcion.includes(this.campo));
        }

      }
    }).mount("#aplicacion")

  </script>

Componentes

1. Crear una nueva instancia de Vue con Vue.createApp

2. Existen 3 Objetos básicos y fundamentales que estarán en la mayoria de las aplicaciones web: el data y methods.

3. Se debe crear un contenedor con un id igual al del objeto el para establecer el alcance del framework

Crear Nuestro primer Componente Básico

<body>
  <div id="aplicacion">
    <!-- vue está disponible en todo este div-->
    <hola-mundo></hola-mundo>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
 

//nueva instacia de Vue : new Vue
  var app= Vue.createApp({
    data:() => ({ //capa de datos

    }),
    methods:
    {

    }
    })
    
    app.component('hola-mundo', {    //debe coincidir con el nombre del componente(etiqueta html)
    template: `<p>
                 Hola mundo
              </p>`
  });
    
    app.mount('#aplicacion')  // el elemento donde se aplicará Vue, en este caso un div con id = main);
</script>

PROPS

Props sirve para interpolar o pasar los valores que hayan dentro del atributo la etiqueta html (inglés, castellano) al objeto component

<body>
  <div id="aplicacion">
    <hola-mundo idioma="ingles"></hola-mundo>
    <hola-mundo idioma="castellano"></hola-mundo>
  </div>
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  
  var app= Vue.createApp({
  })
  
  app.component('hola-mundo', {
    props: ['idioma'],
    template: `<div>
                  <p v-if="idioma=='castellano'">Hola mundo</p>
                  <p v-if="idioma=='ingles'">Hello world</p>
              </div>`
  })
  
  app.mount("#aplicacion")
</script>

</body>

Otro Componente Básico

<body>
 
 <div id="app">
 <ejemplo nombre="Juan" apellido="Perez"></ejemplo> 
 <ejemplo nombre="Alejandra" apellido="Quiroga"></ejemplo> 
</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  
  var app= Vue.createApp({
  })
  
  
  app.component('ejemplo', {
   props: ['nombre', 'apellido'],
   template: '<p> Hola {{nombre}} {{apellido}} </p>' 
  });

  app.mount("#app")
</script>

</body>

Ejemplo de Componente, podemos ver que pasamos una peliculas "peliculon 1917" y una imagen en la etiqueta peliculas, que serán los valores que recibirá el componente para luego incluirlo en la plantilla.

<body>
  <div class="container">
    <peliculas titulo="peliculon 1917"
      imagen="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSexz8IyOhoxR2ibVc78RHzpBCsvhDt3fx0wl99Qcxacht4gk9z"></peliculas>
  </div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
  

  var app = Vue.createApp({
  
  })
  
  app.component('peliculas', {

    props: ['imagen', 'titulo'],  //los props reciben los datos externos del html en este caso será "peliculon 1917" y la ruta de la imagen
    template: 
      `<div>
      <img width="100px" v-bind:src="imagen" :alt="titulo"/>  <!-- v-bind:alt se reduce en :alt , al ser un atributo no se puede usar {{}} sino v-bind-->
      <h2> {{titulo}} </h2>
      </div>`
  });
  
  app.mount(".container")

</script>
</body>

Este ejemplo, viene a basarse en el ejemplo anterior pero además coje datos del JSON data y los va mostrando

<body>
  <div class="container">
    <div v-for="(dato, index) in datos">   <!-- Corregido -->
      <peliculas :key="index" :titulo="dato.titulo" :imagen="dato.imagen">
      </peliculas>
    </div>
  </div>

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

  <script type="text/javascript">
		var app = Vue.createApp({
      data: () => ({
          datos: [{
              titulo: "star wars",
              imagen: "https://vignette.wikia.nocookie.net/cine/images/8/88/Sw1.jpg/revision/latest?cb=20120930202439 "
            },
            {
              titulo: "Sonic",
              imagen: "https://www.smashbros.com/wiiu-3ds/images/character/sonic/main.png"
            },
            {
              titulo: "Mario bros",
              imagen: "https://imagenesparapeques.com/wp-content/uploads/2021/05/Mario-Bros-png-transparente.png"
            }
          ]

        })
    })

    app.component('peliculas', {
     props: ['titulo', 'imagen'],
      template: `<div>
        <img width="100px" :src="imagen" :alt="titulo"/>
        <h2>{{ titulo }}</h2>
      </div>`
    });
    
		app.mount(".container")

  </script>
</body>

Ejercicios

https://www.tutorialesprogramacionya.com/vueya/

https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s

Diferència entre revisions de la pàgina «VUEJS»

Revisió del 18:50, 1 març 2024

Contingut

V-TEXT

V-SHOW

V-IF

V-FOR

EVENTOS y FUNCIONES

CLICK

KEYUP

DIRECTIVA V-BIND

FILTRAR

Componentes

Ejercicios

Menú de navegació

Eines de l'usuari

Espais de noms

Variants

Vistes

Més

Cerca

Navegació

Mòduls

Eines

@@ Línia 823: / Línia 823: @@
      <div id="el">
          <div v-for="profesor in profesores" >
-             <div v-text="profesor.nombre" ></div> <div v-text="profesor.edad"></div><span @click="incrementar(profesor)">+</span>
+             <div v-text="profesor.nombre" ></div> <div v-text="profesor.edad"></div>
+            <button @click="incrementar(profesor)">+</span>
           </div>
-         <input type="text" v-model="profesor" @click="anadir">
+         <input type="text" v-model="profesor"><button @click="anadir">Añadir</button>
          <br>
          {{$data}}
@@ Línia 833: / Línia 834: @@
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
-    Vue.config.devtools = true
+     var variable = Vue.createApp({
-     var variable = new Vue({
+         data: () => ({
-        el: '#el',
-         data: {
              profesor: " ",
@@ Línia 854: / Línia 853: @@
              ]
-         },
+         }),
          methods: {
              anadir: function(){
@@ Línia 864: / Línia 863: @@
              }
          }
-     });
+     }).mount("#el");
      </script>
 </source>
@@ Línia 894: / Línia 893: @@
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
-     var app=new Vue({
+     var app= Vue.createApp({
-      el: '#aplicacion',
+       data: () => ({
-       data:{
          valor1: 0,
          valor2: 0,
          suma: ''
-       },
+       }),
        methods: {
          sumarValores: function() {
@@ Línia 906: / Línia 904: @@
          }
        }
-     })
+     }).mount("#aplicacion")
    </script>
 </source>
@@ Línia 919: / Línia 917: @@
 <body>
      <div id="el">
-         <div v-for="tarea in tareas" >     // <div v-for="(item, index) in tareas" >
+         <div v-for="tarea in tareas" >     <div v-for="(item, index) in tareas" >
              <div v-text="tarea" ></div> <span @click="eliminar(tarea)">X</span>
           </div>
-         <input type="text" v-model="tarea"><span @click="anadir">+</span>
+         <input type="text" v-model="tarea">
+        <button @click="anadir">+</button>
          <br>
          {{$data}}
@@ Línia 929: / Línia 929: @@
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-<script>
+    <script>
-    Vue.config.devtools = true
+        var variable = Vue.createApp({
-    var variable = new Vue({
+            data() {
-        el: '#el',
+                return {
-        data: {
+                    tarea: "",
+                    tareas: []
-            tarea: "",
+                }
-            tareas: []
-        },
-        methods: {
-            anadir: function(){
-                this.tareas.push(this.tarea);
-                console.log(this.tareas);
              },
-             eliminar: function(tarea){
+             methods: {
-                let x=this.tareas.indexOf(tarea);
+                anadir() {
-                this.tareas.splice(x, 1);
+                    this.tareas.push(this.tarea);
+                    console.log(this.tareas);
+                },
+                eliminar(tarea) {
+                    let index = this.tareas.indexOf(tarea);
+                    if (index !== -1) {
+                        this.tareas.splice(index, 1);
+                    }
+                }
              }
+         }).mount('#el');
-         }
-    });
      </script>
 </body>
@@ Línia 956: / Línia 955: @@
 </html>
 </source>
-'''Eventos: v-on:keypress, v-on:keyup'''
-Mediante un control de tipo input permitir el ingreso de una frase. Mostrar por pantalla cada vez que presionamos una tecla la cantidad de letras 'a' que tiene la
-oración.
-'''solución:'''
-<source lang="javascript">
-<body>
-  <div id="aplicacion">
-    <p>Ingrese una frase:
-      <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
-    </p>
-    <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-  <script>
-    var app=new Vue({
-      el: '#aplicacion',
-      data:{
-        cantidadLetrasa: 0,
-        frase: ''
-      },
-      methods: {
-        contabilizarLetrasA: function () {
-          var cant=0;
-          for(var f=0; f<this.frase.length; f++)
-            if (this.frase[f]=='a' || this.frase[f]=='A')
-              cant++;
-          this.cantidadLetrasa=cant;
-        }
-      }
-    })
-  </script>
-</body>
-</source>
@@ Línia 1.010: / Línia 965: @@
 <source lang="javascript">
 <body>
-  <div id="aplicacion">
+    <div id="aplicacion">
-    <p>Ingrese una frase:
+      <p>Ingrese una frase:
-      <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
+        <input v-model="frase" v-on:keyup="contabilizarLetrasA" type="text" size="80">
-    </p>
+      </p>
-    <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
+      <p>Cantidad de letras 'a o 'A'':{{cantidadLetrasa}}</p>
-  </div>
+    </div>
-  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-  <script>
+    <script>
-    var app=new Vue({
+      var app = Vue.createApp({
-      el: '#aplicacion',
+        data:() => ({
-      data:{
+          cantidadLetrasa: 0,
-        cantidadLetrasa: 0,
+          frase: ''
-        frase: ''
+        }),
-      },
+        methods: {
-      methods: {
+          contabilizarLetrasA:  function() {
-        contabilizarLetrasA: function () {
+            var cant=0;
-          var cant=0;
+            for(var f=0; f<this.frase.length; f++)
-          for(var f=0; f<this.frase.length; f++)
+              if (this.frase[f]=='a' || this.frase[f]=='A')
-            if (this.frase[f]=='a' || this.frase[f]=='A')
+                cant++;
-              cant++;
+            this.cantidadLetrasa=cant;
-          this.cantidadLetrasa=cant;
+          }
          }
-       }
+       }).mount('#aplicacion');
-     })
+     </script>
-  </script>
+  </source>
-</source>
@@ Línia 1.089: / Línia 1.043: @@
 <source lang="javascript">
 <body>
+  <style>
+    .tachar {
+      text-decoration: line-through;
+      color: blue;
+    }
+  </style>
    <div id="aplicacion">
      <ul style="font-size:2rem; list-style:none">
        <li v-for="lenguaje in lenguajes"
-           v-on:click="presion(lenguaje)"
+           @click="presion(lenguaje)"
            v-bind:class="{tachar: lenguaje.tachado }">
          {{lenguaje.nombre}}
@@ Línia 1.101: / Línia 1.061: @@
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
-var app=new Vue({
+var app= Vue.createApp({
-      el: '#aplicacion',
+       data: () => ({
-       data:{
          lenguajes: [
            {
@@ Línia 1.133: / Línia 1.092: @@
              tachado:false
            }]
-       },
+       }),
        methods: {
          presion: function(lenguaje) {
-           lenguaje.tachado=true;
+           lenguaje.tachado= !lenguaje.tachado;
          }
        }
-     })
+     }).mount('#aplicacion');
    </script>
 </body>
@@ Línia 1.159: / Línia 1.118: @@
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
-   Vue.component('acerca-de', {
-    template: `<div><p>Programa: xxxxxxxx</p>
+   var app = Vue.createApp({
-                    <p>Versión: xx</p></div> `
    })
-   new Vue({
+   app.component('acerca-de', {
-     el: '#aplicacion'
+     data: () => ({
+      navigator: navigator.appCodeName || 'Unknown',
+      version: navigator.appVersion
+    }),
+    template: `<div><p>Programa: {{navigator}}</p>
+                    <p>Versión: {{version}}</p></div> `
    })
+  app.mount('#aplicacion')
 </script>
@@ Línia 1.188: / Línia 1.153: @@
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
-   Vue.component('hola-mundo', {
+   var app = Vue.createApp({
+    data: () => ({
+      idioma: 'castellano'
+    })
+  })
+  app.component('hola-mundo', {
      props: ['idioma'],
      template: `<div>
@@ Línia 1.196: / Línia 1.169: @@
    })
-   var app=new Vue({
+   app.mount('#aplicacion');
-    el: '#aplicacion',
-    data: {
-      idioma: 'castellano'
-    }
-  })
 </script>
@@ Línia 1.223: / Línia 1.191: @@
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
-   Vue.component('articulos', {
+  var app= Vue.createApp({
+    data: () => ({
+      datos: [{
+          codigo: 1,
+          descripcion: 'papas',
+          precio: 12.52
+        },{
+          codigo: 2,
+          descripcion: 'naranjas',
+          precio: 21
+        },{
+          codigo: 3,
+          descripcion: 'peras',
+          precio: 18.20
+        }]
+    })
+  })
+  app.component('articulos', {
      props:['datos'],
      template: `<div>
@@ Línia 1.233: / Línia 1.220: @@
    })
-   var app=new Vue({
-    el: '#aplicacion',
+   app.mount('#aplicacion');
-    data: {
-      datos: [{
-              codigo: 1,
-              descripcion: 'papas',
-              precio: 12.52
-              },{
-              codigo: 2,
-              descripcion: 'naranjas',
-              precio: 21
-              },{
-              codigo: 3,
-              descripcion: 'peras',
-              precio: 18.20
-              }]
-    }
-  })
 </script>
@@ Línia 1.272: / Línia 1.243: @@
 <script>
-   Vue.component('contador', {
+   var app= Vue.createApp({
+  })
+  app.component('contador', {
      template:`<div><button v-on:click="incrementar()">
                {{cantidad}}
                </button></div>`,
-     data: function() {
+     data: () => ({
-       return {
+       cantidad: 0
-        cantidad: 0
+     }),
-      }
-     },
      methods: {
        incrementar: function() {
@@ Línia 1.288: / Línia 1.261: @@
    });
-   var app=new Vue({
+   app.mount('#aplicacion');
-    el: '#aplicacion'
-  })
-</script>
-</body>
-</source>
-'''Componentes: definición de métodos y modelo de datos'''
-<source lang="javascript">
-<body>
-  <div id="app" class="container">
-    <h1> Helados </h1>
-    <h2> Lista </h2>
-    <ul>
-      <li v-for="item in helados">
-        <component-helado v-bind:helado="item"></component-helado>
-      </li>
-    </ul>
-    <h2> Seleccionados </h2>
-    <ul>
-      <li v-for="item in helados" v-if="item.seleccionado"> {{ item.sabor }} </li>
-    </ul>
-  </div>
-</body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js">
-</script>
-<script type="text/javascript">
-  Vue.config.devtools = true;
-    Vue.component('component-helado', {
-      props: ['helado'],
-      template: `
-    <div>
-       <button class="btn btn-success" v-on:click="agregar(helado)" v-if="!helado.seleccionado"> + </button>
-       <button class="btn btn-danger" v-on:click="eliminar(helado)" v-if="helado.seleccionado"> - </button>
-       <span> {{ helado.sabor }} </span>
-       <hr/>  </div>  `,
-      methods: {
-        agregar: function (p_helado) {
-          p_helado.seleccionado = true;
-        },
-        eliminar: function (p_helado) {
-          p_helado.seleccionado = false;
-        }
-      }
-    });
-    new Vue({
-      el: '#app',
-      data: {
-        helados: [{
-            sabor: 'Chocolate',
-            seleccionado: false
-          },
-          {
-            sabor: 'Dulce de leche',
-            seleccionado: false
-          },
-          {
-            sabor: 'Frutilla',
-            seleccionado: false
-          },
-          {
-            sabor: 'Limón',
-            seleccionado: false
-          },
-          {
-            sabor: 'Vainilla',
-            seleccionado: false
-          }
-        ]
-      }
-    });
 </script>
 </body>
 </source>
 -->
-<source lang="javascript">
-</source>
 https://www.tutorialesprogramacionya.com/vueya/
 https://www.youtube.com/watch?v=jfEEQVdbl54&list=PLPl81lqbj-4J-gfAERGDCdOQtVgRhSvIT&index=7&t=0s