Web Development5 practical use cases of Vue.js

At the beginning

The Vue philosophy.js is about providing the simplest possible API for creating a real-time two-way data binding between a view (HTML template) and a model (JavaScript object).

The easiest way to install Vue.js - just attach it with the <script> tag to the end of the HTML document. The entire library is contained in a single js file, which can be downloaded from the official website or imported directly via CDN:

If you want to use Node, then Vue is available as an npm module. The module has its own interface in the terminal for flexible project configuration.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>

Below are five examples of using Vue.js with links to live demos with code and comments

1. Navigation menu

Let's build a simple navigation bar. There are a few basic components that all Vue-based applications should have:

• Model – in other words, the application data. Within the library, it is a js object containing variables and their source values.

• View-HTML code that displays data for the user and contains eventListeners for interacting with the model.

• ViewModel – in MVC terminology, this would be a controller. In fact, within the framework of Vue.js ViewModel – the link between the model and the view.

As you can see, working with the library is quite simple. Vue.js does a great job and provides a convenient and familiar syntax:

• Simple js object for options

• {{Double brackets}} for text interpolation within templates

• Built-in directives - "v-something" attributes for adding JavaScript functionality directly to HTML. 

2. Built-in editor

In the previous example, our model had only a couple of predefined values. If we want to give users the ability to change any data, we need to do a two-way data binding and combine the input field with the model property. When text is entered, it is automatically saved to the text_content model, which then triggers an update for the view.

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

3. Order form

This example shows the list of services and the total cost of the selected ones. Since our services are stored in an array, we can use the v-for directive to iterate through all the records and display them. If a new element is added to the array or any of the old ones are changed, Vue will automatically update the data and show the new ones.

To display prices in the correct format, we need to define a simple currency filter. Filters allow you to change or filter model data. To define a custom filter, use the following syntax:

4. Instant search

Now let's create an application that will present some sample articles. The app will also have a search text box that allows you to filter which articles will be displayed. All articles will be stored in an array, and those that match the search query will be in the filteredArticles array.

The input field is bound to the searchString model. When the text is entered, the model is instantly updated and the filteredArticles array is generated again. This way we can create a real-time search without having to worry about rendering or configuring event listeners.

5. Switchable grid

In this last example, we will test a common scenario on Vue when the page has different layout modes. As in the previous application, we will show a list of articles stored in the array.

Clicking one of the buttons in the top panel will switch the display mode between a grid containing large images and a list of layouts with smaller images and text.

In conclusion 

Vue.js can do much more than what we saw in these examples. The library is able to include animation, custom components, and many other functions. Therefore, we recommend that you familiarize yourself with the excellent official documentation of the library.