En la lección anterior de Vue.js aprendimos cómo enlazar Vue con nuestra página, configurar los parámetros básicos, alterar elementos del DOM y manipular datos con el uso de directivas. En la lección de hoy vamos a repasar en profundidad todo esto además de ver nuevos conceptos y detalles importantes sobre el objeto VM o instancia de Vue que debes tomar en cuenta.
Notas
Puedes instalar la extensión Vue.js devtools desde la Chrome Web Store.
Es importante que desde el administrador de extensiones de Chrome le otorguemos permisos de acceso a las URLs de archivos si vamos a trabajar directamente desde un archivo HTML.
En la pestaña Vue de la extensión de Vue.js devtools podrás ver que tenemos nuestro primer componente, llamado Root, que representa a nuestro objeto VM. De los componentes aprenderemos más en las lecciones siguientes.
En JavaScript podemos utilizar el símbolo de dólar ($) en el nombre de las variables. Este signo es comúnmente utilizado por frameworks como jQuery y Vue.js para hacer referencia a métodos o variables especiales.
En nuestro ejemplo la instancia de Vue.js se ha grabado en la variable $vm0, por lo que podemos acceder a ella y manipularla desde la consola del navegador. Por ejemplo, cambiar el valor de la propiedad name de la siguiente manera:
$vm0.name = 'Duilio'
También podemos guardar nuestra instancia de Vue en una variable, definiendo nuestro objeto como el valor de la misma.
var vm = new Vue({
el: '#app',
data: {
name: ''
}
});
En este caso lo guardamos dentro de una variable llamada vm porque Vue implementa el patrón View Model. Es por esta razón que también nos referimos a nuestra instancia de Vue como objeto VM.
Al almacenar nuestra instancia de Vue en una variable, no solo podemos referirnos a esta desde la consola del navegador (de forma similar a como lo haríamos con $vm0), sino que también podemos hacerlo desde cualquier parte de nuestro código JavaScript.
Es importante declarar la propiedad data e inicializar nuestros datos, así sea con un valor vacío, dentro de nuestra instancia de Vue. No hacer esto generará un error que hará imposible ejecutar nuestro código.
A partir de Vue.js 2 no podemos enlazar directamente nuestro objeto VM a un elemento, por ejemplo, <body>.
var vm = new Vue({
el: 'body', // Esto NO es posible
...
});
Por otro lado, si tenemos dos o más elementos que implementen la misma clase y enlazamos nuestro objeto VM a esta clase, solo el primer elemento que coincida con el selector será enlazado.
Por esta razón, es preferible usar un id para la propiedad el, debido a que es importante que el elemento usado en esta propiedad sea único:
var vm = new Vue({
el: '#app', // Esto sí es posible
...
});
Material relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Vue.js vs jQuery (parte 2 de 2) Lección siguiente Interpolaciones y directivas en Vue 2