Introduction to Vue.js

Vue.js is a progressive framework used to build applications. Vue.js provides simplicity and the learning curve for Vue.js is not as steep as it is for others. It supports the HTML, JavaScript, and CSS languages all together with each file. The Vue ecosystem has grown, and currently, both Vue2 and Vue3 are well supported. Throughout this course, we are going to use Vue2.

In this section, we will briefly go through some concepts before we move further through the course. These concepts are:

  • Directives
  • Form handling
  • Class and style binding

Let’s run our first Vue.js application. Click the “Run” button.

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
Run first Vue.js application

Directives

These are some of the directives used in the Vue.js HTML template section. Generally, a directive is a unique token in the markup that tells the library to do something to a DOM element.

The v-if, v-else and v-else-if directives

These directives will assist us in conditional rendering. In the example below, we will only render a username when the user is logged in; else, we will render Hello World. There is another directive, v-else-if, in case we have multiple conditions. Understanding v-if, v-else, and v-else-if is beneficial since we will be using them extensively.

<template>
  <!--Take note we have also used v-else-if-->
  <div v-if="loading">Loading...</div>
  <div v-else-if="isLogged">{{ username }}</div>
  <div>Hello World</div>
</template>

The v-for directive

The v-for directive is great for rendering lists. In the example below, we assume that we have an array with many users and only want to render each user’s username, and will use the v-for directive to accomplish this.

<template>
  <div v-for="(item, index) in items" key="index">{{ item.username }}</div>
</template>

The v-show directive

This is another directive we can use when we want to render a condition. The only difference is that with v-show, the contents always remain in the DOM, but if the condition fails, v-show will hide the content using the CSS display property. In the example below, the contents of user carts will be in DOM but hidden using the CSS display property if the variable user-cart is false.

<template>
  <div v-show="user-cart">User Cart</div>
</template>

The v-text and v-html directives

These can be used to show text content. The example below demonstrates how you can render text content. Use v-html to render raw HTML and v-text to render normal text.

<template>
  <div v-text="item.description"></div>
  <!--OR-->
  <div v-html="'<h2>Hello World</h2>'"></div>
  <!--OR-->
  <div>{{ item.description }}</div>
</template>

In the playground below, we will use some of the directives we have learned.

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
The Vue.js directives playground

Form handling

We can use the v-model directive to create two-way data bindings on the form input, textarea, and select elements. In this example, we have gone through the following directives:

  1. v-on or @: These directives are used to listen to DOM events and run some JavaScript when they’re triggered.
  2. v-model: This directive is used to create two-way data bindings on the form input, textarea, and select elements.

For form validation, we can use either vee-validate or vuevalidate or build a directive from scratch. Take a look at this example:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
Form handling with Vue.js

Class and style binding

We can declare your style in the styles tag within a Vue.js file. The CSS properties can be accessed by other files unless scoped is specified. The examples below show how we can declare CSS within the Vue.js file:

// using plain css
<style lang="css"></style>
<style  lang="css" scoped></style>

// using scss
<style lang="scss"></style>
<style lang="scss" scoped></style>

// using less
<style lang="less"></style>
<style lang="less" scoped></style>

We can also declare your CSS through inline styles, as follows:

<template>
  <div style="background-color: red"></div>
</template>

In the example below, we will see how to bind class and style in Vue.js.

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
Class and style binding

To create a Vue.js application, we are going to use Vue CLI. Vue CLI is an entire system for rapid Vue.js development. To scaffold a new Vue.js project, we can use the Vue.js command as shown below. This process reduces development time.

Installation

To install Vue CLI globally on our machine, we run the following command:

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

Once we have installed Vue CLI, we will use the following command to scaffold our new project:

vue create educative-whatsapp-application

Practical exercise

Let’s create our first Vue.js application using Vue CLI by running the following steps:

  1. Click “Connect” on the terminal.
  2. Install Vue CLI.
  3. Create your project using the command we have discussed above.
// install vue cli
npm install -g @vue/cli @vue/cli-service-global

// create a project
vue create educative-whatsapp-application

// cd into the project and run your application
cd educative-whatsapp-application && npm run serve
Terminal 1
Terminal
Loading...

Congratulations! You have configured Vue.js and created your first application.

Conclusion

We have gone through the basic to the advanced concepts in this lesson, which should get you started with Vue.js. A significant percentage of frontend web development revolves around working with forms, CSS, and conditions, and we have touched on each of these to get you started. For the best results, consider reading further about Vue.js and practicing more.