组件可以简单理解为 "页面构成的一部分". 组件化是 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. Tensorflow 安装和测试（Anaconda4.7.10+windows10）

    一. 软件下载 二. 配置相关 1. 修改 Jupyter notebook 默认工作路径 (1)打开 Anaconda Prompt ,输入 jupyter notebook --generate- ...

  2. Azure Data Factory - [01] 触发器

    题记部分 一.概述   Azure Data Factory(后面简称ADF)的触发器是一种机制,用于在特定事件发生时自动执行数据管道.触发器可以基于事件间隔.数据变化或其他外部事件来启动数据管道的执 ...

  3. ES - 概述

    前言 Q1:ElasticSearch 是什么? 为什么要学习? ElasticSearch 是一个分布式.可扩展.实时的搜索和分析引擎,基于 Lucene 构建.它可以用于全文搜索.结构化搜索.分析 ...

  4. 借用【.bat 批处理】实现同时播放多个视频 · 以PotPlayer播放器为例

    突然有这样的需求:同时打开一个文件夹下的多个视频播放任务.如何来实现呢? 理所当然的是想到Potplayer本身可以开多个进程,也就是多开窗口播放,但是经过实验,发现在资源管理器中选取多个视频源并不能 ...

  5. 【ARM+Qt+OpenCV】基于ARM的双目图像采集系统

    点击查看代码 系统使用ARM处理器,运行linux系统,Qt创建工程编写主程序,可以使用OpenCV进行图像处理. 通过两个摄像头采集会图像,在LCD上进行显示,然后通过LCD上的按钮实现退出程序.保 ...

  6. 近1000 star，Forest 1.5.0 正式版发布

    简介 Forest是一个高层的.极简的轻量级HTTP调用API框架. 相比于直接使用Httpclient您不再用写一大堆重复的代码了,而是像调用本地方法一样去发送HTTP请求. 不需要调用HTTP底层 ...

  7. ‌MySQL 8.0下 200GB大表备份，利用传输表空间解决停服发版表备份问题

    ‌MySQL 8.0下 200GB大表备份,利用传输表空间解决停服发版表备份问题 问题背景 在停服发版更新的时候,需要预先对一个业务表进行备份,该业务表是200GB大小的表,大概200亿行数据. 因为 ...

  8. php 配置Gmail 发送邮件 PHPMailer

    hotmail 获取邮箱授权码 准备 首先你应该登陆https://mail.google.com地址,注册一个Gmail邮箱,然后设置开启IMAP访问 打开设置,开启IMAP访问 获取应用专用密码 ...

  9. 云服务器下如何部署Flask项目详细操作步骤

    参考网上各种方案,再结合之前学过的Django部署方案,最后确定Flask总体部署是基于:centos7+nginx+uwsgi+python3+Flask之上做的. 本地windows开发测试好了我 ...

  10. Windows 10右键添加 "在此处打开命令窗口" 菜单

    1.添加右键菜单的两种效果: 第一种是在 桌面/文件夹窗口中/选中文件夹上直接点击右键,显示"在此处打开命令窗口"选项,如图: 第二种是在 桌面/文件夹窗口中/选中文件夹上按住Sh ...