我的 github 地址 - vue3.0Study - 階段學(xué)習(xí)成果都會(huì)建立分支。

進(jìn)入 src 文件夾，這是實(shí)際都工程文件夾，其他文件夾以及文件以后在了解。

3個(gè)文件夾  assets - 各類(lèi)靜態(tài)資源文件夾 - 比如 圖片, css 文件等。  components - 組件文件夾, 組件是 vue 等 MVC 框架等核心概念，自行了解含義。 view - 視圖文件夾。

5個(gè)文件  app.vue、main.js - 主視圖、配合 main.js 成為 vue 程序的主入口。router.js - 路由程序主入口。store.js - 路由狀態(tài)管理系統(tǒng)。

registerServiceWorker.js 暫不進(jìn)行了解。

介紹完工程文件夾，進(jìn)入本文主要關(guān)注點(diǎn) - 組件。

*.js 和 *.vue文件都可以單獨(dú)成為 組件 。我不會(huì)使用單獨(dú)的 *.js 文件作為組件 ( 用 *.vue 文件作為組件方便理解和管理 )。組件可以單獨(dú)用 *.vue 寫(xiě)出來(lái)，也可以分開(kāi)同時(shí)用 *.vue 和 *.js 來(lái)完成一個(gè)或者多個(gè)組件。

當(dāng)前工程文件夾中存在 4 個(gè)組件：app.vue + main.js、helloworld.vue、views/home.vue、views/about.vue。

template 標(biāo)簽：4 個(gè)組件都有，這是渲染模版，也是組件的核心，細(xì)心的讀者可以發(fā)現(xiàn)這4個(gè) template 中都包含有一個(gè)頂層都 div 元素。script 標(biāo)簽：helloworld.vue 和 views/home.vue 中有，也可以用單獨(dú)的 js 文件描述，比如 main.js。style 標(biāo)簽：app.vue 和 helloworld.vue 中有，提供【組件作用域】的 css 樣式，防止團(tuán)隊(duì)協(xié)同開(kāi)發(fā)導(dǎo)致的 css 樣式名沖突。

template - script - 問(wèn)答

1、為什么要使用 *.vue 和 *.js 分開(kāi)的方式寫(xiě)組件？

答：這個(gè)初始化的項(xiàng)目，自然沒(méi)有這個(gè)必要。在大型的項(xiàng)目中，有些組件的 模板 template 和 功能定義 script 都是相當(dāng)規(guī)模的代碼，分開(kāi)管理有利于項(xiàng)目架構(gòu)的整理。

2、下面是否會(huì)介紹 style 的用法？

答：顯然不會(huì)，這方面內(nèi)容簡(jiǎn)單，讀者自行了解。

3、app.vue 與其他組件中 script 的區(qū)別？

答：這個(gè)區(qū)別很大！app.vue 中的 script 是定義各類(lèi)功能的集中入口，當(dāng)前可以看到的有 路由、路由狀態(tài)管理系統(tǒng)、渲染 和 配置定義，因此 app 組件的 script 一般都是分開(kāi)定義。由于 app.vue 是主程序入口，它并沒(méi)有 data、prop 等等常規(guī)組件都有的東西。關(guān)于 app.vue 和 main.js，在以后的學(xué)習(xí)中會(huì)漸漸深入。

學(xué)習(xí)改造 helloworld.vue

export default { name: 'HelloWorld', props: { msg: String } }，這是 script 代碼。export default <object>，其實(shí)這個(gè)很簡(jiǎn)單，導(dǎo)出一個(gè) object 實(shí)例，這個(gè) obj 有 name、props 屬性。name - 組件名稱(chēng)；props - 組件屬性 ( 這些屬性的值只能由父組件提供 )。組件屬性也是一個(gè)健值對(duì)的對(duì)象：健 - 屬性名稱(chēng)，值 - 屬性類(lèi)型 ( 這玩意還有點(diǎn)內(nèi)容，建議去官方說(shuō)明中看相關(guān)介紹 )。

helloworld.vue 組件在 views/home.vue 中被使用，props => msg 也是在 views/home.vue 中傳遞過(guò)來(lái) ( 下文中綠字部分 )：

import HelloWorld from '@/components/HelloWorld.vue' 
 <HelloWorld msg="Welcome to Your Vue.js App"/> 

僅有這些還不能使用 helloworld.vue 組件，還需要以下代碼中綠色的部分：

export default { name: 'home', components: { HelloWorld } }。

現(xiàn)在來(lái)用 helloworld.vue 試驗(yàn)學(xué)習(xí)組件的相關(guān)內(nèi)容。

v-for 的使用

data: function() {
return {
　　linkPrefix: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-',
　　clis: [
　　　　{ link: "babel", text: "babel" },
　　　　{ link: "pwa", text: "pwa" },
　　　　{ link: "eslint", text: "eslint" },
　　　　{ link: "unit-mocha", text: "unit-mocha" },
　　　　{ link: "e2e-nightwatch", text: "e2e-nightwatch" }
　　]
}

給 helloworld.vue 組件導(dǎo)出配置增加如上 data 屬性 ( 由于組件存在，data 屬性需要用 function 的方式來(lái)返回 ) 。

<ul>
　　<li v-for="(cli,index) in clis" :key="index">
　　　　<a :href= linkPrefix + cli.link target="_blank" rel="noopener">{{cli.text}}</a>
　　</li>
</ul>

修改之后的版本已經(jīng)上傳我的 github 。

總結(jié)

以上所述是小編給大家介紹的vue3.0 CLI - 2.1 -  component 組件入門(mén)教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論