Vue3+TypeScript学习笔记（三十五）-阿里云开发者社区

Vue3+TypeScript学习笔记（三十五）

2023-05-11 66

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本节记录Web Component相关知识内容

定义：Web Components提供了及语言声支持的，对视图层封装的能力，可以让单个组件相关的HTML、CSS、JavaScript模板运行在以html为界限的环境中，不会影响到全局和其他组件。此外标签提供了完整的生命周期钩子函数

简单的演示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./btn.js"></script>
    <title>Document</title>
</head>
<body>
    <xiaoman-btn></xiaoman-btn>
    <xiaoman-btn></xiaoman-btn>
    <xiaoman-btn></xiaoman-btn>
</body>
</html>

class Btn extends HTMLElement {
    constructor() {
        super()
        // 使用const定义的shaDom在类实例化后无法访问,attachShadow创建一个影子节点用于隔离选择器
        const shaDom = this.attachShadow({ mode: 'open' })
        this.p = this.h('p')
        // 使用innerText
        this.p.innerText = '小满'
        // 设置样式(注意两个参数都是字符串)
        this.p.setAttribute(
            'style',
            'width:200px;height:200px;border:1px solid black'
        )
        // 将节点添加到容器中
        shaDom.appendChild(this.p)
    }
    h(el) {
        return document.createElement(el)
    }
    /**
     * 生命周期
     */
    //当自定义元素第一次被连接到文档 DOM 时被调用。
    connectedCallback() {
        console.log('我已经插入了！！！嗷呜')
    }

    //当自定义元素与文档 DOM 断开连接时被调用。
    disconnectedCallback() {
        console.log('我已经断开了！！！嗷呜')
    }

    //当自定义元素被移动到新文档时被调用
    adoptedCallback() {
        console.log('我被移动了！！！嗷呜')
    }
    //当自定义元素的一个属性被增加、移除或更改时被调用
    attributeChangedCallback() {
        console.log('我被改变了！！！嗷呜')
    }
}

window.customElements.define('xiaoman-btn', Btn)

template模式

index.html的内容保持不变

class Btn extends HTMLElement {
    constructor() {
        super()
        // 使用const定义的shaDom在类实例化后无法访问,attachShadow创建一个影子节点用于隔离选择器
        const shaDom = this.attachShadow({ mode: 'open' })
        // 创建一个template元素
        this.p = this.h('template')
        this.p.innerHTML = `
            <style>
                div{
                    width:200px;
                    height:200px;
                    background:red;
                }
            </style>
            <div>小满</div>
        `
        // 将节点添加到容器中,注意需要克隆并且只有template元素才有content属性
        shaDom.appendChild(this.p.content.cloneNode(true))
    }
    h(el) {
        return document.createElement(el)
    }
    /**
     * 生命周期
     */
    //当自定义元素第一次被连接到文档 DOM 时被调用。
    connectedCallback() {
        console.log('我已经插入了！！！嗷呜')
    }

    //当自定义元素与文档 DOM 断开连接时被调用。
    disconnectedCallback() {
        console.log('我已经断开了！！！嗷呜')
    }

    //当自定义元素被移动到新文档时被调用
    adoptedCallback() {
        console.log('我被移动了！！！嗷呜')
    }
    //当自定义元素的一个属性被增加、移除或更改时被调用
    attributeChangedCallback() {
        console.log('我被改变了！！！嗷呜')
    }
}

window.customElements.define('xiaoman-btn', Btn)

Vue3+TypeScript学习笔记（三十五）

简单的演示案例

template模式

热门文章

最新文章

相关课程

相关电子书

相关实验场景