Te he contado porqué me gusta VueJS, y has leido y visto cómo de fácil es trabajar con VueJS, y es que, lo fácil que sea el primer paso de un lenguaje o framework es vital para su éxito. Hoy toca dar un segundo paso con VueJS, y seguir avanzando en el data-binding.
Methods
El objeto Vue necesita un elemento sobre el que trabajar ‘el‘, y además disponemos de una segunda propiedad ‘data’, donde guardar los valores de las propiedades. Hoy le toca a methods, que es el objeto donde se almacenan los métodos que aplican sobre el objeto Vue que estamos trabajando.
Los métodos no son sino funciones, algunas con parámetros y otras sin parámetros.
Os escribo primero es código Javascript que vamos a analizar:
let app = new Vue({ el: '#main', data: { enlace: <a href="https://manejandodatos.es" target="_blank">Manejando Datos desde Vue<a/>` }, methods: { simple() { return 'Desde llamada!' }, con_argumentos(name) { return `Hola ${name}` }, enlace2(describe) { return `<a href="https://manejandodatos.es" target="_blank">${describe}</a>` } } })Se mantiene el objeto “el” y también data, pero hemos incluido methods, donde hemos preparado 2 funciones: una sin argumentos, y otra con argumento. En ambos casos, hay una respuesta (return), además de que usamos las comillas ` de ES6 para trabajar con cadenas de caracteres.
Veamos ahora el código HTML el div:
<div id="main"> <p>;{{enlace}}</p> <p v-html="enlace"></p> <p>{{ simple() }}</p>; <p>{{ con_argumentos('VueJS y Manejando Datos') }}</p>; <p v-html="enlace2('Test')"></p> </div>El resultado obtenido es:
Segundo paso con VueJS
Cómo podeis ver, en el primer párrafo está escrito el texto tal cual de la propiedad enlace, si bien este texto es HTML. Es decir, se muestra el contenido tal cual es, porque no se ha especificado que el contenido es HTML.
Es, en el segundo párrafo, donde sí se ha indicado que queremos vincular un contenido que es código HTML. Se usa v-html para indicarlo y así no se tienen problemas.
El tercer párrafo llama a la función simple() y es necesario terminar con (). Si por casualidad no pones los paréntesis, verás impreso el desarrollo de la función, así que … ya sabes!
El cuarto parrafo está preparado para mostrar el contenido de una función que requiere de algumentos, y es evidente que la forma de pasar los argumentos es entre comillas.
El último párrafo es una mezcla de devolver contenido que es HTML y que además requiere de argumentos, donde el argumento es lo que se visualiza.
Te dejo el código completo:
<!DOCTYPE html> <html> <title>ManejandoDatos.es - VueJS 2</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div id="main"> <p>{{enlace}}</p> <p v-html="enlace"></p> <p>{{ simple() }}</p> <p>{{ con_argumentos('VueJS y Manejando Datos') }}</p> <p v-html="enlace2('Test')"></p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> <script> let app = new Vue({ el: '#main', data: { enlace: `<a href="https://manejandodatos.es" target="_blank">Manejando Datos desde Vue</a>` }, methods: { simple() { return 'Desde llamada!' }, con_argumentos(name) { return `Hola ${name}` }, enlace2(describe) { return `<a href="https://manejandodatos.es" target="_blank">${describe}>/a>` } } }) </script>¿Seguimos aprendiendo VueJS? Es hora de seguir con condicionales.
