<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Include this script tag in your HTML to use Vue.js via CDN.
npm install -g @vue/cli
Install Vue CLI globally on your machine to create and manage Vue.js projects.
vue create <project-name>
Create a new Vue project with the specified name.
npm run serve
Start a local development server to serve your Vue project.
npm install
Install all dependencies listed in the package.json file to generate the node_modules folder.
<input v-model="message" />
Creates a two-way binding on form input elements.
<div v-if="conditionA">A</div>
<div v-else-if="conditionB">B</div>
<div v-else>C</div>
Conditionally render elements based on the value of an expression.
<div v-show="isVisible">Hello</div>
Toggle the visibility of an element based on an expression.
<div v-cloak>{{ message }}</div>
Keep the element hidden until Vue's compilation is done.
event or @event<button v-on:click="doSomething">Click me</button>
<button @click="doSomething">Click me</button>
Listen to DOM events and execute methods.
<img v-bind:src="imageSrc" />
<img :src="imageSrc" />
Bind attribute values to expressions.
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
Render a list of items using a loop.
<template v-slot:header>
<h1>Header Content</h1>
</template>
Define slots for template content insertion in child components.
<button @click="handleClick">Click me</button>
Handle click events.
<input @keyup.enter="submitForm" />
Handle keyboard events like keyup and keydown.
<form @submit.prevent="handleSubmit">...</form>
Handle form submission events.
<div @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">...</div>
<div @dblclick="handleDoubleClick">...</div>
<div @mousemove="handleMouseMove">...</div>
Handle various mouse events.
<child-component :prop-name="parentData"></child-component>
Pass data to child components via props.
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
Define computed properties in components.
<child-component :prop-name="parentData"></child-component>
Use props to pass data from parent to child.
this.$emit('customEvent', data)
Emit events to send data from child to parent.
export default {
template: '<div>{{ message }}</div>',
data() {
return { message: 'Hello' };
},
props: ['propName'],
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
},
methods: {
handleClick() {
alert('Clicked!');
}
},
components: {
ChildComponent
}
}
Define template, data, props, computed, methods, and components.
Contains all libraries and dependencies.
Contains static assets.
Main HTML file.
Main source directory.
Static assets like images and CSS.
Contains Vue components.
Root Vue component.
Entry file for the Vue app.
Contains dependencies and scripts.
<input ref="inputRef" />
Access DOM elements directly.
<style scoped>
/* CSS rules */
</style>
Apply styles scoped to the current component only.
this.$emit('customEvent', data)
Send data from a child to a parent component via events.
<button @click.stop="handleClick">Click me</button>
Use event modifiers like .stop, .prevent.
<slot></slot>
Pass templates to components.
<template v-slot:header>
<h1>Header</h1>
</template>
Define named slots for specific template sections.
<teleport to="#destination">
<p>Teleported content</p>
</teleport>
Move content to a different part of the DOM.
mounted() {
console.log('Component mounted.');
}
Called after the component is inserted into the DOM.
updated() {
console.log('Component updated.');
}
Called after the component's DOM is updated.
unmounted() {
console.log('Component unmounted.');
}
Called after the component is removed from the DOM.
Using v-model for two-way data binding.
Handle routing in a Vue app.
<router-link to="/about">About</router-link>
Define navigation links.
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Create dynamic links.
this.$router.push('/home')
Navigate programmatically in your app.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => this.items = data);
Fetch data from an API.
Learn the differences between these two API styles.
mounted() {
console.log(this.$refs.inputRef);
}
Access template refs in the Options API.
import { ref, onMounted } from 'vue';
const inputRef = ref(null);
onMounted(() => {
console.log(inputRef.value);
});
Access template refs in the Composition API.
const count = ref(0);
Create reactive values with ref.
const state = reactive({ count: 0 });
Use reactive to create a reactive object.
const doubled = computed(() => count.value * 2);
Define computed values in the Composition API.
watch(() => count.value, (newVal, oldVal) => {
console.log(newVal);
});
watchEffect(() => {
console.log(count.value);
});
Watch specific data or dependencies.
const props = defineProps(['propName']);
Define props in the Composition API.
import { onMounted, onUpdated, onUnmounted } from 'vue';
onMounted(() => { console.log('Mounted'); });
onUpdated(() => { console.log('Updated'); });
onUnmounted(() => { console.log('Unmounted'); });
Use lifecycle hooks inside the setup method.