According to the JavaScript 2017 front-end library status survey , Vue.js is the front-end library that developers most want to learn. I'm here to explain why I think this is also the reason to build a simple App with you by using Vue.
I recently did an introductory video with Evan You, Chris Fritz, Sarah Drasner, and Adam Jahr, and now you can find it on the http://vuejs.org homepage. Below is the text version of the video.
Great JavaScript Migration
As you know, JavaScript has matured a lot over the past 10 years, and most of the code that works on the server side has been migrated to the browser. As this becomes more complex, the framework also becomes more organized.
I'm not going to tell you why one is better than the other, although there is a detailed comparison on the official site.
Vue.js aims to be an approachable, versatile, performant, maintainable, testable JavaScript framework. Vue is also designed for advancement, which means if you have an existing application with a front end that only takes up one part and you need a more interactive experience then you can use Vue.
Alternatively, you can build more business logic on the front end from the start. Vue's core libraries and ecosystem require scale.
Like other front-end frameworks, Vue lets you divide web pages into reusable logical components. Each has its own HTML, CSS and JavaScript to render every part of the page.
An example of how to break things down into components
Our first Vue project
I want to give you a feel for the code before you have seen Vue and tell you some syntax. I won't go into the details, but we'll see some core concepts.
Like many JavaScript applications, we start by displaying data to the page.
Getting started building with Vue is easy.
You can see in the image above we include the Vue library, create an instance of Vue, and insert it into our root element via the App ID. EL stands for element. We'll also move the data into an object and convert X into an expression with double curly braces.
As you can see it works:
Nothing fancy, but Vue works like magic when the data starts changing. If I jump to the console, change the value of product, and see what happens:
Vue is responsive, i.e. when our data changes, Vue updates all the places where it is used on our web pages.
This has nothing to do with any kind of data, not just strings. So instead of using a single product, we use a range of products and update the H2 to an unordered list. To create a new <li> element for each product, we'll use a special attribute (aka directive) Vue called v-for. This way, each product can get its own list item.
If we jump into the browser, this is what we see:
This is still a bit contrived, so let's clear the list first and then pull our product list from the actual API, which might come from some database.
If we look at what's printed to the page, we'll see:
As you can see, each list item displays the returned object. In order for this data to be readable by humans, we need to change the way it is displayed.
Our result is:
We want to notice the item with quantity 0, let's add a <span,> with the content "out of stock". We only want the occurrences of our item.quantity == 0, so we'll use Vue's v-if directive.
Of course, our jackets are out of stock:
What if we wanted to print out the total number of products in our list? We need to create a computed property called totalproducts that returns the total quantity of our products. If you are not familiar with the JavaScript reduce function, I will explain that it will add all quantities from each product.
As you can see below, we can now print our total inventory.
This might also tell you a good time to use the vue.js Chrome extension tool. A nice feature of the extension tool is that you can inspect the data loaded on the page.
And some Vue responses, let's see what happens when we delete 2 items in the array. As you can see below, not only have our roster updated, but so have our totals.
Next, I'll show you how to increase the interactivity of this page by using buttons. We will create an add button for each product and when this button is clicked, we will increment a quantity.
Note that when we add an item (below), not only does the total inventory get updated, but if we add our jacket product, our inventory notification disappears.
But what if we just wanted to write the number of jackets or hiking socks? We just need to create a new input field and bind it to our product quantity point to it via v-model and specify that this is always a number.
You'll notice that I can now enter the total quantity for each item and get an instant update. I can even set the quantity to zero and I get my inventory and my add button still works.
After you finish this version of the project, go to JSFiddle to run it, and of course you can go to Huizhi (www.hubwiz.com) to run it.
Some features of Vue
If we build it into a larger application, then we start breaking it down into components and files to make the program more organized.
Vue even provides a command line interface that makes it simple to start quickly developing real projects. As you can see below, the init command can be used to start a new project.
We can also use single file - .Vue component file which contains HTML, JavaScript, CSS and even SCSS.
What you see here only scratches the surface of what Vue can do. There are many things that can help you build, organize, and scale your front-end applications. To really start coding, I will recommend two resources. One is to download the resource manual table here: http://www.vuemastery.com/download-1, and the other is the official document: https://vuejs.org/v2/guide/.
Of course, you can also try the vue.js course of Huizhi.com, which is the best cost-effective online method: http://www.hubwiz.com
Finally, I would like to thank Evan You, Chris Fritz, Sarah Drasner, and Adam Jahr for helping me create this content and video.
Huizhi.com, translated by Xiaozhi. Content has been modified.