vue3.0 CLI - 2.1 - component 組件入門教程

我的 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 - 問答

1、為什么要使用 *.vue 和 *.js 分開的方式寫組件？

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

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

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

3、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 。

總結

以上所述是小編給大家介紹的vue3.0 CLI - 2.1 -  component 組件入門教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com