vue例項和元件的區別

2021-09-23 13:35:23 字數 1230 閱讀 9538

上次寫vue單元件項和路由的時候,想到乙個問題。new vue()是乙個vue例項,那麼元件是vue例項嗎?

之前說了,有兩種開發方式。乙個是基於瀏覽器的(即直接在script中引入main.js),還有乙個是vue-cli搭建出來的基於命令列的開發方式(乙個vue專案),具體見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 router from

'./router'

vue.config.productiontip =

false

/* eslint-disable no-new */

newvue

()

>

>

class

="welcome"

>

welcome! }, you are } years olddiv

>

/>

div>

template

>

>

export

default},

}script

>

>

.welcome

style

>

效果圖如下,紫色文字之下的可以忽略不看,這裡是我路由展示的內容。

放大比較一下

區別就是:

元件的data是乙個function非元件是data:{},元件沒有el掛載點這個選項。按官網來說,元件是可復用的 vue 例項,且帶有乙個名字。

在vue專案中,一般只有乙個vue例項在main.js中定義,其他都是vue元件例項。其實都是vue例項,但為了方便區分,我就這麼說了。根元件之外,components中還有很多小組件。

vue呼叫元件的屬性 Vue 元件例項屬性的使用

前言 因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會...

Vue 元件例項屬性的使用

因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會貼需要...

vue 例項與元件的關係

建立vue例項 var vm new vue 官方 乙個 vue 應用由乙個通過new vue建立的根 vue 例項,以及可選的巢狀的 可復用的元件樹組成。建立元件 定義乙個名為 button counter 的新元件 vue.component button counter template yo...