我的 - 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
helloworld.vue 组件在 views/home.vue 中被使用,props => msg 也是在 views/home.vue 中传递过来 ( 下文中绿字部分 ):
仅有这些还不能使用 helloworld.vue 组件,还需要以下代码中绿色的部分:
export default { name: 'home',components: { HelloWorld } }。
现在来用 helloworld.vue 试验学习组件的相关内容。
v-for 的使用
给 helloworld.vue 组件导出配置增加如上 data 属性 ( 由于组件存在,data 属性需要用 function 的方式来返回 ) 。
总结
以上所述是小编给大家介绍的vue3.0 CLI - 2.1 - component 组件入门教程。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。