组件可以简单理解为 "页面构成的一部分". 组件化是 Vue 最为重要的设计理念之一吧.

早期的前端页面基本上就拆分为一个个的html, css, js 文件, 然后不断"堆砌", 一套 js库走天下. 其特点就是随着页面越来越复杂, 其维护就成了一个大的问题. 后面前端不知咋地, 开始模仿后端设计了, 也出现了所谓的模块化, 组件化, 框架等等. 美其名曰前端工程. 确实是工程化了, 但也更复杂了. 以前前端的主要职责是写页面展示数据. 现在是卷全栈了.

从我个人体验来说, vue 这种组件化和单文件 (模板, 样式, 逻辑 都在一个文件中) 的方式是非常符合咱编程逻辑的, 我也是因为此写前端写出了后端逻辑的感觉, 但还是非常爽的哦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>组件体验</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return {

          inputValue: '',

          list: []

        }

      },

      methods: {

        addItem () {

          this.list.push(this.inputValue)

          this.inputValue = ''

        }

      },

      template: `

      <div>

        <input v-model="inputValue" />

        <button @click="addItem">增加</button>

        <ul>

          <todo-item

            v-for="(item, index) of list"

            v-bind:content=item

            v-bind:index="index"

          />

        </ul>

      </div>

        `

    })

    // 注册全局子组件 todo-item, 其作用就是展示 li 的数据

    // 父组件将数据通过绑定属性 content, index 的方式给子组件来传值

    // 子组件 todo-item 通过 props 来接收 content, index 并进行应用

    app.component('todo-item', {

      props: ['content', 'index'],

      template: `<li>{{index}}-{{content}}</li>`

    })

    app.mount('#root')

  </script>

</body>

</html>

可以看出 vue 的组件化从形式上看即 "自定义html标签" , 这里主要是理解组件的逻辑和传值很关键.

先分析一下这一段:

<ul>

    <todo-item

               v-for="(item, index) of list"

               v-bind:content=item

               v-bind:index="index"

     />

 </ul>

在 ul 标签中引入了一个组件叫 todo-item, 然后主流程将 data 通过绑定两个属性 content 和 index 传递给了 组件 todo-item.

再分析这一段:

app.component('todo-item', {

      props: ['content', 'index'],

      template: `<li>{{index}}-{{content}}</li>`

    })

首先是将 todo-item 组件全局注册给了 app实例. 然后通过 props 属性来接收父组件通过属性传递过来的数据 content 和 index, 并将其应用到 todo-item 的逻辑中.

最后连成一体就渲染出来了. 这个组件一开始还是不太能理解的, 多用几次熟练就掌握了.

vue3 学习-初识体验-组件 component的更多相关文章

  1. Salesforce Lightning开发学习（二）Component组件开发实践

    lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的 ...

  2. Vue3学习（十一）之 table表格组件的使用

    一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...

  3. vue学习之组件(component)(一)

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  4. Vue3学习（七）之 列表界面数据展示

    一.前言 昨晚可能是因为更新完文章后,导致过于兴奋睡不着(写代码确实太容易让人兴奋了),结果两点多才睡着,大东北果然还是太冷了. 不知道是不是因为膝盖和脚都是冰凉的,所以才导致很晚才能入睡? 刚眯了一 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  6. 在Windows环境中开始Docker的学习和体验

    研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...

  7. HTML5 例子学习 HT 图形组件

    HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...

  8. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  9. Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建

    该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 ...

  10. Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库

    前面使用了 11 篇文章分享基于 vue3 .Monorepo 的组件库工程完整四件套(组件库.文档.example.cli)的开发.构建及组件库的发布.本文属于这 11 篇文章的扩展 -- 如何发布 ...

随机推荐

  1. Android应用禁止屏幕休眠的3种方法

    做android应用开发时,有时需要在应用前台运行时,禁止休眠,以下几种方法供参考. 方法一:持有wakelock 添加休眠锁,休眠锁必须成对出现. private wakelock mwakeloc ...

  2. WPF调用FishSpeech的Demo

    写了一个FishSpeech的教程:使用FishSpeech进行语音合成推理 - 天命小猪 - 博客园 研究了一下如何调用服务器API,朗读文本. 经过调研,决定使用NAudio库播放音频.遇到了一些 ...

  3. Sqoop2 - [01] 安装部署

    1.启动Hadoop集群 2.将Sqoop2的安装包上传到合适的目录中解压 tar -zxvf sqoop-1.99.7-bin-hadoop200.tar.gz 3.修改Hadoop的配置文件cor ...

  4. 百万架构师第四十六课：并发编程的原理(一)｜JavaGuide

    百万架构师系列文章阅读体验感更佳 原文链接:https://javaguide.net 并发编程的原理 课程目标 JMM 内存模型 JMM 如何解决原子性.可见性.有序性的问题 Synchronize ...

  5. Chrome 134 版本新特性

    Chrome 134 版本新特性 一.Chrome 134 版本浏览器更新 1. 在桌面和 iOS 设备上使用 Google Lens 进行屏幕搜索 Chrome 版本 适用平台 发布进度 Chrom ...

  6. 地球OL攻略 —— 某应届生求职总结

    某应届生的苦逼求职总结 1.自我介绍,阐述一下自己过去的情况 2.目前的就业情况以及从事的就业方向 3.你在面试的时候遇到什么困难?是怎么帮忙解决的 4.当初为什么会选择选择这一行? 5.分享一下学习 ...

  7. 面试题-JVM性能调优

    前言 JVM性能调优是一个很大的话题,很多中小企业的业务规模受限,没有迫切的性能调优需求,但是如果不知道JVM相关的理论知识,写出来的代码或者配置的JVM参数不合理时,就会出现很严重的性能问题,到时候 ...

  8. 泛型--java进阶day10

    1.泛型 2.泛型--统一数据类型 如下图,当我们在泛型中添加不同的数据类型,add方法需要的数据类型也随之改变 [1] [2] 泛型--默认类型object 当我们不指定泛型时,泛型的默认类型为ob ...

  9. String常见面试题

    第一题:打印的结果是true还是false呢? 在之前我们就说过这题,执行s1时,检查字符串常量池,发现没有"abc",于是创建"abc",执行s2时,接着检查 ...

  10. Hyperledger Fabric - 区块链应用

    Fabric Gateway SDK 实现Fabric的编程模型,提供了一系列简单的API给应用程序与Fabric区块链网络进行交互 应用程序将各自的网络交互委托给其网关,每个网关都了解网络信道拓扑, ...