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:

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:

    
Hello {{ msg }}
    

When creating a Vue instance, a "customized" object is passed in. We can change the above object to another Writing method:

    
Hello {{ msg }}
    

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:

    

        
{{ msg }}
    
    

        
{{ title }}
    
    

        
{{ footer }}
    
    
    
    

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:

    

        
{{ msg }}
        
        

            
会渲染吗？{{ title }}
        
    
    
    

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!