First steps with Vue.js
A few months ago I started studying React.js, seeing that it would probably be the next king of Frameworks and would be adopted by WordPress.
However, during the great Frameworks battle in WP, there was another great contender to be converted into the official Framework, this one was called Vue.
What is Vue?
As I mentioned before, Vue.js) (pronounced “view”) is a progressive Javascript framework designed to build user interfaces.
Even though it is a quite different Framework to React, they still have some similarities, both:
- Use a virtual DOM
- Provide ease to create components
- Focus on the main library, leaving things like routes and state management to secondary libraries
To see more ways in which these libraries are similar, you can follow the article on the official Vue site.
Why use Vue?
If Vue and React are so similar, why would I want to use Que instead of going straight to React?
The simplest answer is: it's your decision, I'm not going to tell you to change everything your ecosystem to use Vue simply because it's the trendy library in the community (or the second trendy library). The reality is that it doesn't hurt to try new tools, and thus be able to make an informed decision about which one is the one best suits your needs.
The biggest advantages that Vue has compared to its "rivals" (React, Angular, Ember, etc.) are:
- The ease of implementation
- The quick learning curve
- Its small size (~58.8K minified vs 133K of React)
Once again, in the end it's your decision, but if you want to give it a chance like I do, you can join me in my learning curve, and let's see the basics:
Hello World!
To start I will do the typical exercise that we all know by heart,
the Hello world!, in Vue version, so let's start, the first thing we need,
is to add Vue to our site, which we can easily do by adding this
line before our </body>.
1<!doctype html>23<html lang="es">4<head>5 <meta charset="utf-8">67 <title>Hello, World! - Vue.js</title>8 <meta name="description" content="First steps with Vue">9 <meta name="author" content="Mario Aguiar">1011</head>1213<body>14 <div id="app"></div>1516 <!-- develop version, include messages in the console -->17 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>18 <script src="hello-world.vue.js"></script>19</body>20</html>21
As you can see, it is a quite simple structure, we have our head, our
body, and we include our script. If you look closely, you will see that we also have a
div with an id of app, this will soon become the container for our application.
What follows now, is to initialize our application with Vue, in our hello-world.vue.js
1const app = new Vue({2 el: '#app',3});4
And that's it! That's how easy we've created our Vue instance, as you can see,
within that instance we have specified the el (element) that will serve as a container
for our application, and, as you can see, we used selectors as we
have always used since the jQuery times, so, #app means: the element
with an id of "app".
Passing data to the application
Now, we already have our active Vue instance, but it is not yet the Hello World we want, How to solve this? We could simply write hello world inside the container, but that's not fun, and it's not the way Vue does it, so instead of that, we will use what is known as template syntax.
First let's modify our HTML to look like this:
1<!doctype html>23<html lang="es">4<head>5 <meta charset="utf-8">67 <title>Hello World! - Vue.js</title>8 <meta name="description" content="First steps in Vue">9 <meta name="author" content="Mario Aguiar">1011</head>1213<body>14 <div id="app">15 {{ message }}16 </div>1718 <!-- development version, include messages in the console -->19 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>20 <script src="hello-world.vue.js"></script>21</body>22</html>23
If you look closely, you will see that we have added a {{ message }} inside our
application, this is known as template syntax and serves as a placeholder that
will be replaced by our... message.
Now we simply tell Vue what that message is that we want to replace:
1const app = new Vue({2 el: '#app',3 data: {4 mensaje: 'Hello World!',5 },6});7
Inside the Vue ecosystem, we can add an object called data, Vue will take
everything inside this object as application data, and will keep an eye on them
while the application is running, this means that any change made in data.message
will be reflected in our markup instantly.
Ready! If we now reload our application we will be able to see Hello World! reflected in it, our first application with Vue.