In the first post about VueJS, I already told you I’m delighted, but I haven’t shown a line of code yet, so it’s time to start with the first step with VueJS.
Installation
In the VueJS documentation there is a specific section for the installation of the library, which proposes several alternatives. First and foremost, it does not support IE version 8 and earlier, i.e. only modern browsers can make use of it. I think that at this point, IE 8 is more than outdated and if you still have that browser…. you should update it!
First step with VueJS
I’m gonna leave the whole code, and then we gut it. For this first example, HTML is very basic:
<!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">
<input type="text" v-model="message" />
<h3>{{message}}</h3>
</div>
</body> </html>
The initial part is the basics to create an HTML document, while the part that needs to be explained is the div called #app, and the Javascript code.
For the first example, the most convenient is to use the library from a CDN, that is, a library repository of libraries:
let app = new Vue({el:'#main', data:{message:'Primer paso con VueJS!'}})
Once loaded, we can now make use of the Vue object, which is the one that takes care of everything, and store it in a let app variable.
let app = new Vue({el:'#main',
data:{message:'Primer paso con VueJS!'}})
The Vue object needs an object, where it is basic to complement the reserved word “el“, which is the one that links with an element of the DOM, in this case, the DIV called #app.
The second almost mandatory property is data, which is where the object properties are written, and which you can link to the HTML of the “element” you are working on.
The DIV #app has a property {{mensaje}} that is between keys, and is what is rendered by the corresponding value.
Learning VueJS
Easy, isn’t it?
Data properties can be called whatever they are called, although in this case, it has been called message, but it could be called otherwise. In the working DIV it must be called the same, so that there is linkage (does this data-binding thing ring a bell?).
Las propiedades de data pueden llamarse como sea, aunque en este caso, se ha llamado message, pero se podía llamar de otra forma. En el DIV de trabajo debe llamarse igual, para que haya vinculación (¿os suena esto del data-binding?).
Data-Binding in action
We are going to modify a little the DIV part to see what data-binding is. We put an input, and we do that as the value to introduce changes, this way the title will be modified:
<div id="main">
<input type="text" v-model="message" />
<h3>{{message}}</h3>
</div>
The outcome:
segundo VUEJS
And after an update, the title is updated too.
segundo VUEJS2
The secret to effective data-binding requires marking with the v-model property, and assigning the correct property. In our case, message.
Finally, there is another property that is v-bind, which is used to link a value in Vue to a property. For example, to modify the value of a link property, use: v-bind:href=”property”.
The code would remain:
Isn’t it simple? Well… we go on, because there is more, and this has only been the first example!