Cómo implementar una aplicación de cambio de título simple usando Vue.js

Vue.js es un marco de JavaScript progresivo. Tiene muchas características que incluyen componentes, renderizado y enrutamiento. El argumento Vue vs React es de naturaleza competitiva. Ambos tienen pros y contras en su campo.

Creé una aplicación JavaScript simple en Vue usando una CDN (red de entrega de contenido). La aplicación tiene un título que se convertirá a mayúsculas al hacer clic en un botón. Sé que es una aplicación sencilla. Pero podemos aprender muchas cosas simples a través de él, como:

  • CDN para Vue
  • Objetos vue
  • vincular un atributo al objeto Vue
  • definir una propiedad de datos
  • definir un método usando Vue
  • llamar al método Vue a través de oyentes

Está bien, ensuciemos nuestras manos!

Soy un gran fanático de sumergir el método en trozos, por lo que seguiremos el mismo enfoque aquí.

  1. Cree un archivo HTML y vincule Vue a través de CDN.
  2. Crea un objeto Vue.
  3. Vincula la plantilla HTML al objeto Vue.
  4. Cree una propiedad de datos.
  5. Cree un método en el objeto Vue.
  6. Cambie los datos al hacer clic en un botón.

1. Cree un archivo HTML y vincule Vue a través de CDN

Cree inicialmente un archivo llamado index.html. Es nuestro actor principal. El archivo index.html contiene tanto la parte de la plantilla HTML como el objeto Vue.

Estoy usando Visual Studio Code aquí.

Ahora agregue el CDN al index.html. Podemos utilizar la versión de desarrollo o de producción. Pero será bueno usar la versión de desarrollo para advertencias y errores. La entrada para la versión de desarrollo de la CDN actualmente es:

2. Crea un objeto Vue

Ahora lo que necesitamos crear es el objeto Vue dentro del archivo index.html. Se crea bajo la etiqueta script.

Puede ser creado por:

new Vue();

La sintaxis completa está a continuación:

new Vue({el: ,
data: {
},
methods: {
}
});

new Vuees una instancia de Vue. Podemos acceder a propiedades como el, datos, métodos, etc. para estar con Vue. Las propiedades se explicarán a continuación.

3. Vincula la plantilla HTML al objeto Vue

Como sabemos, Vue tiene una propiedad llamada "el". Esta propiedad vincula la plantilla HTML al objeto Vue. Para hacer eso, todas las plantillas HTML deben estar bajo un solo div con una identificación. Para esta demostración, podemos usar una identificación de app. Hemos agregado lo siguiente al archivo index.html:

Welcome to title changer

Ahora, agregue la identificación de la aplicación al objeto Vue.

new Vue({
el: '#app',
});

Entonces el enlace será un éxito.

4. Cree una propiedad de datos

Ahora no queremos que el encabezado "Bienvenido al cambiador de títulos" sea texto estático. Necesitamos poder mostrar el valor de la propiedad de datos de Vue. Para hacer eso, Vue tiene una propiedad incorporada llamada "datos". Necesitamos registrar eso aquí y usar el nombre en el HTML como se muestra a continuación:

new Vue({
el: '#app',
data: {
tile: 'Welcome to title changer'
},
});

Ahora en la <etiqueta h3> se puede actualizar con las llaves dobles como la interpolación en Ruby. El valor será:

{{title}}

5. Crea un método en el objeto Vue

Vue tiene una propiedad incorporada llamada "métodos". Esta propiedad admitirá los métodos que se declararán dentro de los objetos Vue.

También podemos usar la sintaxis de ES6. Déjame explicarte ambos aquí.

methods: {
 changeTitle: function() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

El formato ES6 es:

methods: {
 changeTitle() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

toUpperCase()es simplemente un método de JavaScript que convierte una cadena en letras mayúsculas. Un punto importante que debe tenerse en cuenta aquí es que podemos acceder a la propiedad de datos utilizando la thispalabra clave. Por lo tanto, se puede acceder al valor que se declara en la propiedad de datos mediante thislos métodos.

6. Cambie los datos al hacer clic en un botón

Ahora, lo que hacemos es simplemente llamar al método al hacer clic en un botón. Simple como eso.

Para hacer eso, necesitamos crear una etiqueta de botón.

click to change to upcase

Para vincular el botón al método, necesitamos usar un controlador de eventos al hacer clic en el botón. Vue proporciona un oyente incorporado llamado v-on.

Aquí está la sintaxis:

v-on:click="call Action or Method"

Podemos combinar con:

click to change to upcase

O podemos usar una sintaxis abreviada como la siguiente:

click to change to upcase

Eso es. Todo listo

Antes de hacer clic en el botón, el encabezado HTML está a continuación:

Después de hacer clic, se convierte a mayúsculas.

Eso es todo. Comente si tiene algún problema o pregunta. He adjuntado los detalles del Repo a continuación.

enlace de github. Actualizaré con algunas funciones avanzadas en Vue en las próximas lecciones.