Bienvenidos de nuevo a otro capítulo de nuestra serie de Vue desde cero. Si estás leyendo esto quiza sí estés interesado realmente en aprender Vue, eso es genial; así que adelante. 🙂
El día de hoy vamos a revisar más a fondo la forma declarativa de utilizar nuestra información presente en el objeto data de nuestra aplicación Vue.
Data
Cuando mencionamos declarativa nos referimos a acceder a un valor mediante la utilización de corchetes dobles {{variable}}. Vamos a poner un par de ejemplos:
1.- Requerimos imprimir la fecha actual en nuestro página. Veamos:
Como podemos observar, estamos declarando un atributo now que podemos interpretar como una variable que contiene un valor, el cual podemos utilizar mediante los corchetes {{now}}, dicho atributo puede contener cualquier tipo de valor a excepción de funciones, las cuales veremos en otro capítulo cuando hablemos de métodos. Como puedes observar es bastante sencillo de utilizar, claro que la cosa se puede complicar un poco cuando manejamos más datos o tipos de datos diferentes pero por ahora con esto basta, paciencia que ya veremos más adelante más ejemplos.
2.- Necesitamos mostrar la información básica del navegador actual.
En este segundo ejemplo se observa que estamos haciendo uso de una nueva propiedad llamada v-bind, no te preocupes, no es nada dificil de entender. El atributo v-bind nos permite acceder a las mismas variables de data y asignarlas a un atributo html que necesitemos, en este caso estamos diciendole a vue que llene el atributo title con el valor de la propiedad titulo de nuestro data. Como resultado obtenemos que si colocas el cursor sobre el nombre del navegador verás un texto alternativo que proviene de la propiedad title que acabamos de asignar.
En futuros capítulos veremos más ejercicios que contengan el uso combinado de {{}} y del atributo o directiva v-bind.
Por mi parte es todo, espero te sea de ayuda este pequeño post y te invito a que practiques, ya que practicar es una gran manera de aprender. Puedes experimentar modificando los ejemplos que utilizamos hoy :). Saludos y hasta la próxima.