這篇文章主要介紹了vuejs中實(shí)例和組件的區(qū)別有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、薩迦網(wǎng)站維護(hù)、網(wǎng)站推廣。

區(qū)別：1、實(shí)例有el掛載點(diǎn)，組件沒有。2、實(shí)例中是“data:{}”，組件中是“data(){return{}}”。3、vue實(shí)例的html元素是直接渲染到頁面中的；而組件的html元素是定義在template上，通過調(diào)用再渲染到頁面中的。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

上次寫vue單組件項(xiàng)和路由的時候，想到一個問題。new Vue({…})是一個Vue實(shí)例，那么組件是Vue實(shí)例嗎？

分析

之前說了，有兩種開發(fā)方式。一個是基于瀏覽器的（即直接在script中引入main.js），還有一個是vue-cli搭建出來的基于命令行的開發(fā)方式（一個vue項(xiàng)目）.

因?yàn)閷?shí)際項(xiàng)目大部分都用命令行開發(fā)方式，所以還是說命令行開發(fā)方式里的組件。

在項(xiàng)目的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實(shí)例
  el: '#app',//el掛載點(diǎn)
  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>

效果圖如下，紫色文字之下的可以忽略不看，這里是我路由展示的內(nèi)容。

放大比較一下

vuejs中實(shí)例和組件的區(qū)別

組件的data是一個function非組件是data:{}，組件沒有el掛載點(diǎn)這個選項(xiàng)。按官網(wǎng)來說，組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€名字。

在vue項(xiàng)目中，一般只有一個VUE實(shí)例在main.js中定義，其他都是vue組件實(shí)例。其實(shí)都是vue實(shí)例，但為了方便區(qū)分，我就這么說了。根組件之外，components中還有很多小組件。

即：

1、vue實(shí)例有el指定掛載元素，組件沒有，因?yàn)榻M件也是通過調(diào)用在渲染頁面，直接通過調(diào)用組件名渲染；

2、實(shí)例和組件的data屬性形式不同

vue實(shí)例中data屬性：data:{“name”:“aa”,“age”:18},

組件中的data屬性：data(){ return{“name”:“aa”,“age”:18} },

3、vue實(shí)例的html元素是直接渲染到頁面中，而組件的html元素是定義在template上，通過調(diào)用再渲染到頁面

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vuejs中實(shí)例和組件的區(qū)別有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

標(biāo)題名稱：vuejs中實(shí)例和組件的區(qū)別有哪些
分享鏈接：http://redsoil1982.com.cn/article40/gsosho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、營銷型網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)