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

下載本文檔

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

文檔簡介

第六章

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論