vuejs中实例和组件的区别有哪些

这篇文章主要介绍了vuejs中实例和组件的区别有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、虚拟空间、营销软件、网站建设、萨迦网站维护、网站推广。

区别：1、实例有el挂载点，组件没有。2、实例中是“data:{}”，组件中是“data(){return{}}”。3、vue实例的html元素是直接渲染到页面中的；而组件的html元素是定义在template上，通过调用再渲染到页面中的。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

上次写vue单组件项和路由的时候，想到一个问题。new Vue({…})是一个Vue实例，那么组件是Vue实例吗？

分析

之前说了，有两种开发方式。一个是基于浏览器的（即直接在script中引入main.js），还有一个是vue-cli搭建出来的基于命令行的开发方式（一个vue项目）.

因为实际项目大部分都用命令行开发方式，所以还是说命令行开发方式里的组件。

在项目的main.js

// 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: '',//此处引根组件
})

而App.vue代码中

效果图如下，紫色文字之下的可以忽略不看，这里是我路由展示的内容。
vuejs中实例和组件的区别有哪些
放大比较一下