Introduction to VueJS

Apart from continuing to work with Node.js. I also started a new tutorial that introduces you into Vue.js, ReactJS, and Angular. This tutorials are just an introduction so later on you can choose which framework you would want to go more in depth. This week I start learning about Vue.js and how it is used.

For this section of the tutorials I started first by getting Vue from a unpkg link in the Vue site. By adding this link to our HTML this allowed me to start using Vue in my html and js files. In my html I had to first create an element that Vue was going to control. I made a div with an ID of “app”, the ID can be anything, this will allow you to control the DOM in that div with Vue. Once I did that I was able to go into my js file and create my first Vue instance. In my Instance I put there different things EL: which holds the ID of the div you create, then there is data: which holds data objects that can be changed an updated in the HTML with Vue, the last thing I went over was methods: which holds functions that can be call to update the data objects.

After going over these few things. I learned a few directives that can be used in Vue. Directives are special attributes with the “v-” prefix. these attributes are special and can be understood by Vue. I learned about v-on, v-for, v-if, and v-bind. You can use v-on to ad event to an html element. In the code above I added a click event to the button. When this button is click it will call the function changeName and the output of this element depended on the method it called. I also used v-for, which is used for loops. In my code I had to use this attribute to create a new “li” element for every item in the list. For every new item that was add to the list data the html file created a new li. The next directive I used was v-if. This directive is used when you want to show an element on your page when a statement is true. In my code above I used it so “name updated” appear when the name Max changed to Anna. The last directive I used was v-bind. I learned that you can use v-bind to give an element a dynamic ID or class. I used this directive to give every new LI an ID. I also used it to style each LI based on their ID. If the method getColor was true for a LI then the background color would be green if it wasn’t then the color would be red.

This is what I’ve learned about Vue so far and I’m excited to learn more about it and other frameworks.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *