纯小白入手 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 - 问答
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 )的更多相关文章
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
随机推荐
- javascript 计算文件MD5 浏览器 javascript读取文件内容
原则上说,浏览器是一个不安全的环境.早期浏览器的内容是静态的,用户上网冲浪,一般就是拉取网页查看.后来,随着互联网的发展,浏览器提供了非常丰富的用户交互功能.从早期的表单交互,到现在的websocke ...
- 剑指offer十三之调整数组顺序使奇数位于偶数前面
一.题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 二.思路 此题可 ...
- (转)Linux 系统监控、诊断工具之 top命令详解
原文:https://www.linuxidc.com/Linux/2014-12/110563.htm 目录 (1)系统.任务统计信息:(2)进程. cpu 统计信息:(3)最后两行为内存信息:3. ...
- Spring4 mvc+maven 框架搭建(1)
这篇博客其实很早就应该写,早在半年前,因为对SpringMVC感兴趣,便自学了一下Spring.一段时间的学习后,对Spring有了一个基本的了解,于是想着自己动手搭建一个SpringMvc的框架出来 ...
- Redis随笔(六)RESP的协议规范
1.官网文档 https://redis.io/topics/protocol http://www.redis.cn/topics/protocol.html 2.协议介绍 redis协议规范(Re ...
- IntelliJ IDEA(Ultimate版本)的下载、安装和WordCount的初步使用(本地模式和集群模式)
不多说,直接上干货! IntelliJ IDEA号称当前Java开发效率最高的IDE工具.IntelliJ IDEA有两个版本:社区版(Community)和旗舰版(Ultimate).社区版时免费的 ...
- tensorflow 根据节点名称获取节点
ckpt_file = os.path.join(self.args.bert_dir, 'model.ckpt-6123') # 获取图的reader reader = self.tf_instan ...
- es-05-获取 resthighlevelclient及api
在6.x以前, 使用最多的是transportclient, 但在7.x会被废弃, 先说以前的创建方式: 具体可见:https://www.cnblogs.com/wenbronk/p/6383194 ...
- HTML5知识汇总,总有你不知道的o(≧v≦)o~~
html5知识点汇总 一.html5发展历程以及规划 html5从2006年开始立项,用于替代1999年的html4,历经12年,完成了第一个版本html5.0,并于2014年底发布. 在接下来的日子 ...
- MySQL和Mariadb二进制日志binlog详解
Mariadb/mysql提供了4中不同的日志,分别是错误日志(error.log).普通日志(general log).慢日志(slow log)以及二进制日志(binlog).错误日志记录了系统启 ...