Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
In Vue.js, the primary way of interacting with the DOM (Document Object Model) is through Vue's template syntax and the directives it provides, as well as reactive data properties. Vue.js is designed to abstract away direct DOM manipulation as much as possible for a more declarative approach. This makes the code easier to maintain and less prone to errors.
However, there are times when you might need to directly interact with the DOM in Vue. Here are a few ways to do that:
Refs
In Vue, you can use the ref attribute in the template to create a reference to a DOM element:
<template>
<div ref="myDiv">Hello world!</div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(() => {
console.log(myDiv.value); // Logs the div element to the console
});
return { myDiv };
}
}
</script>
The ref attribute in the template corresponds to a ref in the component's setup function. This gives you a reactive reference to the DOM element which can be accessed with .value.
v-html
The v-html directive is used to output raw HTML. Vue.js will interpret the content as plain HTML and render it directly into the DOM:
<template>
<div v-html="rawHtml"></div>
</template>
<script>
export default {
data() {
return {
rawHtml: '<span style="color: red">This is some HTML</span>'
}
}
}
</script>
Note: Be careful when using v-html to insert user-generated content, as it exposes your application to Cross-Site Scripting (XSS) attacks.
v-once
The v-once directive renders static content. After the first render, the element and all its children will be considered static and skipped in subsequent re-renders. This can be useful when you know the content won't change and want to optimize update performance:
<template>
<div v-once>This will never change: {{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
nextTick function
In Vue.js, the nextTick function can be used to wait until the next DOM update cycle to execute a function:
<template>
<div ref="myDiv">Hello world!</div>
</template>
<script>
import { ref, nextTick, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(async () => {
myDiv.value.textContent = 'Hello Vue!';
await nextTick();
console.log('DOM updated');
});
return { myDiv };
}
}
</script>
In this example, nextTick is used to wait until the text content of myDiv is updated in the DOM before logging 'DOM updated' to the console.
In general, it's recommended to avoid direct DOM manipulation in Vue.js and instead use Vue's reactive data properties and directives. However, the above techniques can be useful in certain situations. Always be aware of the potential issues with direct DOM manipulation, such as breaking Vue's reactivity system or introducing security risks.
Vue 3.0 el Option:
The el option in Vue 3.0 specifies the element to mount the Vue instance.
const app = createApp({
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app'); // Mounting to the element with id="app"
Vue 3.0 template Option:
The template option defines the template to be used for rendering the Vue instance.
const app = createApp({
template: '<p>{{ message }}</p>',
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 render Option:
The render option provides a function for manual rendering. It takes h (hyperscript) as an argument.
const app = createApp({
render(h) {
return h('p', this.message);
},
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
DOM-related Options in Vue 3.0:
Vue 3.0 provides DOM-related options like data, props, methods, computed, etc., to define the component's behavior.
const app = createApp({
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
});
Vue 3.0 Mounting Options:
Mounting options, such as beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted, allow you to hook into different lifecycle stages.
const app = createApp({
data() {
return {
message: 'Hello, Vue!',
};
},
mounted() {
console.log('Component is mounted');
},
});
app.mount('#app');
Vue 3.0 Mounting a Component to the DOM:
Use mount to attach the Vue instance to the specified element in the DOM.
const app = createApp({
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 DOM Element Binding:
You can bind data to DOM elements using directives like v-bind.
<div v-bind:class="{ active: isActive }"></div>
Vue 3.0 Mounting a Vue Instance to an Existing DOM Element:
You can mount a Vue instance to an existing element using mount with a selector.
const app = createApp({
data() {
return {
message: 'Hello, Vue!',
};
},
});
const existingElement = document.getElementById('existing-element');
app.mount(existingElement);
Using Template Strings in Vue 3.0: You can use template strings for defining templates within the options.
const app = createApp({
template: '<p>{{ message }}</p>',
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 Render Function and Virtual DOM:
The render function allows you to create a virtual DOM representation of your component.
const app = createApp({
render(h) {
return h('p', this.message);
},
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 Render Function and JSX:
Vue 3.0 supports JSX for defining the render function.
const app = createApp({
render() {
return <p>{this.message}</p>;
},
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 Template Compilation: Vue 3.0 compiles templates into render functions for better performance.
const app = createApp({
template: '<p>{{ message }}</p>',
data() {
return {
message: 'Hello, Vue!',
};
},
});
app.mount('#app');
Vue 3.0 Template Directives:
Directives like v-if, v-for, and v-bind are used in templates for conditional rendering and data binding.
<div v-if="isVisible">{{ message }}</div>
Vue 3.0 Template ref Attribute:
The ref attribute is used to get a reference to an element or component in the template.
<input ref="myInput" />