I already told you why I fall in love with VueJS, and you have read how easy is working with VueJS, how easy is the first step using this framework, a cool feature for success. Today it is time to go further and keep on learning data-binding with VueJS.
Methods
The Vue object needs at least one element to work with ‘el‘, and also, a second property is needed ‘data‘, the place where you can store the properties of the object. Let’s keep on going with methods, the place where you store the functions used by the Vue object you are working with.
the methods are functions, some with parameters and other without parameters.
Let’s write some Javascript’s code, and let’s analyze it:
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>`
}
}
})
The property “el” is included and also data, but we have included methods, where we have prepared 2 functions: one without arguments, and the other with argument. In both cases, there is a return response, plus we use the ` quotes from ES6 to work with character strings.
It is time for the HTML code:
<div id="main">
{{enlace}}
{{ simple() }}
{{ con_argumentos('VueJS y Manejando Datos') }}
</div>
The outcome is:
Segundo paso con VueJS
As you can see, in the first paragraph is written the text as it is from the link property enlace, although this text is HTML. That is, the content is shown as it is, because it has not been specified that the content is HTML.
It is in the second paragraph that we have indicated that we want to link content that is HTML code. You use v-html to indicate this so you don’t have any problems.
The third paragraph calls the simple() function and it is necessary to end with (). If you don’t put the parentheses in, you’ll see the development of the function printed, so… you know!
The fourth paragraph is prepared to show the content of a function that requires some sort of quotes, and it is clear that the way to pass the arguments is in quotation marks.
The last paragraph is a mixture of returning content that is HTML and also requires arguments, where the argument is what is displayed.
Here you have the full code:
<!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">
{{enlace}}
{{ simple() }}
{{ con_argumentos('VueJS y Manejando Datos') }}
</div>
</body>
</html>
Are you ready for more VueJS?