纯小白入手 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 。