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 篇文章的扩展 -- 如何发布 ...
随机推荐
- Spring单元测试（一）入门与实践
问题:如何快速测试,而不是每次测试都要重启应用? 目标:尽量只测试局部代码 不同的测试 软件工程中分为:单元测试.集成测试.功能测试.系统测试.其中功能测试和系统测试一般是测试人员的责任,但单元测试和 ...
- WPF 线程处理
参考链接:https://docs.microsoft.com/zh-cn/previous-versions/dotnet/netframework-3.5/ms771750(v=vs.90)
- [BZOJ3160] 万径人踪灭 题解
首先正难则反,想到答案即为满足第一条要求的回文子序列数量,减去回文子串数量.回文子串数量 \(hash+\) 二分即可,考虑前半部分. 假如我们将一个回文子序列一层层剥开,就会发现它其实是由多个相同的 ...
- 1 前端知识学习-初始Web和Web标准
0️⃣ 初始Web和Web标准 Web Web(World Wide Web) 即全球广域网.也成为万维网.我们常说的Web端就是网页端. 网页 网页是构成网站的基本元素.网页主要由文字.图像 ...
- 【渗透测试】Vulnhub Corrosion 1
渗透环境 攻击机: IP: 192.168.226.129(Kali) 靶机: IP:192.168.226.128 靶机下载地址:https://www.vulnhub.com/entr ...
- Flink学习（十四） Flink 窗口、时间和水位线
Flink 框架中支持事件时间.摄入时间和处理时间三种.而当我们在流式计算环境中数据从 Source 产生,再到转换和输出,这个过程由于网络和反压的原因会导致消息乱序.因此,需要有一个机制来解决这个问 ...
- Surpac 安装
修改config文件 share 文件进行整体替换 数字地质 环境配置问题总结 *http 报错! 块体生成数据暂停,点击生成验收量提交,报错生成失败!!! 解决方案:重新打开块体
- Vue2/Vue3 项目生产环境开启 vue devtools 插件线上调试 vue 组件
说到 vue 项目的调试工具,必然少不了 "vue devtools 插件",此插件就像"手术刀"一样,是开发环境下的一个利器,生产环境一般情况没办法使用. 要 ...
- STM32 学习方法
前言 学习知识要掌握有效的学习方法,学习技术也是一样,本篇分享关于我学习 STM32 后总结的学习方法. 推荐的学习方法 系统学习 在网上购买一款开发板,使用开发板+开发板配套视频教程+开发板配套源码 ...
- 解决Dcat Admin laravel框架登录报错问题，(blocked:mixed-content)
前言 在使用 Dcat Admin 后台登录时,发生 error 报错:(blocked:mixed-content) xhr VM484:1,浏览器拦截 其实这是浏览器在 HTTPS 页面中尝试加载 ...