Home > Article > Web Front-end > What is the difference between vue mount and create

What is the difference between vue mount and create

WBOYOriginal: 2023-05-18 13:17:39499browse

When using Vue.js to develop web applications, the Vue instance needs to be mounted in the DOM to make it effective. This process involves the creation and mounting of the Vue instance to the DOM. Among them, the creation of a Vue instance refers to the process of creating a Vue instance in JavaScript, and the mounting of a Vue instance means that the Vue instance will be placed in the HTML of the entire page and become a real web application.

The creation and mounting of a Vue instance are two different processes, and there are differences between them. The specific content and differences of these two processes will be introduced below.

Creation of a Vue instance

The creation of a Vue instance refers to introducing the Vue.js library into the page and creating a Vue instance in JavaScript to use the features of Vue. The creation time of a Vue instance is usually at the entrance of the web application. For example, the Vue.js library is introduced in HTML and a Vue instance is defined in JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue挂载和创建之间有什么区别</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

In the above code, we are in the HTML file Introduce the Vue.js library, then create a Vue instance in the JavaScript file and bind it to the DOM element with the id app. In the Vue instance, we define a data attribute, which contains an attribute named message, whose value is the string "Hello Vue!"

Mounting of the Vue instance

Vue The mounting of the instance is to place the Vue instance in the HTML of the entire page, which is achieved through its "el" option. Each Vue instance must be mounted into the page through a DOM element. This DOM element can be any element in HTML. During the mounting process of the Vue instance, Vue will find the specified DOM element on the page and replace it with the Vue instance.

The mounting process of the Vue instance usually occurs after the Vue instance is created. In fact, the mounting of Vue instances is completed by the Vue framework, and developers only need to define the "el" option in the Vue instance. For example:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

In the above example, we specified the selector of the DOM element "#app" as the "el" option of the Vue instance. This means that the Vue instance will be mounted on the DOM element with the id "app". Once the Vue instance is mounted, its Data property can be displayed through interpolation in the DOM. For example:

<div id="app">
  {{ message }}
</div>

In the above code, we insert the message attribute into the DOM element of the Vue instance, using Vue's template syntax interpolation, and Hello Vue!

## will be displayed on the page. #Conclusion

There is a clear difference between the creation and mounting of a Vue instance. The creation of a Vue instance refers to creating a JavaScript object of Vue.js, and the mounting of a Vue instance is to place it on an element in HTML. The creation of a Vue instance is usually performed at the entrance of the web application, and the mounting of the Vue instance is automatically completed by the Vue framework after the Vue instance is created. Properly understanding and using the Vue instance creation and mounting process can help developers better develop applications using the Vue.js library.

The above is the detailed content of What is the difference between vue mount and create. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What to write for nodejs unit testingNext article：What to write for nodejs unit testing

See more

What is the difference between vue mount and create

Related articles