Home > Article > Web Front-end > Does the vue project only have one vue instance?
Does the vue project only have one vue instance?
- 青灯夜游Original
- 2022-12-19 15:25:032689browse
No, a vue project can contain multiple vue instances. In a vue project, generally there is only one VUE instance defined in main.js, and the others are vue component instances. Vue is built from instances. A component is an instance of Vue. Properties can be written inside each component, so each component is an instance of Vue.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
No, a vue project can contain multiple vue instances.
Vue is built from instances. A component is an instance of Vue. Properties can be written inside each component, so each component is an instance of Vue. In a vue project, generally there is only one VUE instance defined in main.js, and the others are vue component instances.
Vue instance
When using Vue to write a project, the most important thing is the Vue instance, which provides a direction for learning Vue and gradually mastering it. Vue instance-related "features" are our ultimate goal.
First, load vue.js in an html file. You can load the vue.js file directly through the script tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>Open this page with a browser and enter in the console Vue, you will find that Vue is essentially a function:
In fact, Vue is a constructor, which can be regarded as a "class", created through new its instance. So how many instances can be created in a page?
Usually only one Vue instance is created in a page:
<body>
<div id="app">Hello {{ msg }}</div>
<script>
const vm = new Vue({
el: '#app',
data: function () {
return {
msg: '前端小课'
}
}
});
</script>
</body>When creating a Vue instance, a "customized" object is passed in. We can change the above object to another Writing method:
<body>
<div id="app">Hello {{ msg }}</div>
<script>
const obj = {
el: '#app',
data: function () {
return {
msg: '前端小课'
}
}
}
const vm = new Vue(obj);
</script>
</body>In the obj object, there is an attribute el, which represents the "template" provided for the Vue instance. That is to say, when you create an instance, you need to tell Vue that the HTML to be rendered is What, how to establish some kind of connection between the things to be done in HTML and obj. For example, how to associate the data to be displayed in the HTML template with the data of the Vue instance, and how to respond to the events to be triggered in the HTML template. To establish an association, a contract must be made between the template and the Vue instance.
el can be a selector or an HTMLElement (design architecture that opens up the DOM) instance. You can write el as:
el: document.getElementById('app'),
or it can be any selector:
el: 'div',
What is the displayed result below?
Finally found that the value of title "Good morning, check in!" was not rendered to HTML. This is because the div where title is located is not within the scope of the Vue instance. Within, that is to say, the Vue instance can only affect the template where the instance is created (such as the template pointed to by el):
In fact, one page can create multiple Vue Instances, for example, the following code creates 3 Vue instances and finds that they can work normally:
<body>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<div id="app-body">
<h4>{{ title }}</h4>
</div>
<div class="app-footer">
<h4>{{ footer }}</h4>
</div>
<script>
const vm = new Vue({
el: '#app',
data: function () {
return {
msg: "欢迎来到前端小课",
}
}
});
</script>
<script>
const vmBody = new Vue({
el: '#app-body',
data: function () {
return {
title: "Vue 实例讲解"
}
}
});
</script>
<script>
const vmFooter = new Vue({
el: '.app-footer',
data: function () {
return {
footer: "感谢阅读",
}
}
});
</script>
</body>Open it with a browser and the result is as follows:
This example reminds me of components. "Components are reusable Vue instances." This way of writing is a bit like components. Each Vue instance is regarded as a component.
Let's look at another example - a Vue instance nested within the Vue instance:
<body>
<div id="app">
<h1>{{ msg }}</h1>
<!-- 这里不能声明一个新的 Vue 实例 -->
<div id="app-body">
<h4>会渲染吗？{{ title }}</h4>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: function () {
return {
msg: "欢迎来到前端小课",
title: "#app - Vue 实例讲解"
}
}
});
</script>
<script>
const vmBody = new Vue({
el: '#app-body',
data: function () {
return {
title: "#app-body - Vue 实例讲解"
}
}
});
</script>
</body>The rendering result is, and it is found that the result uses the data in the #app instance:
There are many APIs in the Vue instance, and each API requires us to learn step by step. For example, life cycle functions, calculated properties, definition methods, filters:
vuejs video tutorial、web front-end development】
The above is the detailed content of Does the vue project only have one vue instance?. For more information, please follow other related articles on the PHP Chinese website!