How to learn VueJS

by Alexandra Murtaza

Vue is a very popular framework nowadays and it is still growing fast. If you want to build a highly interactive, dynamic and data-driven web application, VueJS might be your answer. Also, Vue is relatively easy to learn, especially with its excellent documentation.

Who’s using Vue already?

If you look at Silicon Valley companies alone, you probably won’t find many high-profile Vue usages because they naturally tend to rally behind tech used and validated by Facebook and Google. However, Vue has a very decent presence in development/consultancy shops, and one of the vendor projects even made it on to Facebook property (yes, this site is built with Vue).

Regarding enterprise usage, Vue has a much more international roster, including “the big three” of Chinese tech industries — Alibaba, Baidu & Tencent, and some of the highest-valued unicorns, e.g., Xiaomi, Didi Chuxing, Ele.me & DJI.

In Japan, Vue is also used by some of the most important enterprises like Line corp & Nintendo. In the UK, Sainsbury’s is starting to adopt Vue.js on a broader scale as well. Also, there are some excellent open source projects now using Vue.js extensively, e.g., Laravel, GitLab & PageKit.

Oh, and here’s a company that switched to Vue and got acquired.

So if your primary concern is that “are there companies using Vue.js in production?”, the answer is heck yeah, there are quite a lot.

Where to start?

I would recommend installing Vue-cli

Then, initialize a new project using the following command:

vue init webpack test

This will initialize a Vue.JS project named “Test” with a web pack template. If you don’t know what web pack is, I recommend that you read a bit more about Javascript (ECMAScript) in general and about modern tools/frameworks that can help you with your project.

You now have a complete Hello-world project started with excellent features like Webpack and hot-reloading. (Change the code, and the webpage will refresh)

You can look at the code, play around with it and try to add some components and stuff. This way you don’t have to set up the whole project before writing Vue.js code.

Of course, it’s always good to read the documentation, so you know what Components, Directives, etc. are.

Success!

Edit: They also have a simple template that you can start with.

This is based on one HTML file and doesn’t include Webpack.

For when you want to make something small, or don’t know Webpack.

Basic Components

1. Navigation Menu

To kick things off, we’re going to build a simple navigation bar. There are a few necessary components almost every Vue.js app need to have. They are:

  • The model, or in other words our app’s data. In Vue.js this merely is a JavaScript object containing variables and their initial values.
  • An HTML template, the correct terminology for which is view. Here we chose what to display, add event listeners, and handle different usages for the model.
  • **ViewModel **— a Vue instance that binds the model and view together, enabling them to communicate with each other.

The idea behind these fancy words is that the model and the view will always stay in sync.

Changing the model will instantly update the view, and vice versa. In our first example, this is shown with the active variable representing which menu item is currently selected.

Best Vue.js tutorials recommended by programming community: https://hackr.io/tutorials/learn…

<div id="main">
<! — The navigation menu will get the value of the "active" variable as a class. →
<! — To stops the page from jumping when a link is clicked
we use the "prevent" modifier (short for preventDefault). →
<nav v-bind:class="active" v-on:click.prevent>
<! — When a link in the menu is clicked, we call the makeActive method,
defined in the JavaScript Vue instance. It will change the value of "active". →
<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
</nav>
<! — The mustache expression will be replaced with the value of "active".
It will automatically update to reflect any changes. →
<p>You chose <b>{{active}}</b></p>
</div>

As you can see working with the library is pretty straightforward. Vue.js does a lot of the work for us and provides familiar, easy to remember syntax:

  • simple JavaScript object for all the options
  • {{double brackets}} for templating
  • v-something inline attributes for adding functionality directly in the HTML.

2. Inline Editor

In the previous example, our model had only a couple of predefined values.

If we want to give the users the ability to set any data, we can do two-way binding and link together an input field with a model property.

When text is entered, it is automatically saved in the text_content model, which then causes the view to update.

<!-- v-cloak hides any un-compiled data bindings until the Vue instance is ready. -->
<!-- When the element is clicked the hideTooltp() method is called. -->
<div id="main" v-cloak v-on:click="hideTooltip" >
<!-- This is the tooltip.
v-on:clock.stop is an event handler for clicks, with a modifier that stops event propagation.
v-if makes sure the tooltip is shown only when the "showtooltip" variable is truthful -->
<div class="tooltip" v-on:click.stop v-if="show_tooltip">
<!-- v-model binds the contents of the text field with the "text_content" model.
Any changes to the text field will automatically update the value, and
all other bindings on the page that depend on it. -->
<input type="text" v-model="text_content" />
</div>
<!-- When the paragraph is clicked, call the "toggleTooltip" method and stop event propagation. -->
<!-- The mustache expression will be replaced with the value of "text_content".
It will automatically update to reflect any changes to that variable. -->
<p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>

Another thing to note in the above code is the v-if attribute . It shows or hides a whole element depending on the truthfulness of a variable. You can read more about it here.

3. Order Form

This example illustrates multiple services and their total cost. Since our services are stored in an array, we can take advantage of the v-for directive to loop through all of the entries and display them.

If a new element is added to the array or any of the old ones is changed, Vue.js will automatically update and show the new data.

<! — v-cloak hides any un-compiled data bindings until the Vue instance is ready. →
<form id="main" v-cloak>
<h1>Services</h1>
<ul>
<! — Loop through the services array, assign a click handler, and set or
remove the "active" css class if needed →
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
<! — Display the name and price for every entry in the array .
Vue.js has a built in currency filter for formatting the price →
{{http://service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
<! — Calculate the total price of all chosen services. Format it as currency. →
Total: <span>{{total() | currency}}</span>
</div>
</form>

To display the prices in a correct format we will have to define a simple currency filter. Filters allow us to lazily modify or filter the model data. To define a custom filter we have to use the following syntax:

// Define a custom filter called "currency".
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});

As you can see our filter is pretty straightforward — it adds a dollar sign and proper number decimals.

Just like in Angular filters are applied using the | syntax — {{ some_data | filter }}.

4. Instant Search

Here we will create an app, that exhibits some of the articles on our website. The app will also have a text search field allowing us to filter which articles are displayed.

All of the articles will be held in an articlesarray, and those articles that match the search query will be in a computed property called filteredArticles.

<form id="main" v-cloak>
 <div class="bar">
 <! — Create a binding between the searchString model and the text field →
 <input type="text" v-model="searchString" placeholder="Enter your search terms" />
 </div>
 <ul>
 <! — Render a li element for every entry in the computed filteredArticles array. →
 <li v-for="article in filteredArticles">
 <a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
 <p>{{article.title}}</p>
 </li>
 </ul>
</form>

The input field is bind to the searchString model. When text is entered the model is instantly updated and the computed filtered articles array is generated again.

This way we can create a real-time search without having to worry about rendering or setting up event listeners — Vue.js handles all that!

5. Switchable Grid

In our last example, we will demonstrate a common scenario where a page has different layout modes. Just like in the previous app we will be showing a list of articles from tutorialzine.com stored in an array.

By pressing one of the buttons in the top bar you can switch between a grid layout containing large images, and a list layout with smaller images and text.

Notable Resources:

  1. VueJS Expo — Showcasing the best work done with Vue.JS
  2. Free Vue Dashboard — MIT Licensed to kick-start your next project
  3. Creative Tim - UI Tools for VueJS