vue js tutorial
Vue.js Tutorial
Step 1: Set Up Vue.js
- Install Vue.js using a package manager like npm or yarn. Open your terminal and run the following command: npm install vue or yarn add vue.
Step 2: Create a Vue Instance
- In your HTML file, include the Vue.js library by adding the following script tag: <script src="https://cdn.jsdelivr.net/npm/vue"></script>.
- Create a new Vue instance by adding the following code inside a <script> tag:
javascript
const app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
This code creates a new Vue instance and binds it to an element with the id "app". The data property defines the initial data for the instance, in this case, a message variable with the value "Hello, Vue!" [6].
Step 3: Display Data in the HTML
- In your HTML file, add an element with the id "app" where you want the Vue instance to be rendered: <div id="app"></div>.
- To display the data from the Vue instance in the HTML, use double curly braces {{ }} and the name of the data property. For example, to display the message variable, add the following code inside the <div id="app"> element: {{ message }}[6].
Step 4: React to User Input
- To make the data interactive, you can bind it to user input using the v-model directive. For example, to bind the message variable to an input field, add the following code inside the <div id="app"> element:
```html
{{ message }}
``
Now, when you type in the input field, the message variable will be updated and displayed in the
` element.
Step 5: Conditionally Render Elements
- You can use the v-if directive to conditionally render elements based on a condition. For example, to render a paragraph only if the message variable is not empty, add the following code inside the <div id="app"> element:
```html
The message is: {{ message }}
``` The paragraph will only be displayed if the message variable is not empty.
Step 6: Handle Events
- You can use the v-on directive to handle events. For example, to call a method when a button is clicked, add the following code inside the <div id="app"> element:
html
<button v-on:click="sayHello">Click me</button>
In the Vue instance, define the sayHello method:
javascript
const app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
sayHello() {
alert(this.message);
}
}
});
When the button is clicked, the sayHello method will be called and an alert with the message will be displayed.
Step 7: Use Components
- Vue.js allows you to create reusable components. To create a component, define a new Vue instance with its own data and methods. For example, to create a custom button component, add the following code inside the <div id="app"> element:
html
<custom-button></custom-button>
In the Vue instance, define the CustomButton component:
javascript
Vue.component('custom-button', {
template: '<button v-on:click="handleClick">Click me</button>',
methods: {
handleClick() {
alert('Button clicked!');
}
}
});
Now, when the <custom-button> element is rendered, it will display a button that triggers the handleClick method when clicked [6].
Step 8: Explore More Features - Vue.js offers many more features and concepts, such as computed properties, watchers, lifecycle hooks, and routing. You can explore these features in the official Vue.js documentation and various online tutorials and resources.
I hope this explanation helps you get started with Vue.js! Let me know if you have any further questions.