CompileTab

How to pass data from parent to child components in Vue.js?

To pass data from the parent component to the child component, Vue makes use of something called props. Props are custom attributes that can be declared on a component that enables one component to pass data to another. For example, <employee-list name="Bob" department="Accounting"></employee-list> Here, we have a employee-list component to which we are passing two props name with the value “Bob” and department property with the value “Accounting”. Let’s look at props in more detail and how it is used to pass data from parent to child components....

How to declare and use components in Vue.js?

Components are individual blocks that contain UI logic that can be reused in a Vue application. They make it easy to organize and maintain code while building large and complex applications. In this article, we will look at how to declare and use Vue components with examples. Declaring Vue Component Let us begin by creating a new application using the Vue CLI. vue create my-component Once, the installation is complete, we can navigate to the folder and run the server to load the application....

How to create applications using Vue CLI?

In this article, we will look at how to make use of Vue CLI to create and run Vue.js applications. Installation To install Vue CLI, I will be using npm to install the package globally using the below command on my terminal. npm install -g @vue/cli Once the installation is successful, we will create our first Vue CLI application using the following command. vue create first-project Here, first-project is the name of the project....

What is v-once and how to implement it in Vue.js?

v-once is a directive in Vue.js used when you want to render a value only once. Even if the value of the property changes in the future, the value under v-once does not change once the initial render is complete. Let’s look at an example to understand it better. To demonstrate the usage of v-once we will create a counter app that will increase the count by 1 every time a button is clicked....

How to prevent default behaviour of HTML form in Vue.js?

One of the common tasks when working with HTML form is to stop it from reloading when customers clicks the submit button. In this article, we will look at how to prevent this default behaviour of HTML forms in Vue. We will start by creating a simple HTML form. <form> <div> <label for="name">Name: </label> <input id="name" type="text" /> <input id="submit" type="submit" /> </div> </form> When we click on the submit button, the page reloads....

How to use the event object $event in Vue.js?

The event object is automatically passed to the method which handles the event. Let’s look at an example to see it in action. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>Click to change button changeColor</div> <button @click="changeColor">Click Here!</button> </div> </body> <script> const { createApp } = Vue; createApp({ methods: { changeColor(e) { console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, …} }, }, })....

How to bind events in Vue.js?

Vue.js makes use of v-on directive to listens to events. Using v-on we can call a method whenever an event is triggered. For example, to show a message when user clicks on a button. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>Click to generate a random number</div> <button>Click Here!</button> </div> </body> </html> In this example, we have a button that generates a random number every time the user clicks the button....

How to output raw HTML using v-html in Vue.js?

When you output data in Vue.js using the double curly bracket {{}}, it is interpreted as plain text. For example, Let’s say we have a data property title that holds the title string along with some HTML tags in it. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>{{title}}</div> </div> </body> <script> const { createApp } = Vue; createApp({ data() { return { title: "<h2> Getting started with Vue....

How to bind href attribute using v-bind in Vue.js?

In this article, we will look at how to use the v-bind directive to assign values to the href attribute. Let’s begin by writing a simple index.html that will contain an anchor tag for us to work with. We will be making use of Vue.js cdn in this example. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> Html code: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <a href="">Google</a> </div> </body> </html> Let’s create a new application instance using createApp() function in the same file inside a script tag....

How to implement generic classes in TypeScript?

Generic classes in TypeScript are useful when you want to deal with multiple data types. A generic class can be defined by having angle brackets containing a generic type parameter list after the class name. Let’s first look at how we define a regular class in TypeScript. class List { elements: string[] = []; addToList(value: string) { this.elements.push(value); } } let list = new List(); We have a class List with field elements and a method addToList() which simply pushes values passed to it....