純小白入手 vue3.0 CLI - 2.1 - 組件 ( component )

vue3.0 CLI 真小白入手全教程系列：https://www.cnblogs.com/ndos/category/1295752.html

個人 github 地址 - vue3.0Study - 階段學習成果都會創建分支。

進入 src 文件夾，這是實際都工程文件夾，其餘文件夾以及文件之後在瞭解。

3個文件夾  assets - 各種靜態資源文件夾 - 好比 圖片, css 文件等。  components - 組件文件夾, 組件是 vue 等 MVC 框架等核心概念，自行了解含義。 view - 視圖文件夾。

5個文件  app.vue、main.js - 主視圖、配合 main.js 成爲 vue 程序的主入口。router.js - 路由程序主入口。store.js - 路由狀態管理系統。

registerServiceWorker.js 暫不進行了解。

介紹完工程文件夾，進入本文主要關注點 - 組件。

*.js 和 *.vue文件均可以單獨成爲 組件 。我不會使用單獨的 *.js 文件做爲組件 ( 用 *.vue 文件做爲組件方便理解和管理 )。組件能夠單獨用 *.vue 寫出來，也能夠分開同時用 *.vue 和 *.js 來完成一個或者多個組件。

當前工程文件夾中存在 4 個組件：app.vue + main.js、helloworld.vue、views/home.vue、views/about.vue。

template 標籤：4 個組件都有，這是渲染模版，也是組件的核心，細心的讀者能夠發現這4個 template 中都包含有一個頂層都 div 元素。script 標籤：helloworld.vue 和 views/home.vue 中有，也能夠用單獨的 js 文件描述，好比 main.js。style 標籤：app.vue 和 helloworld.vue 中有，提供【組件做用域】的 css 樣式，防止團隊協同開發致使的 css 樣式名衝突。

template - script - 問答

一、爲何要使用 *.vue 和 *.js 分開的方式寫組件？

答：這個初始化的項目，天然沒有這個必要。在大型的項目中，有些組件的 模板 template 和 功能定義 script 都是至關規模的代碼，分開管理有利於項目架構的整理。

二、下面是否會介紹 style 的用法？

答：顯然不會，這方面內容簡單，讀者自行了解。

三、app.vue 與其餘組件中 script 的區別？

答：這個區別很大！app.vue 中的 script 是定義各種功能的集中入口，當前能夠看到的有 路由、路由狀態管理系統、渲染 和 配置定義，所以 app 組件的 script 通常都是分開定義。因爲 app.vue 是主程序入口，它並無 data、prop 等等常規組件都有的東西。關於 app.vue 和 main.js，在之後的學習中會漸漸深刻。

學習改造 helloworld.vue

export default { name: 'HelloWorld', props: { msg: String } }，這是 script 代碼。export default <object>，其實這個很簡單，導出一個 object 實例，這個 obj 有 name、props 屬性。name - 組件名稱；props - 組件屬性 ( 這些屬性的值只能由父組件提供 )。組件屬性也是一個健值對的對象：健 - 屬性名稱，值 - 屬性類型 ( 這玩意還有點內容，建議去官方說明中看相關介紹 )。

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

import HelloWorld from '@/components/HelloWorld.vue'    <HelloWorld msg="Welcome to Your Vue.js App"/>   僅有這些還不能使用 helloworld.vue 組件，還須要如下代碼中綠色的部分：export default { name: 'home', components: { HelloWorld } }。

如今來用 helloworld.vue 試驗學習組件的相關內容。

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 組件導出配置增長如上 data 屬性 ( 因爲組件存在，data 屬性須要用 function 的方式來返回 ) 。

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

修改以後的版本已經上傳個人 github 。