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 )的更多相关文章

  1. 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  2. 纯小白入手 vue3.0 CLI - 2.6 - 组件的复用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  3. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  4. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  5. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  6. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  7. 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...

  8. 纯小白入手 vue3.0 CLI - 2.5 - 了解组件的三维

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  9. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

随机推荐

  1. Log4j 相关

    Log4j(Log for Java) Log4j是Apache提供的一种专门用于Java程序记录日志的工具,是目前主流的开发日志技术. 日志的作用: 1.记录系统运行过程中的重要运行信息 a) 付费 ...

  2. Shell 流程控制 if while for

    if else if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): if [ $(p ...

  3. Is it possible to display icons in a PopupMenu?

    I really like the new PopupMenu we got in 3.0, but I just can't display any icons next to the menu i ...

  4. Sublime Text3 一些实用设置

    字体大小 "font_size": 14 高亮编辑中的那一行 "highlight_line": true 当你把脑袋扭过到显示器以外的地方后再回头看编辑器,光 ...

  5. 数据序列化导读(3)[JSON v.s. YAML]

    前面两节介绍了JSON和YAML,本文则对下面的文章做一个中英文对照翻译. Comparison between JSON and YAML for data serialization用于数据序列化 ...

  6. 复刻smartbits的国产网络测试工具minismb-如何测试协议限速

    复刻smartbits的网络性能测试工具MiniSMB,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数和最 ...

  7. How to check Logstash's pulse

    Have you ever wondered if Logstash was sending data to your outputs? There's a brand new way to chec ...

  8. java web 机试

    经过近一个月的学习,我们的java web已经学习完了. 这是我们这次的机试题. 一:题目 请利用MVC设计模式,并使用JSP.Servlet.JSTL和JQuery等技术实现动态条件的分页显示查询. ...

  9. 使用whiptail开发linux环境交互式对话框

    #!/bin/bash oem=$(/bin/cat /opt/jdwa/etc/oem) systype=$(/bin/cat /opt/jdwa/etc/systype) export selec ...

  10. 团队作业6——展示博客(alpha阶段)

    Deadline: 2018-5-9 10:00PM,以提交至班级博客时间为准. 5.10周四实验课将进行alpha阶段项目复审,请在5.10之前,根据以下要求,完成alpha版本的展示,并以此作为参 ...