这篇文章主要介绍了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/>',//此处引根组件 })
而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上,通过调用再渲染到页面
感谢你能够认真阅读完这篇文章,希望小编分享的“vuejs中实例和组件的区别有哪些”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。