What is the difference between instances and components in vuejs

Difference: 1. The instance has an el mount point, but the component does not. 2. In the instance, it is "data:{}", and in the component, it is "data(){return{}}". 3. The html elements of the vue instance are directly rendered into the page; while the html elements of the component are defined on the template and then rendered into the page through calls.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

When I wrote vue single component items and routing last time, I thought of a problem. new Vue({…}) is a Vue instance, so is the component a Vue instance?

Analysis

As mentioned before, there are two development methods. One is browser-based (that is, main.js is introduced directly into the script), and the other is a command line-based development method built by vue-cli (a vue project).

Because the actual project is large Part of it uses the command line development method, so we still talk about components in the command line development method.

In the main.js of the project

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

And in the App.vue code

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

The renderings are as follows, you can ignore the ones under the purple text, here It is the content displayed by my route.

Enlarge and compare

##The difference between instances and components in vuejs

The component does not have the el mount point option. According to the official website, components are reusable Vue instances with a name.

vue.js Tutorial"

The above is the detailed content of What is the difference between instances and components in vuejs. For more information, please follow other related articles on the PHP Chinese website!