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

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

  1. 1、本文档共19页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

第六章组件复用

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

文档评论(0)

xiaobao + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档