¿Qué son las instancias de Vue?
Vue.js es un marco JavaScript de interfaz desarrollado por desarrolladores de código abierto. Generalmente se utiliza para crear aplicaciones de una sola página. Para obtener más información sobre VueJS, consulte Vue.js | Introducción e instalación .
VueJS no tiene el código HTML en tiempo de ejecución, en su lugar, VueJS crea una plantilla basada en nuestro código HTML y la almacena en Virtual DOM y luego usa esta plantilla para representar el código HTML original que luego se representa como el DOM real. La instancia de VueJS es un mediador entre los elementos DOM de la página web HTML y la lógica de la aplicación en JavaScript. La instancia de VueJS es específicamente un modelo de vista de acuerdo con la definición en el patrón MVVM . La sintaxis básica para demostrar la conexión entre el código HTML y la instancia de Vue definida como View-Model en VueJS es:
Javascript
<div id="app"></div>
<script>
new Vue({
el: "#app"
});
</script>
Podemos acceder a la instancia desde cualquier lugar del ámbito del programa. Pero en una instancia, solo podemos acceder a las propiedades definidas para esa instancia usando ESTA palabra clave. En otras palabras, no existe una conexión directa entre las dos instancias de un programa.
Propiedades/Opciones en la instancia de Vue.js: dado que el patrón MVVM también contiene elementos HTML vinculantes con VueJS. Pero para vincular la instancia de Vue con elementos DOM, tenemos algunas propiedades especiales junto con una instancia de Vue. Las propiedades son:
- EL
- Datos
- Métodos
- calculado
- Reloj
- Modelo
Entendamos cada una de estas opciones brevemente con un ejemplo:
1. EL: esta opción generalmente se usa para asignar la instancia a un elemento HTML y conectarse con DOM. Monta la instancia con el elemento HTML y cumple con la creación del programa/instancia. EL actúa como un selector de consultas de JavaScript, podemos montar EL con ID o className. Podemos montar el elemento en la creación o en una etapa posterior según la aplicación. Ejemplo:
Javascript
<div id="app"></div>
Type 1:
<script>
new vue({
el: "#app"
});
</script>
Type 2:
<script>
var vm = new vue({
...
});
vm.$mount("#app");
</script>
2. Datos: Es una de las propiedades más importantes de una instancia. Todas las propiedades de los datos se almacenan para usarse en un programa y se cumplen cuando se crea la instancia. Podemos vincular elementos de datos con DOM para una reacción dinámica en la página web en lugar de recargar todo el contenido. Podemos almacenar cualquier tipo de elemento de datos en esta opción, generalmente todos los elementos de datos posibles utilizados en VanillaJS son válidos aquí. Ejemplo:
Javascript
<div id="app">
<h1> Name: {{ name }} </h1>
<p> Male: {{ isMale }} </p>
....
</div>
<script>
new vue({
el: "#app",
data: {
name: "John",
isMale: true,
personalDetails: {
hobbies: ["cricket","football],
age: 20
}
}
});
</script>
PRODUCCIÓN:
Nombre: Juan
Hombre: cierto
Como se explica en el ejemplo, la etiqueta <h1> reemplazará su contenido según los cambios realizados en la variable NAME creada en la instancia de Vue. Este proceso se denomina Binding , generalmente utilizado para lograr la dinámica de la página web.
3. Métodos: cada instancia de Vue puede tener su propio conjunto de funciones/métodos para una estructura de programa modular. Hay pocas definiciones de funciones incorporadas para una instancia (Desde el ciclo de vida de la instancia). También podemos definir nuestro propio conjunto de funciones en la propiedad «METHODS». Se compilan junto con las propiedades de los datos en la creación de una instancia. Ejemplo:
Javascript
<div id="app">
<p> {{ getName() }} </p>
</div>
<script>
new vue({
el: "#app",
data: {
name: "John"
},
methods: {
getName: function() {
return (this.name);
}
}
});
</script>
SALIDA: Juan
Como se explica en el ejemplo, podemos acceder a elementos de datos a través de métodos de instancia y podemos vincularnos con el elemento DOM.
4. Computado: Nos ayuda a realizar cálculos y transformaciones sobre nuestros datos. Están destinados a transformar elementos de datos solo para presentación, no cambian los datos existentes reales. Esta es una propiedad dependiente, en otras palabras, la propiedad calculada se almacena en caché en función de las dependencias reactivas de los elementos de datos.
En la propiedad calculada, sabe si la función dentro de ella se ve afectada por cambios en cualquier propiedad de datos. Ejemplo:
Javascript
<div id="app">
<p> {{ getFullname }} </p>
</div>
new Vue({
el: '#app',
data: {
name: "John"
},
computed: {
getFullname: function()
{
return this.name+" Dave";
}
}
});
SALIDA: John Dave
5. Observar: esta propiedad se usa mucho al implementar páginas web dinámicas. Ejecuta método/código sobre cambios de datos. Ejecuta automáticamente el código cuando hay cambios de cualquier otro método o interacción del usuario con la página web. El único requisito previo para implementar WATCH es tener una propiedad de datos asociada en la instancia.
Generalmente, se utiliza cuando queremos realizar alguna tarea asíncrona (Recuperar información del servidor). Ejemplo (al hacer clic en el botón, el valor de Counter cambiará):
Javascript
<div id="app">
<label>Counter: {{Counter}}</label>
<br>
<button @click="Counter = 1">Click Me</button>
</div>
new Vue({
el: '#app',
data: {
Counter: 0
},
watch: {
Counter: function(val)
{
this.Counter = 10;
}
}
});
PRODUCCIÓN:
Contador : 10
Haz click en mi
6. Plantilla: Esta propiedad es responsable de crear elementos HTML desde la instancia. Simplemente reemplaza el contenido dentro de la propiedad con el DOM. En la compilación, simplemente coloca los elementos HTML en el DOM virtual y, cuando es necesario, se coloca en el DOM real. Ejemplo:
Javascript
<div id="app">
<dataTemplate></dataTemplate>
</div>
var dataTemplate = new Vue({
el: '#app',
template: '
<p>Hello World</p>
'
})
SALIDA: Hola mundo
Esto concluye el tema de Vue Instance, cubriendo todas las propiedades de la instancia y su funcionamiento con ejemplos apropiados.