The v-html directive is a Vue.js directive used to update a element’s inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML. First, we will create a div element with id as app and let’s apply the v-html directive to this element with data as a message. Now we will create this message by initializing a Vue instance with the data attribute containing our message....

A Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events. Functions defined inside the methods object can be further called for performing actions....

This Web Development Projects article provides you with an overview of different web development projects with Source Code and ideas, categorized by different types of web technologies....

This article will tell us about how to close a modal from a button using vue.js. To close a modal using vue.js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the action ( here, hiding the modal )....

The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes. First, we will create a div element with id as app and let’s apply the v-bind directive to a element. Further, we can use a button execute a function when click even occurs which will inverse the value of data....

The v-on:keyup directive is a Vue.js directive used to add an event listener to an button in the keyboard. First, we will create a div element with id as app and let’s apply the v-on:keyup directive to the input element. Further, we can execute a function when we press the associated key....

The v-cloak directive is a Vue.js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready. First, we will create a div element with id as app, and let’s apply the v-cloak directive to an element....

Node.js: It is a JavaScript runtime environment, which is built on Chrome’s V8 JavaScript engine. It is developed by Ryan Dahl who is a Software Engineer working at Google Brain, he also developed Deno JavaScript and TypeScript runtime. Node.js is cross-platform and open-source which executes JavaScript code on the server-side, i.e. outside the web browser. Due to its single-threaded nature, it is mainly used for event-driven, non-blocking servers, a non-blocking I/O model makes it lightweight and efficient, hence it is best for data-intensive real-time applications. It is used by traditional web-sites and back-end API services. It is designed with a real-time, push-based architecture that runs across distributed devices. The HTTP (Hypertext Transfer Protocol) module provides a set of classes and functions for building an HTTP server. We use native Node like file-system, path, and URL for this basic HTTP server....

A Filter is a simple JavaScript function which is used  to change the output of a data to the browser. Filters in Vue.JS don’t change the data directly wherever we store them, it only applies formatting to our data. The data remains the same only the output of a data to a browser is changed. Vue.JS doesn’t give these filters by default, so we have to make these filters. With Vue.JS , we can use filters in two different ways i.e. Global filter and Local filter. Global filter provides access all the components while Local filter only allows us to use our filter inside the component it was defined....

v-else-if directive is a Vue.js directive used to toggle the display CSS property of an element depending on a condition when the if condition is not satisfied. First, we will create a div element with id as app and let’s apply the v-else-if directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing the value....

This article covers the difference between v-model and v-bind in Vue.js. The following steps are used to explain their differences....

A Watcher in Vue.js is a special feature that allows one to watch a component and perform specified actions when the value of the component changes. It is a more generic way to observe and react to data changes in the Vue instance. Watchers are the most useful when used to perform asynchronous operations....