Vue.js is a popular JavaScript framework for building web applications. It is designed to be easy to use, lightweight, and modular. In this beginner’s guide, we will take a look at how to get started with Vue.js using version 3 (also known as Vue 3).
Installation
There are a few different ways to install Vue.js, but the simplest is to include it as a script in your HTML file. You can download the latest version of Vue.js from the official website or use a CDN (Content Delivery Network) like jsDelivr or unpkg.
Here is an example of how to include Vue.js in your HTML file using a CDN:
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.js"></script>
You can also install Vue.js using a package manager like npm or yarn. To do this, you will need to have Node.js installed on your machine.
Once you have Node.js installed, you can open a terminal and run the following command to install Vue.js using npm:
npm install -g vue
Or, if you prefer to use yarn, you can run the following command:
yarn global add vue
Creating a Vue.js Project
Once you have Vue.js installed, you can start creating your first Vue.js project. There are several ways to do this, but one of the easiest is to use the Vue CLI.
The Vue CLI is a command-line interface for quickly creating Vue.js projects. To install it, open a terminal and run the following command:
npm install -g @vue/cli
Or, if you prefer to use yarn:
yarn global add @vue/cli
Once the Vue CLI is installed, you can create a new Vue.js project by running the following command:
vue create my-project
Replace “my-project” with the name of your project. This will create a new directory with the same name as your project and set up a basic Vue.js project inside it.
Your First Vue.js App
Now that you have a Vue.js project set up, you can start building your first Vue.js app.
To create a Vue.js app, you will need to define a new Vue instance and specify a template and an optional script.
Here is an example of a basic Vue.js app that displays a message on the screen:
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue.js!"
}
}
}
</script>
In the script, we define a new Vue instance using the export default syntax. Inside the instance, we have a data function that returns an object containing the data for our app. In this case, we have a single property called message with a value of "Hello, Vue.js!".
To display the message on the screen, we use the {{ }} syntax in the template to interpolate the value of the message property.
To start our Vue.js app, we need to tell Vue.js which element in our HTML file should be used as the root element for the app. We can do this using the el property in the Vue instance:
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
el: "#app",
data() {
return {
message: "Hello, Vue.js!"
}
}
}
</script>
In this example, we are using the #app element as the root element for our Vue.js app. You can use any valid CSS selector to specify the root element.
To see our Vue.js app in action, we need to include the #app element in our HTML file:
<div id="app">
<!-- Our Vue.js app will go here -->
</div>
Now when you load the HTML file in a web browser, you should see the message “Hello, Vue.js!” displayed on the screen.
Components
One of the key features of Vue.js is the ability to create reusable components. A component is a self-contained piece of functionality that can be reused throughout your app.
To create a component in Vue.js, you can define a new Vue instance using the Vue.component function:
Vue.component("my-component", {
template: "<p>This is my component</p>",
data() {
return {
message: "Hello, Vue.js!"
}
}
});
In this example, we are defining a new component called “my-component” with a template and a message property. We can then use this component in our app by including the <my-component></my-component> element in our template:
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
export default {
el: "#app"
};
</script>
When the app is loaded in a web browser, the component will be rendered and the message “This is my component” will be displayed on the screen.
Props
In addition to data, components can also accept input from the parent component using props. Props are like parameters for a component, and they can be used to pass data from the parent component to the child component.
To define a prop in a component, you can use the props property in the component's definition:
Vue.component("my-component", {
props: ["message"],
template: "<p>{{ message }}</p>"
});
``
To pass a prop to a component, you can include it as an attribute in the component’s element:
<template>
<div>
<my-component message="Hello, Vue.js!"></my-component>
</div>
</template>
<script>
export default {
el: "#app"
};
</script>
In this example, we are passing a message prop to the my-component element with a value of "Hello, Vue.js!". The component will then render the message "Hello, Vue.js!" on the screen.
Props are a powerful feature of Vue.js that allow you to create flexible and reusable components.
Computed Properties
In addition to data and props, Vue.js also provides a way to define computed properties. Computed properties are like functions that are automatically re-evaluated whenever their dependencies change. They are useful for creating derived data that is based on other data in your app.
To define a computed property in a Vue instance, you can use the computed property:
export default {
el: "#app",
data() {
return {
firstName: "John",
lastName: "Doe"
}
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
};
In this example, we have a computed property called fullName that is calculated based on the firstName and lastName data properties. We can use the computed property in our template like any other data property:
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
export default {
el: "#app",
data() {
return {
firstName: "John",
lastName: "Doe"
}
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
};
</script>
When the app is loaded in a web browser, the computed property will be calculated and the message “John Doe” will be displayed on the screen.
Conclusion
This beginner’s guide to Vue.js provides a quick overview of some of the key features of the framework. Vue.js has many more features and capabilities, including support for routing, state management, and server-side rendering. To learn more about Vue.js, you can refer to the official documentation or explore the many resources and tutorials available online.