vue3 学习-初识体验-组件 component
组件可以简单理解为 "页面构成的一部分". 组件化是 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的更多相关文章
- Salesforce Lightning开发学习（二）Component组件开发实践
lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的 ...
- Vue3学习（十一）之 table表格组件的使用
一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...
- vue学习之组件(component)(一)
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- Vue3学习（七）之 列表界面数据展示
一.前言 昨晚可能是因为更新完文章后,导致过于兴奋睡不着(写代码确实太容易让人兴奋了),结果两点多才睡着,大东北果然还是太冷了. 不知道是不是因为膝盖和脚都是冰凉的,所以才导致很晚才能入睡? 刚眯了一 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 ...
- Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库
前面使用了 11 篇文章分享基于 vue3 .Monorepo 的组件库工程完整四件套(组件库.文档.example.cli)的开发.构建及组件库的发布.本文属于这 11 篇文章的扩展 -- 如何发布 ...
随机推荐
- WPF的Dispatcher类里的BeginInvoke,Invoke,InvokeAsync
原文地址:https://blog.csdn.net/niuge8905/article/details/81117989 深入了解 WPF Dispatcher 的工作原理(Invoke/Invok ...
- 深入解析NoSQL数据库：从文档存储到图数据库的全场景实践
title: 深入解析NoSQL数据库:从文档存储到图数据库的全场景实践 date: 2025/2/19 updated: 2025/2/19 author: cmdragon excerpt: 通过 ...
- IAP升级（STM32）
IAP升级(STM32) IAP作用简述:将要升级的程序bin文件通过串口发送给STM32,STM32接收后存储到FLASH或者SRAM,用户通过事件(按键等)触发(也可延时自动触发)后将升级 文件夹 ...
- ffmpeg-5.0-essentials_build 下载
ffmpeg-5.0-essentials_build下载放到蓝奏里了 https://wwz.lanzoub.com/if9xq02pttkb密码:ee8i
- 洋葱学园：开启高效学习之旅的宝藏 APP 40天会员5元到手价
洋葱学园是一款在在线教育领域表现出色的教学 APP ,下面为您详细介绍它的特点以及推荐理由. 丰富的学科覆盖: 洋葱学园涵盖了从小学到高中的全学科课程,包括数学.语文.英语.物理.化学等.无论您处于哪 ...
- Typecho博客优化，利用MyUpload进行图片压缩
写博客时,如果不压缩图片,既比较费主机存储空间,还会非常拖慢页面加载速度,特别是对于带宽小的主机.可是,如果要压缩好图片后再上传又比较麻烦,放到对象存储上还另外要钱.于是乎,就撸了这个插件,在上传时自 ...
- VMware虚拟机上安装CentOS8详细教程
1.准备工作 1.1.需要准备好已安装完成的VMware虚拟机,如果您的电脑未安装VMware虚拟机,请参考以下连接:https://www.cnblogs.com/x1234567890/p/148 ...
- PHP站点及mysql常用操作
1.mysql查询表里面重复数据 SELECT * FROM 表名xxxx a WHERE ((SELECT COUNT(*) FROM 表名xxxx WHERE title = a.title) & ...
- HttpClient 进行soap请求
当你在使用C#的HttpClient进行SOAP请求时,确保你的代码类似于以下示例: using System; using System.Net.Http; using System.Text; u ...
- 【练习回顾】dfs迷宫+路径打印
很直接的dfs.递归+栈--不知道以后会不会生疏 进入一次dfs,相当于走一步,入栈:结束一次dfs,相当于这一步考虑结束,出栈 笑死,y1竟然是一个函数 突然发现写的有点槽,可以把dfs形式化为&q ...