Gracias a Vue.js, podemos usar una sintaxis de maquetado basado en HTML con el que vincular de manera declarativa el DOM, ya una vez renderizado, con los datos de la instancia de Vue.
Si recordamos cómo era devolver variables o datos desde nuestro JavaScript al DOM con JQuery, vemos que era una tarea algo absurda, comparado como lo hace Vue.js
<p id="mensaje"></p>
<!-- scripts jquery -->
<script>
var mensaje = "mensaje jquery";
$("#mensaje").html(mensaje);
</script>
Interpolaciones
Las llamadas básicas a los datos dentro de nuestro JavaScript se suelen hacer siempre con el doble “mostacho” o llaves dobles {{ }}.
<div id="main">
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: "#main",
data: {
msg: "Esto es un mensaje desde Vue.js"
}
})
</script>
Sin embargo, en ocasiones los datos que tenemos son código en HTML puro. Si suponemos que tenemos una etiqueta HTML en nuestro JavaScript, la manera de llamarlo en nuestra aplicación sería con la directiva v-html.
<div id="main">
<p v-html="html"></p>
</div>
<script>
var vm = new Vue({
el: "#main",
data: {
html: "<h4>esto es un título 4</h4",
}
})
</script>
Pero ojo. Como ya dije en el apartado introductorio a Vue.js, esta directiva no es recomendable ya que es susceptible a ataques XSS de inyección de código.
Directivas
Son atributos especiales prefijadas con v- cuyos sufijos suelen expresiones en JavaScript como por ejemplo if (v-if).
Algunas directivas pueden tomar argumentos precedidos de dos puntos “:”.
<div id="main">
<a v-bind:href="url">Directiva con argumento href</a>
</div>
<script>
var vm = new Vue({
el: "#main",
data: {
url: "#",
}
})
</script>
v-bind vincula otros valores al argumento que seleccionemos.
v-on escucha eventos del DOM como argumentos.
<div id="main"> <button v-on:click="dosomething">Press me</button> </div>
Los modificadores son sufijos denotados por un punto “.” Que le indica una acción especial a la directiva.
<form v-on:submit.prevent> Este formulario tiene una llamada a preventDefault </form> <script> // sería como el e.preventDefault() de JS </script>
Shorthands
Tanto las directivas v-bind y v-on pueden ser sustituidas por unos símbolos acortadores. Lo que para:
| v-bind:href | :href |
| v-on:click | @click |
En este apartado hemos aprendido un poco más en profundidad cómo usar la sintaxis maquetadora del DOM que maneja Vue.js, la cual contiene una dificultad nula y nos permite visualizar los datos sin declaraciones de clases o identificadores.