《Vue 3基础入门》课件 第六章 组件复用.pptx

第六章组件复用

Contents目录DOM渲染函数实现复用01混入对象02插件复用03案例：使用渲染函数渲染列表04

01DOM渲染函数实现复用PART

DOM基础DOM（文档对象模型）是HTML和XML文档的编程接口，每个DOM节点对应一个可编程的DOM对象，允许通过编程对DOM对象进行创建、修改、删除或者添加事件等操作,代码如下：!DOCTYPEhtmlhtmllang=zhheadmetacharset=UTF-8/metaname=viewportcontent=width=device-width,initial-scale=1.0/metahttp-equiv=X-UA-Compatiblecontent=ie=edge/titleDOM树结构/title/headbodyh1DOM对象模型/h1h2DOM树结构/h2/body/htmlDocument节点称为根节点，包含一个子节点。HTML节点包含两个子节点，分别是head和body节点。而head和body也都有自己的子节点，具体结构如图

JavaScript动态生成DOM对象可以使用document.createElement()向DOM树添加新对象，并通过textContent为其添加内容。选择对象（1）getElementById()：返回一个匹配特定ID的对象。（2）querySelector()：返回文档中与指定选择器或选择器组匹配的第一个HTMLElement对象。（3）querySelectorAll()：返回与指定选择器组匹配的文档中的对象列表h12021国庆电影档期/h1ulclass=moviesid=moviesli《长津湖》/lili《我和我的父辈》/lili《铁道英雄》/li/ulscripttype=text/javascriptconstmovieItems=document.getElementById(movies);constnewMovie=document.createElement(li);newMovie.textContent=《老鹰抓小鸡》;movieItems.appendChild(newMovie);/script

JavaScript动态生成DOM对象通过使用style属性能够更改HTML文档中的CSS样式。h12021国庆电影档期/h1ulclass=moviesli《长津湖》/lili《我和我的父辈》/lili《铁道英雄》/li/ulscripttype=text/javascriptconstpageTitle=document.querySelector(h1);pageTitle.style.fontSize=24px;pageTitle.style.color=#0000FF;/script

JavaScript动态生成DOM对象在一些场景中需要直接使用JavaScript进行渲染编程，这时可以使用render()函数。Vponent(anchored-heading,{render:function(createElement){returncreateElement(h+this.level,//标签名称this.$slots.default//子节点数组)},props:{level:{type:Number,required:true}}})

引入JSX语法使用JSX语法的default()渲染函数代码如下：使用JSX语法的render()渲染函数代码如下：Vue.h(Vue.resolveComponent(anchored-heading),{level:1},{default:()=[Vue.h(span,Hello),world!]})importAnchoredHeadingfrom./AnchoredHeading.vueconstapp=createApp({render(){return(Anchored-headinglevel={1}spanHello/spanworld!/Anchored-heading)}})Ap