Tutorial de introducción a Vuejs 3 (instancia de Vue, Reactivtiy, etc.)

Tutorial de introducción a Vuejs 3 (instancia de Vue, Reactivtiy, etc.)

En este tutorial, obtendremos una introducción básica a vuejs y su sistema de capacidad de respuesta.

Índice
  1. ¿Qué es Vuejs?
  2. Comenzar
  3. Ver instancia
  4. Datos y capacidad de respuesta
  5. Código completo

¿Qué es Vuejs?

Vuejs es un marco de JavaScript popular que se utiliza para crear interfaces de usuario. La biblioteca principal se centra principalmente en la capa de vista.

Podemos construir aplicaciones web JavaScript modernas usando Vuejs.

Comenzar

En este tutorial, no estamos usando Vue cli para configurar nuestra aplicación.

Abre tu terminal y ejecuta los siguientes comandos.

mkdir vue-intro 

cd vue-intro 

touch index.html 

una vez que haya completado con éxito los pasos anteriores, ahora abra vue-intro carpeta utilizando su editor de código favorito.

Agregue el marcado a continuación a su archivo HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Vue intro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
     <h1>Intro to Vue</h1>
</div>
</body>
</html>

Agreguemos la biblioteca Vue a nuestro index.html archivo usando la etiqueta de secuencia de comandos.

<!DOCTYPE html>
<html>
<head>
    <title>Vue intro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="app">
    <h1>Intro to Vue</h1>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

</html>

Ver instancia

Una vez que hayamos agregado exitosamente el script a nuestro HTML ahora podemos acceder a un archivo global Vue función.

La función Ver se utiliza para crear una nueva instancia.

Cada aplicación de vuejs comienza creando una instancia de Vue

Vamos a crear una instancia de vista pasando un objeto al Vue función.

Agregue el código a continuación después de la etiqueta de secuencia de comandos de la biblioteca vue.

var app = new Vue({
    el:"#app"
})

él:: Hemos añadido #app esto ahora significa que la instancia de vista establece una relación con nuestro HTML div etiqueta que tiene un identificador app.

Datos y capacidad de respuesta

La instancia de Vue también acepta otra propiedad llamada data todo lo que agregamos dentro del data la propiedad se agrega a la Vue sistema de capacidad de respuesta.

Agreguemos la propiedad de datos a nuestra instancia de Vue.

var app = new Vue({
    el:"#app",
    data:{
       title: "Vuejs"
    }
})

En el código anterior, hemos agregado una propiedad de datos con un objeto que tiene title:"Vuejs".

Interpolación

Para interpolar los datos en Vuejs necesitamos usar {{ }} tirantes dobles.

Actualice su etiqueta div con el siguiente código.

<div id="app">
   <h1>Intro to {{title}}</h1>
</div>

Ahora abra su archivo HTML en su navegador.



vuejs-intro-example

Como dije antes, la instancia de Vue agrega todas las propiedades presentes en el data oponerse a su reactividad sistema para que cada vez que cambie el valor de una propiedad, vue represente nuestra aplicación con datos actualizados.

Para probar la capacidad de respuesta de Vue, abra la consola de su navegador e ingrese el código a continuación.

vuejs-responsiveness-example

Viste en la imagen de arriba si cambiamos title valor de propiedad, entonces el sistema de reactividad de vista actualiza el title propiedad en todas partes la usamos pero en nuestro caso solo la usamos en el h1 ¿etiqueta?

Código completo

índice.html

<!DOCTYPE html>
<html>

<head>
    <title>Vue intro</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="app">
        <h1>Intro to {{title}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                title: "Vuejs"
            }
        })
    </script>
</body>

</html>

Si quieres conocer otros artículos parecidos a Tutorial de introducción a Vuejs 3 (instancia de Vue, Reactivtiy, etc.) puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas