web Components
web Components是浏览器原生组件化,不需编译直接在浏览器中运行
css-doodle基于web Components封装的组件库
在html文件中通过<script></script>
引入
css-doodle可以做炫酷的动画效果
花式组件库 fancy-components
css自定义属性加上--或@size
改变vue中原来的webpack属性,使fancy-components能够生效
将fc-开头的组件以原生的方式进行编译,在vue.config.js中
让vue支持jsx需要在babel.config.js额外添加配置插件
fancy-component与vue的语法较像
webComponent(is属性 slot)和Vue的关系
一个以vue为结尾的vue文件可以写代码直接变成html文件
html文件打开要想找到引入文件需要在http协议下,安装server
customElements函数传入的第二个参数类似于react中的类组件
html Imports(被遗弃) rel="import"<link rel="import" href="my-span-html"/>
html Modules (代替 html Imports)有一些浏览厂商不支持
customElements是windows下的一个属性.define方法中的第一个参数是名字需要有‘-’相连;还有.get方法
扩展fc-bubbles功能
css属性:not(:defined)伪类属性可用于设置一个加载动画
webComonents 的生命周期
customElements.define('life-style',class extends HTMLElement{
static observedAttributes=['color']//要想属性变化,将变化的属性放在数组中,相当于vue中的data
constructor(){
super()
//相当于Vue的setup
}
connectedCallback(){
//相当于Vue的mounted
}
disconnectedCallback(){
//相当于Vue中的unMounted
},
adpotedCallback(){
//剪切,然后在里面可以有自己的自定义逻辑,在使用诸如 document.adoptNode() 之类的方法将元素从一个 document 移动到另一个 document 时触发
},
attributeChangedCallback(name, oldValue, newValue){
//当 custom element 的一个属性被添加、移除或更改时调用。可以用于响应属性的变化,进行相应的更新,需要定义一个静态属性数组来使被检测的属性变化,相当于Vue的watch
}
})
attribute(Html中的特性 id class) property(对象的属性{a:123}中的a)
以对象的方式显示DOM用console.dir
webCompoent不会自动更新视图
DOM.color='blue'这行代码不会导致DOM颜色的更新,如何做才能使DOM.color生效?
在类中添加对color的get和set
is.innerHTML/this.onclick/this.style方法,继承子类(HTMLElement)也可
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)