So, what's this Vue Instance thing all about? Imagine Vue.js as a magical toolbox that helps you build interactive web applications. Well, the Vue instance is like the heart of this toolbox: it's what makes everything tick! In this topic, you will learn how to create your own Vue instance and what properties it has. You will also see a Vue instance in action.
What is a Vue instance?
The Vue instance allows you to define and manage the behavior of your application, making it interactive and dynamic. It's the bridge that connects your HTML markup with the JavaScript code. When you create a Vue instance, you tell Vue to watch over a specific part of your web page and handle all the dynamic stuff there. In other words, the Vue instance is the main object for your Vue App. It helps us to use Vue components in our application.
Creating your first Vue instance
Now, let's get our hands busy and create our first Vue instance! You'll love how easy it is. Initially create a html file and put the code below in it. You only need a script tag pointing to Vue.js and a little magic syntax. Here's how it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My First Vue App</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
<script>
const app = Vue.createApp({
setup() {
const message = Vue.ref('Hello, Vue 3 World! 🌍');
return {
message
}
}
});
app.mount('#app');
</script>
</body>
</html>Voilà! We've created a Vue instance that controls our div element and displays our friendly message. Please note that we've created the new instance via a special syntax Vue.createApp(). Then we specified the element with an app id and defined the variable message with our text. Eventually, we mount our instance within app.mount(). Here you must specify the container element, which can be a DOM element or a selector string.
Here's what you should see in your browser:
An overview of Vue instance properties
Let's pause for a moment and learn what powers our Vue instance. Here are some of the essential properties:
reactiveorref: These are functions used to create reactive data. Reactive data is data that Vue will watch for changes. When changes occur, Vue will automatically re-render the parts of the application that use that data.methods: These are functions that you define to perform actions in your component. You might use a method to respond to a button click, for example.computed: This is a function used to create computed properties. Computed properties are values that are automatically calculated based on other data. Use computed properties when you have a value that depends on one or more other values.watch: This is a function that allows you to run custom code in response to changes in your data. Usewatchwhen you want to perform an action whenever a specific value changes.props: These are inputs to a component. When you want to pass data from a parent component to a child component, you do so using props.
Remember that all these properties (functions and reactive data) need to be returned from the setup() function to be accessible in the template.
A simple Vue instance in action
Okay, enough theory, let's see our Vue instance in action! Check out this example where we have a button to change the message dynamically:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 3 Message Changer</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ state.message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
<script>
const { reactive, watch } = Vue;
const app = Vue.createApp({
setup() {
// reactive data
const state = reactive({
message: 'Hello, Vue 3 World!'
});
// method
function changeMessage() {
state.message = 'Message has been changed!';
}
// watch
watch(() => state.message, () => {
console.log('Message was changed');
});
return {
state,
changeMessage
};
}
});
app.mount('#app');
</script>
</body>
</html>In this example, we have a reactive data property message that is displayed on the webpage. When the "Change Message" button is clicked, the changeMessage method is called, which changes the message to 'Message has been changed!'. The change in the message reactive data is automatically reflected in the Vue template. The watcher function logs 'Message was changed' to the console whenever state.message changes.
If you launch this file in your browser, here's what you'll see:
Try clicking that button – the magic of Vue will update the message immediately.
Conclusion
We've covered the basics of creating a Vue instance. In this topic, you've learned that the Vue instance is like the heart of your Vue app, connecting your HTML and JavaScript. You've explored properties like reactive, methods, computed, props and watch, which bring life to your app. Plus, you've witnessed a simple example of how a Vue instance can turn static web pages into dynamic wonders.
So let's move on to practice!