与前端训练营的日子 --Week14

SamGo

关注

发布于: 2021 年 02 月 01 日

这周开始组件化的学习🤠，这周先做个简单的轮播图组件。

组件基础概念与组成

组件，一般认为是跟 UI 强相关的，某种意义上可以认为它是一种特殊的模块或者是特殊的对象，既是对象又是模块。它可以以树形结构来进行组合以及一定的模板化的配置能力。

组成组件的语义要素

Properties(与 Attribute 同时出现，翻译成属性，强调从属关系)
Methods
Inherit
Attribute(与 Properties 同时出现，翻译成特性，强调描述性)
Conifg & State
Event(事件机制，往组件外传递东西)
Lifecycle(生命周期)
Children

Property 与 Attribute

<!-- 操作Attribute --><my-component attribute="v"/>myComponent.getAttribute("a")myComponent.setAttribute("a","value")<!-- 操作Property -->myComponent.a = "value"<!-- 两者虽然效果一样，但是实际上它们的行为是有区别的 -->

复制代码

<!-- 这里面的style 是字符串 --><div class="cls1 cls2" style="color:blue"></div><script>	var div = document.getElementsByTagName('div')[0];	div.style // 这是一个对象</script>

复制代码

<a href="//m.taobao.com"></a><script>  var a = document.getElementsByTagName('a')[0];  a.href // "http://m.taobao.com"，这是URL resolve后的结果  a.getAttribute('href') // "//m.taobao.com", 与HTML代码一致</script><!-- 在这个例子里，可以看到Property与Attribute 的明显区别 -->

复制代码

<input value = "cute" /><script>  var input = document.getElementsByTagName('input')[0];  //如果property没有设置，则结果是attribute  input.value // "cute"  input.getAttribute('value'); // "cute"  //如果通过property设置value的值，则attribute不变，property变化，而元素上实际的效果是property优先  input.value = "hello"  input.value // "hello"  input.getAttribute('value'); // "cute"  input.setAttribute('value','world') // 元素上依然显示"hello"</script>

复制代码

Lifecycle

Children

Content 型 Children
内容有几个 Children 最终则显示几个 Children，是固定数量的。
Template 型 Children
作为模板，而 Children 数量由 data 数据决定，模板会根据数量复制。

使用 npx

在跟进课程代码的过程中，由于自身对于 node 相关技术不熟悉，导致在npm install --save-dev webpack-dev-server之后，在终端执行webpack-dev-server出现zsh: command not found: webpack-dev-server。经过搜索得知，要么可以采用npm install -g全局安装，要么可以采用npx处理，找到一篇npx 使用教程了解到npx的使用。

 ## 通过npx调用内部模块 npx webpack-dev-server

复制代码

本周学习内容

组件的基本知识
轮播组件

参考资料

npx 使用教程

发布于: 2021 年 02 月 01 日阅读数: 13

SamGo

关注

还未添加个人签名 2018.12.16 加入

iOS渣渣，Flutter练习生，极客大学在学🤣🤣

发布

暂无评论

创作场景

与前端训练营的日子 --Week14

组件基础概念与组成

Property 与 Attribute

Lifecycle

Children

使用 npx

本周学习内容

参考资料

SamGo

评论