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 篇文章的扩展 -- 如何发布 ...
随机推荐
- C# DataTable 类使用
命名空间: System.Data 程序集: System.Data.Common.dll 参考连接:https://docs.microsoft.com/zh-cn/dotnet/api/syste ...
- 源码方式本地化部署deepseek和量化
前置条件 1.python环境,安装教程:https://www.python.org/downloads/2.wsl环境(Windows系统),安装教程:https://learn.microsof ...
- 类的public, private, protected有什么区别？
如何区别C# private和protected? 一.通过使用来区分 1.private:编程语句在模块级别中使用,用于声明私有变量及分配存储空间. 2.protected:编程语句在模块级别中使用 ...
- .NET周刊【2月第4期 2025-02-23】
国内文章 [翻译] 为什么 Tracebit 用 C# 开发 https://www.cnblogs.com/liuliu-66/p/-/why-tracebit-is-written-in-c-sh ...
- vue2打包部署到nginx，解决路由history模式下页面空白问题
项目使用的是vue2,脚手架vue-cli 4. 需求:之前项目路由使用的是hash,现在要求调整为history模式,但是整个过程非常坎坷,遇到了页面空白问题.现在就具体讲一下这个问题. 首先,直接 ...
- SuiGo智能博客系统
一款由Golang+Vue开发的博客类网站,支持大模型对话编写智能博客,同时适配PC和移动端. 功能点说明 系统主要包括 1.博客功能:博客编写也可对话AI模型协助编写.查询.编辑页面.详情页面.分享 ...
- VirtualBox磁盘扩容
前言 虚拟机开始时设置的磁盘空间比较小,后面使用就不够了. # 查询磁盘使用情况 df -h 虚拟硬盘扩容 关闭正在运行的虚拟机 选中工具栏 选择虚拟硬盘,并选中需要扩容的磁盘 拖动进度条,设置想要扩 ...
- 办公自动化-批量更新tar包内文件
最近工作有点忙,学习的时间也少了,为了提高工作效率,有时候我们需要自己写一些提高办公处理效率给的工具或者脚本或者程序. 比如,我目前遇到的一个事项,需要更新很多个tar包文件,把tar包内的某个文件替 ...
- DVWA靶场学习
暴力破解Brute Force low 输入密码就正常抓包放字典破解得了 uploading-image-528180.png medium 同样的操作发现响应速度变慢了,但是还是能暴力破解,不多说了 ...
- Linux netstat 命令查看80端口状态
Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Membershi ...