VueJS – Reactive Interface

VueJS provides options to add reactivity to properties, which are added dynamically. Consider that we have already created vue instance and need to add the watch property. It can be done as follows − Example <html> <head> <title>VueJs Instance</title> <script…

VueJS – Hàm render

We have seen components and the usage of it. For example, we have a content that needs to be reused across the project. We can convert the same as a component and use it. Let’s take a look at an…

VueJS – Mixins

Mixins are basically to be used with components. They share reusable code among components. When a component uses mixin, all options of mixin become a part of the component options. Example <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src…

VueJS – Routing

VueJS does not have a built-in router feauture. We need to follow some additional steps to install it. Direct Download from CDN The latest version of vue-router is available at https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com provides npm-based cdn links. The above link is always…

VueJS – Directives

Directives are instruction for VueJS to do things in a certain way. We have already seen directives such as v-if, v-show, v-else, v-for, v-bind , v-model, v-on, etc. In this chapter, we will take a look at custom directives. We…

VueJS – Transition and Animation

In this chapter, we will discuss the transition and animation features available in VueJS. Transition VueJS provides various ways to apply transition to the HTML elements when they are added/updated in the DOM. VueJS has a built-in transition component that…

VueJS – Rendering

In this chapter, we will learn about conditional rendering and list rendering. In conditional rendering, we will discuss about using if, if-else, if-else-if, show, etc. In list rendering, we will discuss how to use for loop. Conditional Rendering Let’s get…

VueJS – Sự kiện

v-on is the attribute added to the DOM elements to listen to the events in VueJS. Click Event Example <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <button v-on:click = "displaynumbers">Click ME</button>…

VueJS – Binding

In this chapter will learn how to manipulate or assign values to HTML attributes, change the style, and assign classes with the help of binding directive called v-bind available with VueJS. Let’s consider an example to understand why we need and when…