《Vue 3基礎(chǔ)入門(mén)》課件 第六章 組件復(fù)用_第1頁(yè)
《Vue 3基礎(chǔ)入門(mén)》課件 第六章 組件復(fù)用_第2頁(yè)
《Vue 3基礎(chǔ)入門(mén)》課件 第六章 組件復(fù)用_第3頁(yè)
《Vue 3基礎(chǔ)入門(mén)》課件 第六章 組件復(fù)用_第4頁(yè)
《Vue 3基礎(chǔ)入門(mén)》課件 第六章 組件復(fù)用_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第六章

組件復(fù)用Contents目錄DOM渲染函數(shù)實(shí)現(xiàn)復(fù)用01混入對(duì)象02插件復(fù)用03案例：使用渲染函數(shù)渲染列表0401DOM渲染函數(shù)實(shí)現(xiàn)復(fù)用PARTDOM基礎(chǔ)DOM（文檔對(duì)象模型）是HTML和XML文檔的編程接口，每個(gè)DOM節(jié)點(diǎn)對(duì)應(yīng)一個(gè)可編程的DOM對(duì)象，允許通過(guò)編程對(duì)DOM對(duì)象進(jìn)行創(chuàng)建、修改、刪除或者添加事件等操作,代碼如下：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM樹(shù)結(jié)構(gòu)</title></head><body><h1>DOM對(duì)象模型</h1><h2>DOM樹(shù)結(jié)構(gòu)</h2></body></html>Document節(jié)點(diǎn)稱(chēng)為根節(jié)點(diǎn)，包含一個(gè)子節(jié)點(diǎn)。HTML節(jié)點(diǎn)包含兩個(gè)子節(jié)點(diǎn)，分別是head和body節(jié)點(diǎn)。而head和body也都有自己的子節(jié)點(diǎn)，具體結(jié)構(gòu)如圖JavaScript動(dòng)態(tài)生成DOM對(duì)象可以使用document.createElement()向DOM樹(shù)添加新對(duì)象，并通過(guò)textContent為其添加內(nèi)容。選擇對(duì)象（1）getElementById()：返回一個(gè)匹配特定ID的對(duì)象。（2）querySelector()：返回文檔中與指定選擇器或選擇器組匹配的第一個(gè)HTMLElement對(duì)象。（3）querySelectorAll()：返回與指定選擇器組匹配的文檔中的對(duì)象列表<h1>2021國(guó)慶電影檔期</h1><ulclass="movies"id="movies"><li>《長(zhǎng)津湖》</li><li>《我和我的父輩》</li><li>《鐵道英雄》</li></ul><scripttype="text/javascript">constmovieItems=document.getElementById("movies");constnewMovie=document.createElement("li");newMovie.textContent="《老鷹抓小雞》";movieItems.appendChild(newMovie);</script>JavaScript動(dòng)態(tài)生成DOM對(duì)象通過(guò)使用style屬性能夠更改HTML文檔中的CSS樣式。<h1>2021國(guó)慶電影檔期</h1><ulclass="movies"><li>《長(zhǎng)津湖》</li><li>《我和我的父輩》</li><li>《鐵道英雄》</li></ul><scripttype="text/javascript">constpageTitle=document.querySelector("h1");pageTitle.style.fontSize="24px";pageTitle.style.color="#0000FF";</script>JavaScript動(dòng)態(tài)生成DOM對(duì)象在一些場(chǎng)景中需要直接使用JavaScript進(jìn)行渲染編程，這時(shí)可以使用render()函數(shù)。Vponent('anchored-heading',{render:function(createElement){returncreateElement('h'+this.level,//標(biāo)簽名稱(chēng)this.$slots.default//子節(jié)點(diǎn)數(shù)組)},props:{level:{type:Number,required:true}}})引入JSX語(yǔ)法使用JSX語(yǔ)法的default()渲染函數(shù)代碼如下：使用JSX語(yǔ)法的render()渲染函數(shù)代碼如下：

Vue.h(Vue.resolveComponent('anchored-heading'),{level:1},{default:()=>[Vue.h('span','Hello'),'world!']})importAnchoredHeadingfrom'./AnchoredHeading.vue'constapp=createApp({render(){return(<Anchored-headinglevel={1}><span>Hello</span>world!</Anchored-heading>)}})App.mount('#demo')函數(shù)式組件沒(méi)有管理任何狀態(tài)，也沒(méi)有監(jiān)聽(tīng)任何狀態(tài)和鉤子函數(shù)，只是一個(gè)接受一些props的函數(shù)，該場(chǎng)景下可以將組件標(biāo)記為函數(shù)式組件，代碼如下

Vponent('my-component',{functional:true,//props是可選的props:{//...},//第二個(gè)參數(shù)為上下文render:function(createElement,context){//...}})組件需要的一切都通過(guò)context參數(shù)傳遞，該參數(shù)是一個(gè)包括以下字段的對(duì)象：props提供所有props的對(duì)象childrenVNode子節(jié)點(diǎn)的數(shù)組slots一個(gè)函數(shù)，返回了包含所有插槽的對(duì)象scopedSlots一個(gè)暴露傳入的作用域插槽的對(duì)象，也以函數(shù)形式暴露普通插槽data傳遞給組件的整個(gè)數(shù)據(jù)對(duì)象，作為createElement的第二個(gè)參數(shù)傳入組件parent對(duì)父組件的引用listeners一個(gè)包含了所有父組件為當(dāng)前組件注冊(cè)的事件監(jiān)聽(tīng)器的對(duì)象。這是data.on的一個(gè)別名injections如果使用了inject選項(xiàng)，則該對(duì)象包含了應(yīng)當(dāng)被注入的property模板演繹

下面是一個(gè)簡(jiǎn)單的示例，使用Vpile()函數(shù)實(shí)時(shí)編譯下面的模板字符串：<div><header><h1>I'matemplate!</h1></header><pv-if="message">{{message}}</p><pv-else>Nomessage.</p></div>該模板會(huì)編譯成如下的渲染函數(shù)：functionanonymous(){with(this){return_c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("Nomessage.")])])}}_m(0):functionanonymous(){with(this){return_c('header',[_c('h1',[_v("I'matemplate!")])])}}02PART混入對(duì)象全局混入復(fù)用混入也可以進(jìn)行全局注冊(cè)，代碼如下：//為自定義的選項(xiàng)'myOption'注入一個(gè)處理器。Vue.mixin({created:function(){varmyOption=this.$options.myOptionif(myOption){console.log(myOption)}}})newVue({myOption:'hello!'})//輸出hello!當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)都會(huì)被“混合”到該組件本身的選項(xiàng)中，代碼如下：//定義一個(gè)混入對(duì)象varmyMixin={created:function(){this.hello()},methods:{hello:function(){console.log('hellofrommixin!')}}}//定義一個(gè)使用混入對(duì)象的組件varComponent=Vue.extend({mixins:[myMixin]})varcomponent=newComponent()//輸出hellofrommixin!自定義選項(xiàng)合并策略

Vuex1.x的混入策略里提供了一個(gè)更高級(jí)的例子，代碼如下：constmerge=Vue.config.optionMergeSputedVue.config.optionMergeStrategies.vuex=function(toVal,fromVal){if(!toVal)returnfromValif(!fromVal)returntoValreturn{getters:merge(toVal.getters,fromVal.getters),state:merge(toVal.state,fromVal.state),actions:merge(toVal.actions,fromVal.actions)}}可以向Vue.config.optionMergeStrategies添加一個(gè)函數(shù)，代碼如下：Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){//返回合并后的值}對(duì)于多數(shù)值為對(duì)象的選項(xiàng)，可以使用與methods相同的合并策略，代碼如下：varstrategies=Vue.config.optionMergeStrategiesstrategies.myOption=strategies.methods03PART插件復(fù)用編寫(xiě)插件Vue3的插件公開(kāi)一個(gè)install()函數(shù)，該函數(shù)的第一個(gè)參數(shù)是Vue3構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。MyPlugin.install=function(Vue,options){//1.添加全局函數(shù)或propertyVue.myGlobalMethod=function(){//邏輯...}//2.添加全局資源Vue.directive('my-directive',{bind(el,binding,vnode,oldVnode){//待完善的邏輯}...})//3.注入組件選項(xiàng)Vue.mixin({created:function(){//待完善的邏輯}...})//4.添加實(shí)例函數(shù)Vtotype.$myMethod=function(methodOptions){//待完善的邏輯}}使用插件使用插件需要通過(guò)全局函數(shù)Vue.use()，在調(diào)用newVue()啟動(dòng)應(yīng)用之前，需要先完成該操作，也可以傳入一個(gè)可選的選項(xiàng)對(duì)象，代碼如下：//調(diào)用'MyPlugin.install(Vue)'Vue.use(MyPlugin)newVue({//組件選項(xiàng)})Vue.use(MyPlugin,{someOption:true})在CommonJS這樣的模塊環(huán)境中，應(yīng)始終顯式地調(diào)用Vue.use()，代碼如下：//用Browserify或webpack提供的CommonJS模塊環(huán)境時(shí)varVue=require('vue')varVueRouter=require('vue-router')//不要忘了調(diào)用此函數(shù)Vue.use(VueRouter)04PART案例：使用渲染函數(shù)渲染列表案例：使用渲染函數(shù)渲染列表假設(shè)場(chǎng)景為帖子列表，則每個(gè)列表項(xiàng)將展示帖子的簡(jiǎn)介內(nèi)容，代碼如下：ponent('ListItem',{props:{content:{type:Object,required:true}},render(){returnVue.h('li',[Vue.h('p',[Vue.h('span’,//這是<span>元素的內(nèi)容'標(biāo)題：'+this.content.title+'|發(fā)帖人：'+this.content.author+'|發(fā)帖時(shí)間：'+this.content.date+'|點(diǎn)贊數(shù)：'+this.content.Vote),Vue.h('button',{//單擊按鈕，向父組件提交自定義事件voteonClick:()=>this.$emit('vote')},'贊')])]);

}})列表組件ContentList的代碼：//

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論