首页 >web前端 >前端问答 > 正文

vuejs中实例和组件的区别是什么

原创2021-09-28 15:27:200378

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

而App.vue代码中

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

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

效果图如下,紫色文字之下的可以忽略不看,这里是我路由展示的内容。
在这里插入图片描述
放大比较一下

在这里插入图片描述
在这里插入图片描述

vuejs中实例和组件的区别

组件的data是一个function非组件是data:{},组件没有el挂载点这个选项。按官网来说,组件是可复用的 Vue 实例,且带有一个名字。

在vue项目中,一般只有一个VUE实例在main.js中定义,其他都是vue组件实例。其实都是vue实例,但为了方便区分,我就这么说了。根组件之外,components中还有很多小组件。

即:

1、vue实例有el指定挂载元素,组件没有,因为组件也是通过调用在渲染页面,直接通过调用组件名渲染;

2、实例和组件的data属性形式不同

vue实例中data属性:data:{“name”:“aa”,“age”:18},

组件中的data属性:data(){ return{“name”:“aa”,“age”:18} },

3、vue实例的html元素是直接渲染到页面中,而组件的html元素是定义在template上,通过调用再渲染到页面

相关推荐:《vue.js教程

以上就是vuejs中实例和组件的区别是什么的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue 实例 组件
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php字符串怎么转化为浮点型数据860
    怎么用nodejs运行脚本509
    命令行怎么查看nodejs版本号745
    推荐视频教程
  • Vue.js开发基础Vue.js开发基础
  • vue 3.0全新实战课程(2021版)第一季vue 3.0全新实战课程(2021版)第一季
  • vue 3.0全新实战课程(2021版)第二季vue 3.0全新实战课程(2021版)第二季
  • VuePress: 30分钟制作一个Vue静态网站VuePress: 30分钟制作一个Vue静态网站
  • VuePress: Vue 官方静态网站生成器极速指南VuePress: Vue 官方静态网站生成器极速指南
  • Vue.js:纪录片Vue.js:纪录片
  • 视频教程分类