《Vue.js超詳細(xì)入門(mén)與項(xiàng)目實(shí)戰(zhàn)》課件全套 李永亮 第1-10章 vue 3簡(jiǎn)介 -vue 3詳解

Vue3簡(jiǎn)介Contents目錄Web前端框架01認(rèn)識(shí)Vue302選擇IDE0304050607配置Node.js環(huán)境安裝Vue3熟悉vue-devtools調(diào)試工具本章小結(jié)01Web前端框架PART前端框架的誕生在第一次瀏覽器戰(zhàn)爭(zhēng)中，Netscape被微軟擊敗后創(chuàng)辦了Mozilla技術(shù)社區(qū)。該社區(qū)推出了符合W3C標(biāo)準(zhǔn)的Firefox瀏覽器，它和Opera瀏覽器一起代表了W3C陣營(yíng)，并與IE瀏覽器開(kāi)始了第二次瀏覽器戰(zhàn)爭(zhēng)。不同的瀏覽器技術(shù)標(biāo)準(zhǔn)之間存在較大的差異，這給開(kāi)發(fā)帶來(lái)了兼容性問(wèn)題。為了解決這個(gè)問(wèn)題，出現(xiàn)了一些前端兼容框架，如Dojo、Mooltools、YUI、ExtJS和jQuery等，其中jQuery的應(yīng)用范圍最為廣泛。近年來(lái)各大瀏覽器開(kāi)始支持HTML5，前端實(shí)現(xiàn)的交互功能隨之增加，相應(yīng)的代碼復(fù)雜度顯著提高，用于后端的MVC模式開(kāi)始應(yīng)用于Web前端開(kāi)發(fā)。從2010年10月出現(xiàn)的Backbone開(kāi)始，Knockout、Angular、Ember、React、Vue等框架相繼出現(xiàn)。這些框架的應(yīng)用使WebSite從WebSite進(jìn)化成WebApp，并開(kāi)啟了WebApp的SPA（SinglePageApplication，單頁(yè)面應(yīng)用）時(shí)代。MVC模式典型的MVC模式：MVC模式使用MVC模式設(shè)計(jì)和創(chuàng)建Web前端應(yīng)用時(shí)，通常將程序分為以下3個(gè)部分：1）Model用于表示應(yīng)用程序的核心數(shù)據(jù)部分。2）View用于展示效果、生成HTML頁(yè)面等。3）Controller用于處理輸入，如業(yè)務(wù)邏輯等。MVC模式MVC模式的優(yōu)點(diǎn)主要有以下三個(gè)1）松耦合性2）高重用性3）低生命周期成本從MVC到MVVMMVP模式是從MVC模式演變而來(lái)的，其基本思想與MVC模式相似ViewPresenterModelMVP模式從MVC到MVVMMVVM模式將MVP模式的View的狀態(tài)和行為抽象化，并將視圖UI和業(yè)務(wù)邏輯分離02認(rèn)識(shí)Vue3PART什么是Vue3Vue3是一個(gè)基于MVVM模式的用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，可以根據(jù)項(xiàng)目的復(fù)雜度和需求靈活地選擇不同的層次和功能對(duì)于簡(jiǎn)單的系統(tǒng)，可以采用Vue3的聲明式渲染機(jī)制；對(duì)于復(fù)雜的系統(tǒng)，可以方便地接入Vue3組件系統(tǒng)、Vue-router前端路由和Vuex狀態(tài)管理等功能，實(shí)現(xiàn)前后端分離項(xiàng)目或者多組件狀態(tài)共享的需求Vue3提供的構(gòu)建系統(tǒng)可以幫助開(kāi)發(fā)者快速地構(gòu)建一個(gè)腳手架項(xiàng)目，并提供了運(yùn)行環(huán)境和打包工具等功能，方便開(kāi)發(fā)、調(diào)試和構(gòu)建發(fā)布版本。漸進(jìn)式框架的分層結(jié)構(gòu)什么是Vue3Vue3的改進(jìn)可總結(jié)為以下8點(diǎn)：1、全面提高了性能2、編譯體積更小3、CompositionAPI4、組件多節(jié)點(diǎn)支持5、更靈活的組件渲染6、更先進(jìn)的組件7、更好地支持TypeScript8、支持自定義渲染APIVue3的優(yōu)勢(shì)相對(duì)于其他Web前端框架，Vue3主要有以下5個(gè)優(yōu)勢(shì)。1、體積較小，壓縮后只有33KB。2、基于虛擬DOM技術(shù)，通過(guò)預(yù)先進(jìn)行各種計(jì)算來(lái)優(yōu)化DOM對(duì)象的操作，避免直接操作DOM對(duì)象，具有更高的運(yùn)行效率。3、支持雙向數(shù)據(jù)綁定，使開(kāi)發(fā)人員無(wú)須直接操作DOM對(duì)象，可以將更多精力投入到業(yè)務(wù)邏輯上。4、生態(tài)豐富，具有較低學(xué)習(xí)成本，市場(chǎng)上存在許多成熟穩(wěn)定的基于Vue3的UI框架和組件，可快速實(shí)現(xiàn)開(kāi)發(fā)。5、對(duì)于初學(xué)者友好，易于入門(mén)，并提供大量學(xué)習(xí)資料03選擇IDEPART選擇IDE對(duì)于開(kāi)發(fā)者而言，優(yōu)秀的IDE(

Integrated

DevelopmentEnvironment，集成開(kāi)發(fā)環(huán)境)可以極大地提高開(kāi)發(fā)效率，VSCode（VisualStudioCode）是微軟推出的一款輕量級(jí)代碼編輯器，它免費(fèi)、開(kāi)源而且功能強(qiáng)大。它支持幾乎所有主流的程序語(yǔ)言的語(yǔ)法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼片段、代碼對(duì)比Diff、GIT等特性及插件擴(kuò)展，并針對(duì)網(wǎng)頁(yè)開(kāi)發(fā)和云端應(yīng)用開(kāi)發(fā)做了優(yōu)化，軟件跨平臺(tái)支持Windows、macOS及Linux。04配置Node.jsPART配置Node.js環(huán)境打開(kāi)Node.js官網(wǎng)/，找到Node.js下載頁(yè)面，如圖所示。配置Node.js環(huán)境根據(jù)系統(tǒng)版本下載相應(yīng)的Node.js安裝包，雙擊下載文件會(huì)出現(xiàn)如圖所示的安裝頁(yè)面，按照提示選項(xiàng)完成Node.js的安裝。配置Node.js環(huán)境除了上述方法外，macOS用戶也可以使用Homebrew進(jìn)行Node.js的安裝。安裝Homebrew后，在控制臺(tái)執(zhí)行brewinstallnode@14就可以方便地安裝Node.js14，如圖所示。配置Node.js環(huán)境執(zhí)行node-v指令和npm-v指令可以查看node版本和npm版本。05安裝Vue3PART獨(dú)立安裝版本獨(dú)立版本安裝需要以下兩個(gè)步驟，本質(zhì)是將編譯好的Vue3的JavaScript腳本下載到本地，和現(xiàn)有項(xiàng)目一起部署在服務(wù)器上，并在頁(yè)面中引用。1、下載Vue3。可以在Vue3的官網(wǎng)上下載最新版本。/vue@3.2.31/dist/vue.global.js。2、引入Vue3。在HTML文件中用標(biāo)簽<script>引入Vue3文件。CDN方式安裝Vue3給出了一個(gè)推薦的CDN鏈接，在頁(yè)面中使用<script>標(biāo)簽引入，<scriptsrc="/vue@next"></script>對(duì)于生產(chǎn)環(huán)境，推薦連接一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞<scriptsrc="/vue@3.2.31/dist/vue.global.js"></script>如果使用原生ESModule，可以導(dǎo)入一個(gè)兼容ESModule的構(gòu)建文件<scripttype="module">importVuefrom'/npm/vue@3.2.31/dist/d.js'</script>npm方式安裝安裝Vue3#最新穩(wěn)定版$npminstallvue@next更新Vue3#最新穩(wěn)定版$npmupdatevue@next卸載Vue3#最新穩(wěn)定版$npmuninstallvue@next有時(shí)訪問(wèn)npm源速度會(huì)很慢，建議使用淘寶npm鏡像。更改npm鏡像源使用以下命令$npminstall-gcnpm–registry=然后可以使用cnpm來(lái)安裝模塊$cnpminstallvue@next使用前端腳手架安裝前端腳手架指通過(guò)選擇幾個(gè)選項(xiàng)快速搭建項(xiàng)目基礎(chǔ)代碼的工具。常見(jiàn)的Vue3腳手架有VueCLI和Vite，第9章會(huì)詳細(xì)講解。前端腳手架會(huì)在初始化的時(shí)候自動(dòng)地幫助開(kāi)發(fā)者安裝好Vue3。06熟悉vue-devtools調(diào)試工具PART熟悉vue-devtools調(diào)試工具vue-devtools是一款基于Chrome瀏覽器的插件，它用于調(diào)試Vue3應(yīng)用，可以極大地提高調(diào)試效率。vue-devtools的安裝方式有以下兩種。1.從Chrome商店中安裝vue-devtools可以從Chrome商店中直接下載安裝。2.手動(dòng)安裝（1）在命令行中執(zhí)行g(shù)itclone/vuejs/vue-devtools.git命令，將Github項(xiàng)目

克隆到本地（2）在命令行中執(zhí)行npminstall命令，安裝項(xiàng)目所需的npm包。（3）在命令行中執(zhí)行npmrunbuild命令，編譯項(xiàng)目文件。（4）在瀏覽器中輸入地址chrome://extensions/進(jìn)入擴(kuò)展程序頁(yè)面，單擊“加載已解壓的擴(kuò)展程序...”按鈕，選擇vue-devtools>shells下的Chrome文件夾，將vue-devtools添加至Chrome瀏覽器。

謝謝觀看！HelloWord與Vue3的基礎(chǔ)特性Contents目錄HelloWord示例01Vue3組件的生命周期02數(shù)據(jù)綁定0304案例01HelloWord示例PARTHelloWord示例<divid='app'><!--簡(jiǎn)單文本插值--><p>{{message}}</p><!--JavaScript表達(dá)式--><p>{{message.toUpperCase()}}</p><!--簡(jiǎn)單文本插值--><p>{{spanHTML}}</p><!--輸出HTML--><pv-html="spanHTML"></p></div>HelloWord示例<!--綁定數(shù)據(jù)--><av-bind:href="url">Vue.js</a></div><!--某些情況下可能需要翻墻才能訪問(wèn)--><scriptsrc="/vue@next"></script><script>constRootComponent={data(){return{message:‘HelloVue.js’,url:‘/’,spanHTML:'<spanstyle="color:red">這是一段紅色的文字</span>'};}};constvm=Vue.createApp(RootComponent).mount(‘#app’);</script></body>

</html>HelloWord示例這段代碼演示了Vue3的最基本的使用方法，實(shí)現(xiàn)了數(shù)據(jù)的綁定。在data()函數(shù)中返回的值將在頁(yè)面中顯示。其運(yùn)行效果如下所示。HelloWord示例典型的項(xiàng)目的組件樹(shù)可能如下所示：RootComponent└─TodoList├─TodoItem│├─TodoButtonDelete│└─TodoButtonEdit└─TodoListFooter├─TodosButtonClear└─TodoListStatistics02Vue3組件的生命周期PART認(rèn)識(shí)生命周期Vue3組件的生命周期:創(chuàng)建實(shí)例初始化數(shù)據(jù)編譯模板掛載DOM渲染更新到最終卸載實(shí)例鉤子函數(shù)Vue3提供了以下8個(gè)鉤子函數(shù):beforeCreate（創(chuàng)建前）created（創(chuàng)建后）beforeMount（載入前）mounted（載入后）beforeUpdate（更新前）updated（更新后）beforeUnmount（卸載前）unmounted（銷(xiāo)毀后）03數(shù)據(jù)綁定PART文本插值數(shù)據(jù)綁定最常見(jiàn)的形式是使用Mustache語(yǔ)法（雙大括號(hào)）的文本插值。代碼如下：<span>Message:{{msg}}</span><script>constapp={data(){return{msg:'HelloVue.js'};}};constvm=Vue.createApp(app).mount('#app');</script>文本插值Mustache語(yǔ)法標(biāo)簽

會(huì)被替換為相應(yīng)數(shù)據(jù)對(duì)象中msg屬性的值，如果綁定的數(shù)據(jù)對(duì)象上的msg屬性的值發(fā)生更改，插值處的內(nèi)容會(huì)自動(dòng)更新，將上述代碼的頁(yè)面在瀏覽器中打開(kāi)，并通過(guò)按F12鍵打開(kāi)開(kāi)發(fā)者工具，就能夠看到如圖2.3所示的內(nèi)容。文本插值在控制臺(tái)中，輸入vm.msg=“welcome”，然后按回車(chē)鍵，可以看到頁(yè)面中的文字立刻進(jìn)行了更新，如圖2.4所示。另外，通過(guò)使用v-once指令，開(kāi)發(fā)者也可以實(shí)現(xiàn)一次性的插值，即當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。<spanv-once>這個(gè)將不會(huì)改變:{{msg}}</span>插入原始HTML如果要綁定的數(shù)據(jù)是HTML代碼，，需要使用v-html指令，代碼如下：<p>Usingmustaches:{{rawHtml}}</p><p>Usingv-htmldirective:<spanv-html="rawHtml"></span></p>Mustache語(yǔ)法不能作用在HTML屬性上，應(yīng)該使用v-bind指令，代碼如下：

<divv-bind:id="dynamicId"></div>如果isButtonDisabled的值是null、undefined或false，則disabled屬性甚至不會(huì)被包含在渲染出來(lái)的<button>元素中，代碼如下：<buttonv-bind:disabled="isButtonDisabled">Button</button>使用JavaScript表達(dá)式實(shí)際上對(duì)于所有的數(shù)據(jù)綁定，Vue3都提供了完全的JavaScript表達(dá)式支持，這些表達(dá)式會(huì)在所屬實(shí)例的作用域下作為JavaScript被解析，每個(gè)綁定都只能包含單個(gè)表達(dá)式，

代碼如下：{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<divv-bind:id="'list-'+id"></div>04案例PART利用表單實(shí)現(xiàn)簡(jiǎn)單登錄頁(yè)面下面構(gòu)建一個(gè)簡(jiǎn)單的登錄頁(yè)面核心代碼<script>constapp={data(){return{title:'登

錄',accountTitle:'用戶名',passwordTitle:'密碼',rememberTitle:'記住我',ext:'忘記密碼？'};}};constvm=Vue.createApp(app).mount('#app');</script>利用過(guò)濾器過(guò)濾指定字符在實(shí)際的前端工程中，經(jīng)常需要開(kāi)發(fā)者屏蔽一些特殊字符。假設(shè)有這樣一個(gè)頁(yè)面，其中包含一個(gè)輸入框，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，頁(yè)面會(huì)實(shí)時(shí)顯示用戶的輸入內(nèi)容，并將其中的所有小寫(xiě)字母轉(zhuǎn)化為大寫(xiě)字母，相當(dāng)于對(duì)字符串進(jìn)行格式化。利用過(guò)濾器過(guò)濾指定字符使用Vue3中的計(jì)算屬性來(lái)實(shí)現(xiàn)對(duì)輸入內(nèi)容的格式化處理，具體步驟如下：1、在Vue3實(shí)例中定義一個(gè)數(shù)據(jù)屬性inputText來(lái)保存用戶輸入的內(nèi)容。2、使用v-model指令將inputText與輸入框綁定，實(shí)現(xiàn)輸入內(nèi)容的實(shí)時(shí)更新。3、使用計(jì)算屬性將inputText中的所有小寫(xiě)字母轉(zhuǎn)化為大寫(xiě)字母，并將格式化后的內(nèi)容作為計(jì)算屬性的返回值。4、使用Mustache語(yǔ)法將格式化后的內(nèi)容渲染到頁(yè)面中。利用過(guò)濾器過(guò)濾指定字符代碼如下：

<divid='app'><divclass="translate-main"><divclass="trans-left"><divclass="trans-input-wrap"><divclass="input-wrap"><divclass="textarea-wrap"><textareav-model="notedata"class="textarea"placeholder="輸入內(nèi)容"></textarea></div></div></div></div><divclass="trans-right"><divclass="output-wrapoutput-blank">{{toUpperCase}}</div></div></div></div>利用過(guò)濾器過(guò)濾指定字符代碼如下：<script>constapp={data(){return{notedata:null,};},computed:{toUpperCase(){if(!this.notedata){return'';}returnthis.notedata.toUpperCase();}}};constvm=Vue.createApp(app).mount('#app');</script>謝謝觀看！Vue3基本指令Contents目錄條件渲染指令01列表渲染指令v-for02數(shù)據(jù)綁定指令v-bind03v-model與表單0401條件渲染PARTVue3基本指令0102條件渲染指令條件渲染指令的主要功能是根據(jù)指令的值為true或false進(jìn)而觸發(fā)組件不同的表現(xiàn)形式。指令的主要職責(zé)是在其值發(fā)生改變時(shí)，將相應(yīng)的影響作用于DOM對(duì)象。<divid="app"><h1v-if="display">Display</h1><h1v-if="hide">Hide</h1><h1v-if="age>=25">Age:{{age}}</h1><h1v-if="name.indexOf('Tom')>=0">Name:{{name}}</h1></div><script>constvm=Vue.createApp({data(){return{display:true,hide:false,age:28,name:'TomCruise'}}}).mount('#app');</script>右側(cè)代碼使用v-if、v-else-if和v-else，這三個(gè)指令用于實(shí)現(xiàn)條件判斷，在true和false之間切換時(shí)，元素或組件將被銷(xiāo)毀或重建。v-if、v-else-if、v-else渲染結(jié)果將age屬性的值修改為20（即vm.age=20），然后切換回元素窗口，渲染結(jié)果如圖

注意0102如需控制多個(gè)元素的創(chuàng)建或刪除，可以使用<template>元素將這些元素包裝起來(lái)，然后在<template>元素上使用v-if指令。<divid="app"><templatev-if="!isIogin"><form><p>username:<inputtype="text"></p><p>password:<inputtype="password"></p></form></template></div>

<script>constvm=Vue.createApp({data(){return{isLogin:false}}}).mount('#app');</script>需要特別注意的是：當(dāng)一個(gè)條件被滿足時(shí)，后續(xù)的條件判斷都不會(huì)再執(zhí)行，v-else-if和v-else需要緊跟在v-if或v-else-if之后。Vue3基本指令0102條件渲染指令條件渲染指令的主要功能是根據(jù)指令的值為true或false進(jìn)而觸發(fā)組件不同的表現(xiàn)形式。指令的主要職責(zé)是在其值發(fā)生改變時(shí)，將相應(yīng)的影響作用于DOM對(duì)象。<divid="app"><h1v-show="display">Display</h1><h1v-show="hide">Hide</h1><h1v-show="age>=25">Age:{{age}}</h1><h1v-show="name.indexOf('Tom')>=0">Name:{{name}}</h1></div><script>constvm=Vue.createApp({data(){return{display:true,hide:false,age:28,name:'TomCruise'}}}).mount('#app');</script>v-show指令根據(jù)其值切換元素的CSS樣式中的display屬性，當(dāng)條件變化時(shí)，該指令會(huì)觸發(fā)過(guò)渡效果，代碼如下。v-show指令V-show渲染結(jié)果從頁(yè)面的展示效果來(lái)看，v-show與v-if似乎沒(méi)有不同，但在頁(yè)面結(jié)構(gòu)中可以發(fā)現(xiàn)，v-show并沒(méi)有根據(jù)條件不同而改變頁(yè)面結(jié)構(gòu).v-show的值是true還是false，v-show指令都會(huì)創(chuàng)建元素，它通過(guò)CSS樣式中的display屬性來(lái)控制元素是否顯示。當(dāng)v-if的值為false時(shí)，v-if指令不會(huì)創(chuàng)建該元素。只有當(dāng)v-if的值為true時(shí)，v-if指令才會(huì)真正創(chuàng)建該元素。02列表渲染PARTVue3基本指令0102列表渲染指令列表渲染指令的主要功能是根據(jù)數(shù)組的值來(lái)進(jìn)行列表的遍歷循環(huán)。從而快速的渲染html結(jié)構(gòu)，使代碼具有整潔性，開(kāi)發(fā)的快速和便捷性。<ulid="array-rendering"><liv-for="iteminitems">{{item.message}}</li></ul><script>constvm=Vue.createApp({data(){return{items:[{message:'Foo'},{message:'Bar'}]}}}).mount('#app');</script>v-for指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。v-for指令需要使用iteminitems形式的特殊語(yǔ)法，其中items是源數(shù)據(jù)數(shù)組，item是被迭代的數(shù)組元素的別名，v-for指令V-show渲染結(jié)果在<li>元素上使用v-for指令遍歷數(shù)組，這將循環(huán)渲染<li>元素。在v-for塊中，可以訪問(wèn)所有父作用域的屬性，item是數(shù)組中元素的別名，在每次循環(huán)時(shí)，item的值為數(shù)組當(dāng)前索引的值，除此之外，v-for還支持一個(gè)可選的第二個(gè)參數(shù)，也可以用v-for來(lái)遍歷一個(gè)對(duì)象的所有可枚舉屬性。<ulid="v-for-object"class="demo"><liv-for="valueofmyObject">{{value}}</li></ul>constvm=Vue.createApp({data(){return{myObject:{title:'HowtodolistsinVue',author:'JaneDoe',publishedAt:'2016-04-10'}}}}).mount('#app');Vue3基本指令02甚至可以增加第三個(gè)參數(shù)來(lái)獲取索引，代碼如下：<liv-for="(value,name,index)inmyObject">{{index}}.{{name}}:{{value}}</li>Vue3默認(rèn)采用“就地更新”策略。如果數(shù)據(jù)項(xiàng)的順序被更改，Vue3將不會(huì)移動(dòng)頁(yè)面元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并確保它們?cè)诿總€(gè)索引位置被正確渲染。建議在使用v-for指令時(shí)盡可能提供key值，這樣可以提高v-for的渲染效率，v-for指令<divv-for="iteminitems":key="item.id"><!--內(nèi)容--></div>Vue3基本指令0102列表渲染指令

列表渲染指令的主要功能是根據(jù)數(shù)組的值來(lái)進(jìn)行列表的遍歷循環(huán)。從而快速的渲染html結(jié)構(gòu)，使代碼具有整潔性，開(kāi)發(fā)的快速和便捷性。<divid="app"><ulv-for="numbersinsets"><liv-for="nineven(numbers)":key="n">{{n}}</li></ul></div>

<script>constvm=Vue.createApp({data(){return{sets:[[1,2,3,4,5],[6,7,8,9,10]]}},methods:{even(numbers){returnnumbers.filter(number=>number%2===0)}}}).mount('#app');</script>v-for可以用來(lái)顯示數(shù)組過(guò)濾或排序后的結(jié)果，如果要顯示一個(gè)數(shù)組經(jīng)過(guò)過(guò)濾或排序后的版本，而不改變?cè)紨?shù)據(jù)，可以創(chuàng)建一個(gè)計(jì)算屬性來(lái)返回處理后的數(shù)組v-for的其他操作v-for循環(huán)中無(wú)法使用計(jì)算屬性，可以使用methods()函數(shù)來(lái)解決Vue3基本指令v-for也可以接受整數(shù)n進(jìn)行作為迭代參數(shù)，在這種情況下模板會(huì)重復(fù)循環(huán)n次，代碼如下：<ul><templatev-for="iteminitems":key="item.msg"><li>{{item.msg}}</li><liclass="divider"role="presentation"></li></template></ul>也可以利用帶有v-for的<template>來(lái)循環(huán)渲染一段包含多個(gè)元素的內(nèi)容，<divid="range"class="demo"><spanv-for="nin10":key="n">{{n}}</span></div>注意：當(dāng)它們處于同一節(jié)點(diǎn)時(shí)，v-if的優(yōu)先級(jí)比v-for更高，這意味著v-if將沒(méi)有權(quán)限訪問(wèn)v-for中的變量<templatev-for="todointodos":key=""><liv-if="!todo.isComplete">{{}}</li></template>03數(shù)據(jù)綁定指令v-bindPARTVue3基本指令0102v-bind的主要作用是動(dòng)態(tài)更新HTML元素上的屬性，同時(shí)也可以動(dòng)態(tài)綁定組件的props屬性，也可以使用簡(jiǎn)寫(xiě)的符號(hào)“:”來(lái)代替它。<divid="app"><av-bind:href="url">前往百度</a></div>

<script>constvm=Vue.createApp({data(){return{url:''}}}).mount('#app');</script>下面示例中鏈接的href屬性通過(guò)v-bind指令動(dòng)態(tài)地設(shè)置，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，組件會(huì)被重新渲染v-bind參數(shù)與數(shù)據(jù)綁定數(shù)據(jù)綁定指令v-bind動(dòng)態(tài)綁定在這種情況下，v-bind指令不需要接收參數(shù)，可以直接使用，代碼如下：<divid="app"><!--綁定一個(gè)有屬性的對(duì)象--><formv-bind="form0bj"><inputtype="text"></form></div><script>constvm=Vue.createApp({data(){return{form0bj:{method:‘get’,action:‘#’}}}}).mount(‘#app’);</script>渲染結(jié)果Vue3官方提供了一個(gè)簡(jiǎn)寫(xiě)方式:bind<!--模板--><divid="red"v-bind="{id:'blue'}"></div><!--結(jié)果--><divid="blue"></div>

<!--模板--><divv-bind="{id:'blue'}"id="red"></div><!--結(jié)果--><divid="red"></div>04v-model與表單PARTVue3基本指令0102v-model指令用于在表單中的<input>、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定，<divid="app"><inputtype="text"v-model="message"></div><script>constvm=Vue.createApp({data(){return{message:'HelloWorld'}}}).mount('#app');</script>渲染結(jié)果在開(kāi)發(fā)者工具的控制臺(tái)窗口中，輸入vm.message='WelcometotheVueworld'，可以看到v-model綁定的表達(dá)式數(shù)據(jù)發(fā)生改變，導(dǎo)致頁(yè)面元素的值隨之改變。數(shù)據(jù)雙向綁定Vue3基本指令值綁定復(fù)選框

v-model指令用于在表單中的<input>、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定.復(fù)選框。在使用單個(gè)復(fù)選框時(shí)，在<input>元素上可以使用兩個(gè)特殊的屬性true-value和false-value來(lái)指定選中狀態(tài)下和未選中狀態(tài)下v-model綁定的值<divid="app"><inputid="agreement"type="checkbox"v-model="isAgree"true-value="yes"false-value="no"><labelfor="agreement">{{isAgree}}</label></div>

<script>constvm=Vue.createApp({data(){return{isAgree:false}}}).mount('#app');</script>Vue3基本指令值綁定單選按鈕v-model指令用于在表單中的<input>、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定，負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件從而更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行特殊處理，單選按鈕被選中時(shí)，v-model綁定的數(shù)據(jù)屬性的值默認(rèn)被設(shè)置為該單選按鈕的value值?？梢允褂胿-bind將<input>元素的value屬性再綁定到另一個(gè)數(shù)據(jù)屬性上，選中后的值就是這個(gè)value屬性綁定的數(shù)據(jù)屬性的值，代碼如下：<divid="app"><inputid="male"type="radio"v-model="gender":value="genderVal[0]"><labelfor="male">男</label><br><inputid="female"type="radio"v-model="gender":value="genderVal[1]"><labelfor="female">女</label><br><span>性別：{{gender}}</span></div><script>constvm=Vue.createApp({data(){return{gender:'',genderVal:['男','女']}}}).mount('#app');</script>Vue3基本指令0102通過(guò)選擇框選擇內(nèi)容后，其值是選項(xiàng)的值，即<option>元素的value屬性的值。選項(xiàng)的value屬性也可以使用v-bind指令綁定到一個(gè)數(shù)據(jù)屬性上，代碼如下：<selectv-model="selected"title="select"><!--內(nèi)聯(lián)對(duì)象字面量--><optionv-bind:value="{number:2022}">2023</option></select>或者將value屬性綁定到一個(gè)對(duì)象字面量上，當(dāng)選項(xiàng)被選中時(shí)，vm.selected.number的值會(huì)變更為2023，代碼如下：<optionv-for="optioninoptions"v-bind:value="option.value"></option>選擇框選項(xiàng)Vue3基本指令0102trim修飾符。用于自動(dòng)過(guò)濾用戶輸入內(nèi)容首尾兩端的空格，使用v-model時(shí)，代碼如下：<inputtype="text"v-model="inputValue"><p>{{inputValue}}</p><inputtype="text"v-model.trim="inputValue"><p>{{inputValue}}</p>運(yùn)行結(jié)果如圖lazy修飾符。用于將v-model的默認(rèn)觸發(fā)方式由input事件更改為change事件number修飾符。用于自動(dòng)將用戶輸入的數(shù)據(jù)轉(zhuǎn)換為數(shù)值類(lèi)型，如果無(wú)法被parseFloat()轉(zhuǎn)換，<inputtype="text"v-model.lazy="inputValue"><p>{{inputValue}}</p><inputtype="text"v-model.number="inputValue"><p>{{inputValue}}</p>修飾符Vue3基本指令方法、計(jì)算屬性與監(jiān)聽(tīng)屬性<divid="app"><!--渲染DOM樹(shù)--><h1style="color:seagreen;">{{title}}</h1><h2>Title:{{name}}</h2><h2>Topic:{{topic}}</h2><!--調(diào)用Vue3方法中的函數(shù)--><h2>{{show()}}</h2>

</div>

<script>constvm=Vue.createApp({data(){return{title:"GeeksforGeeks",name:"Vue.js",topic:"Instances"}},//創(chuàng)建組件中的Vue3方法methods:{//創(chuàng)建函數(shù)show:function(){return"歡迎嘗試這個(gè)Vue例子"++"-"+this.topic;}}}).mount('#app');</script>運(yùn)行效果如圖0102Vue3基本指令0102計(jì)算屬性

在模板中使用表達(dá)式非常方便，但如果表達(dá)式的邏輯比較復(fù)雜，使用計(jì)算屬性會(huì)大大減少模板的復(fù)雜度，代碼如下<divid="app"><p>{{message.split(").reverse().join(")}}</p></div>計(jì)算屬性是以函數(shù)形式在computed選項(xiàng)中定義?？梢允褂糜?jì)算屬性來(lái)實(shí)現(xiàn)字符串反轉(zhuǎn)的功能，代碼如下<script>constvm=Vue.createApp({data(){return{message:'Hellol,welcometoVue!'}},//創(chuàng)建計(jì)算屬性computed:{//計(jì)算屬性的getterreversedMessage(){returnthis.message.split('').reverse().join('');}}}).mount('#app');</script><divid="app"><divid="app"><p>原始字符串：{{message}}</p><p>計(jì)算后的反轉(zhuǎn)字符串：{{reversedMessage}}</p></div></div>Vue3基本指令運(yùn)行結(jié)果如圖計(jì)算屬性默認(rèn)只有g(shù)etter，因此不能直接修改計(jì)算屬性，如需修改可以參考以下代碼：<script>constvm=Vue.createApp({data(){return{firstName:'Smith',lastName:"Will"}},//創(chuàng)建計(jì)算屬性computed:{fullName:{//getter()函數(shù)get(){returnthis.firstName+''+this.lastName;},//setter()函數(shù)set(newValue){letnames=newValue.split('');this.firstName=names[0];this.lastName=names[names,length1];}}}}).mount('#app');</script><divid="app"><divid="app"><p>Firstname:<inputtype="text"v-model="firstName"></p><p>Lastname:<inputtype="text"v-model="lastName"></p><p>{{fullName}}</p></div></div>Vue3基本指令0102監(jiān)聽(tīng)事件

v-on指令用于綁定事件監(jiān)聽(tīng)器，也可以使用簡(jiǎn)寫(xiě)的符號(hào)“@”來(lái)代替它。運(yùn)行結(jié)果如圖<script>constvm=Vue.createApp({data(){return{message:'Hellol,welcometoVue!'}},//創(chuàng)建計(jì)算屬性computed:{//計(jì)算屬性的getterreversedMessage(){returnthis.message.split('').reverse().join('');}}}).mount('#app');</script>v-on指令還可以接收一個(gè)用于調(diào)用的函數(shù)名稱(chēng)<buttonv-on:click="greet">Greet</button>methods:{greet:function(event){alert('Hello'++'!')}}Vue3基本指令0102自定義指令

運(yùn)行結(jié)果如圖//注冊(cè)一個(gè)全局自定義指令v-focusVue.directive('focus',{//當(dāng)被綁定的元素插入到DOM樹(shù)中時(shí)……inserted:function(el){//聚焦元素el.focus()}})v-on指令還可以接收一個(gè)用于調(diào)用的函數(shù)名稱(chēng)<buttonv-on:click="greet">Greet</button>methods:{greet:function(event){alert('Hello'++'!')}}然后開(kāi)發(fā)者可以在模板中任何元素上使用新的v-focus屬性Vue3基本指令鉤子函數(shù)

bind只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，可以進(jìn)行一次性的初始化設(shè)置inserted被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）update所在組件的VNode更新時(shí)調(diào)用componentUpdated指令所在組件的VNode及其子VNode全部更新后調(diào)用unbind只調(diào)用一次，指令與元素解綁時(shí)調(diào)用謝謝觀看！

Vue3

組件介紹組件是Vue3中最核心的功能之一，可用于前端應(yīng)用程序的模塊化開(kāi)發(fā)，實(shí)現(xiàn)系統(tǒng)的可重用性和可擴(kuò)展性。組件是可復(fù)用的實(shí)例，在根組件實(shí)例中可用的選項(xiàng)也可以在組件中使用。開(kāi)發(fā)人員能使用可復(fù)用組件系統(tǒng)構(gòu)建大型應(yīng)用程序，幾乎所有類(lèi)型的應(yīng)用程序界面都可以抽象為一棵組件樹(shù)。Contents目錄快速構(gòu)建頁(yè)面組件間數(shù)據(jù)傳遞內(nèi)容分發(fā)01020304

其他應(yīng)用01快速構(gòu)建頁(yè)面PART1.1基本使用方法//定義一個(gè)名為<button-counter>的新組件Vponent('button-counter',{data:function(){return{count:0}},template:'<buttonv-on:click="count++">Youclickedme{{count}}times.</button>'})1.1基本使用方法組件是可復(fù)用的Vue3實(shí)例且?guī)в幸粋€(gè)名字，在這個(gè)例子中是<button-counter>。開(kāi)發(fā)者可以在通過(guò)newVue創(chuàng)建的Vue3根實(shí)例中，將這個(gè)組件作為自定義元素來(lái)使用，代碼如下：<divid="components-demo">

<button-counter></button-counter></div>組件可以接收與newVue相同的選項(xiàng)，如data、computed、watch、methods以及鉤子函數(shù)等，但el選項(xiàng)例外。1.2組件復(fù)用每當(dāng)復(fù)用一個(gè)組件時(shí)，都會(huì)創(chuàng)建一個(gè)獨(dú)立的組件實(shí)例，每個(gè)實(shí)例都獨(dú)立維護(hù)它的數(shù)據(jù)。定義<button-counter>組件時(shí)，data選項(xiàng)并不是一個(gè)對(duì)象，而是一個(gè)函數(shù)，這是因?yàn)榻M件的data選項(xiàng)必須返回一個(gè)對(duì)象的獨(dú)立拷貝，以便每個(gè)組件實(shí)例可以維護(hù)自己的一份數(shù)據(jù)，代碼如下：data:function(){return{count:0}}1.3組織結(jié)構(gòu)通常情況下，應(yīng)用程序會(huì)以一棵嵌套的組件樹(shù)的形式進(jìn)行組織，如圖：需要將組件注冊(cè)到Vue3實(shí)例中才能使用，組件的注冊(cè)方式分為全局注冊(cè)和局部注冊(cè)兩種，全局注冊(cè)組件使用Vue3實(shí)例的component()函數(shù)，該函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是組件的名稱(chēng)，第二個(gè)參數(shù)是組件的配置對(duì)象或組件的選項(xiàng)。注冊(cè)的語(yǔ)法形式如下：ponent({string}name,{FunctionIObject}definition(optional))1.3組織結(jié)構(gòu)下面是一個(gè)全局注冊(cè)組件的例子代碼：constapp=Vue.createApp({});ponent('ButtonCounter',{data(){return{count:0}},template:'<button@click="count++">Youclickedme{{count}}times.</button>'});app.mount('#app');1.3組織結(jié)構(gòu)1.組件的內(nèi)容可以通過(guò)template選項(xiàng)定義，在使用組件時(shí)，組件所在位置會(huì)被template選項(xiàng)的內(nèi)容所替換。組件注冊(cè)完成后，可以將組件視為自定義元素，在需要的地方按照元素的方式使用，元素的名稱(chēng)就是注冊(cè)時(shí)指定的組件名稱(chēng)。<divid="app"><ButtonCounter></ButtonCounter></div>2.上述代碼并不能正常工作，因?yàn)镠TML并不區(qū)分元素和屬性的大小寫(xiě)，瀏覽器會(huì)把所有大寫(xiě)字符解釋為小寫(xiě)字符，例如：會(huì)把<ButtonCounter>解釋為<buttoncounter>，這就導(dǎo)致找不到組件而出現(xiàn)錯(cuò)誤，解決辦法是在HTML模板中采用kebab-case命名引用組件。<divid="app"><button-counter></button-counter></div>1.3組織結(jié)構(gòu)只要組件注冊(cè)時(shí)采用的是PascalCase（首字母大寫(xiě)）命名，就可以采用kebab-case命名來(lái)引用。在非HTML模板中可以使用組件的原始名稱(chēng)，即<ButtonCounter>和<button-counter>都是可以的。如果要保持名字的統(tǒng)一性，可以在注冊(cè)組件時(shí)，直接使用kebab-case命名為組件命名，例如：ponent('button-counter',...)1.3組織結(jié)構(gòu)T由于HTML不支持自閉合的自定義元素，在HTML模板中不能將<ButtonCounter>組件當(dāng)作自閉合元素使用。例如：不能使用<button-counter/>，而應(yīng)該使用<button-counter></button-counter>。在非HTML模板中不存在這個(gè)限制，相反還鼓勵(lì)將沒(méi)有內(nèi)容的組件作為自閉合元素使用，這可以明確表示該組件沒(méi)有內(nèi)容，并且省略了結(jié)束標(biāo)記，代碼也更加簡(jiǎn)潔。局部注冊(cè)是在組件實(shí)例的選項(xiàng)對(duì)象中使用component選項(xiàng)注冊(cè)。constMyComponent={data(){return{count:0}},template:'<buttonv-on:click="count++">Youclickedme{{count}}times.</button>'}constapp=Vue.createApp({components:{ButtonCounter:MyComponent}}).mount('#app');對(duì)于components選項(xiàng)對(duì)象，每個(gè)屬性的名稱(chēng)就是自定義元素的名稱(chēng)，其屬性值就是組件實(shí)例。全局注冊(cè)的組件可以在應(yīng)用程序的任何組件實(shí)例的模板中使用，而局部注冊(cè)的組件只能在父組件的模板中使用。1.4鉤子函數(shù)在Vue3中針對(duì)鉤子函數(shù)設(shè)計(jì)了新的函數(shù)，這些函數(shù)可以幫助開(kāi)發(fā)者編寫(xiě)更好的代碼。Vue3的CompositionAPI提供了一個(gè)setup()函數(shù)封裝了大部分組件代碼，并處理了響應(yīng)式、鉤子函數(shù)等，可以取代之前的beforeCreate()函數(shù)和Create()函數(shù)。鉤子函數(shù)是必須導(dǎo)入到項(xiàng)目中的，這是為了使項(xiàng)目盡可能輕量化。導(dǎo)入方式如下import{onMounted,onUpdated,onUnmounted}from'vue'

1.4鉤子函數(shù)0102固定欄靠前所謂的固定欄，也就是帶有.mui-bar屬性的節(jié)點(diǎn)，都是基于fixed定位的元素；常見(jiàn)組件包括：頂部導(dǎo)航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項(xiàng)卡（.mui-bar-tab）;這些元素使用時(shí)需遵循一個(gè)規(guī)則：放在.mui-content元素之前，即使是底部工具條和底部選項(xiàng)卡，也要放在.mui-content之前，否則固定欄會(huì)遮住部分主內(nèi)容；一切內(nèi)容都要包裹在mui-content中。除了固定欄之外，其它內(nèi)容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基于Fixed定位，不受流式布局限制，普通內(nèi)容依然會(huì)從top:0的位置開(kāi)始布局，這樣就會(huì)被固定欄遮罩，mui為了解決這個(gè)問(wèn)題，定義了如下css代碼：.mui-bar-nav~.mui-content{padding-top:44px;}.mui-bar-footer~.mui-content{padding-bottom:44px;}.mui-bar-tab~.mui-content{padding-bottom:50px;}

1.4鉤子函數(shù)0102舊的鉤子函數(shù)可以在setup()函數(shù)中訪問(wèn)，代碼如下：exportdefault{setup(){onBeforeMount(()=>{//...})onMounted(()=>{//...})onBeforeUpdate(()=>{//...})onUpdated(()=>{//...})onBeforeUnmount(()=>{//...})onErrorCaptured(()=>{//...})}}import{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,onErrorCaptured}from'vue'02組件間數(shù)據(jù)傳遞PART2.1通過(guò)props屬性傳遞數(shù)據(jù)0102使用組件時(shí)可以為組件元素設(shè)置屬性。首先需要在組件內(nèi)部注冊(cè)一些自定義屬性，稱(chēng)為prop，這些prop是在組件的props選項(xiàng)中定義的，然后就可以將這些prop名稱(chēng)作為元素的屬性名來(lái)使用，通過(guò)屬性向組件傳遞數(shù)據(jù)。代碼如下：Vponent('blog-post',{props:['title'],template:'<h3>{{title}}</h3>'})一個(gè)組件默認(rèn)可以擁有任意數(shù)量的prop，任何值都可以傳遞給任何prop。在上述模板中能夠在組件實(shí)例中訪問(wèn)title這個(gè)值。一個(gè)prop被注冊(cè)之后，就可以像這樣把數(shù)據(jù)作為一個(gè)自定義屬性傳遞進(jìn)來(lái)。

2.2通過(guò)“總線”傳遞數(shù)據(jù)事件總線是Vue3的一個(gè)實(shí)例，也稱(chēng)作EventBus。定義如下：importVuefrom'vue'exportdefaultnewVue()也可以直接在main.js中直接初始化，代碼如下：//main.jsVtotype.$EventBus=newVue()。<template><divclass="header"><divclass="header-logo"><imgalt="Vuelogo"src="../../assets/images/common/logo.png"@click="changeCollapse"></div></div></template>發(fā)送事件使用的是$emit()函數(shù)，該函數(shù)包含兩個(gè)參數(shù)：一個(gè)是事件名稱(chēng)，一個(gè)是參數(shù)。以下是一個(gè)以ElementUI側(cè)邊欄菜單折疊為例的代碼：<script>importbusfrom'@/utils/eventBus.js'exportdefault{data(){return{collapse:false}},methods:{changeCollapse(){this.collapse=!this.collapsebus.$emit('collapse',this.collapse)}}}</script>2.2通過(guò)“總線”傳遞數(shù)據(jù)<template><divclass="sidebar"><el-scrollbarclass="scroll-wrapper"><el-menuclass="sidebar-el-menu":default-active="$route.path":collapse="collapse"unique-openedrouter><subItem:items="items":collapse="collapse"/></el-menu></el-scrollbar><divclass="slideIn"@click="changeCollapse">||</div></div></template>接下來(lái)需要在需要響應(yīng)的組件中接收事件并作出響應(yīng)，代碼如下：<script>importbusfrom"@/utils/eventBus.js"importsubItemfrom"./subitem"exportdefault{props:['items'],data(){return{collapse:false}},created(){bus.$on("collapse",msg=>{this.collapse=msg})},methods:{changeCollapse(){this.collapse=!this.collapsebus.$emit("collapse",this.collapse)}}}</script>2.2通過(guò)“總線”傳遞數(shù)據(jù)<script>importbusfrom"@/utils/eventBus.js"exportdefault{methods:{handleClick(){bus.$off("collapse",{})//移除單個(gè)事件bus.$off()//移除全部事件}}}</script>移除事件可使用$off，單獨(dú)移除某一個(gè)事件的監(jiān)聽(tīng)需要第一個(gè)參數(shù)，即事件名稱(chēng)，全部移除則不需要任何參數(shù)，代碼如下：2.3通過(guò)監(jiān)聽(tīng)事件傳遞數(shù)據(jù)前面介紹了父組件可以通過(guò)prop向子組件傳遞數(shù)據(jù)，反過(guò)來(lái)，子組件的某些功能需要與父組件進(jìn)行通信，則可以通過(guò)自定義事件實(shí)現(xiàn)。子組件使用$emit()函數(shù)觸發(fā)事件，父組件使用v-on指令監(jiān)聽(tīng)子組件的自定義事件，$emit()函數(shù)的語(yǔ)法形式如下：$emit(eventName,[...args])eventName為事件名，args為附加參數(shù)，這些參數(shù)會(huì)傳給事件監(jiān)聽(tīng)器的回調(diào)函數(shù)。子組件通過(guò)第二個(gè)參數(shù)向父組件傳遞數(shù)據(jù)。ponent('child',{data(){return{name:'張三'}},

methods:{handleClick(){//調(diào)用實(shí)例的$emit()函數(shù)觸發(fā)自定義事件greet，并傳遞參數(shù)

this.$emit('greet',);}},template:'<button@click="handleClick">開(kāi)始?xì)g迎</button>'})2.3通過(guò)監(jiān)聽(tīng)事件傳遞數(shù)據(jù)0102子組件中的按鈕接收到click事件后，使用$emit()函數(shù)觸發(fā)一個(gè)自定義事件，使用組件時(shí)可以使用v-on指令監(jiān)聽(tīng)greet事件，實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)，代碼如下：<divid="app"><child@greet="sayHello"></child></div>constapp=Vue.createApp({methods:{//自定義事件的附加參數(shù)會(huì)自動(dòng)傳入函數(shù)sayHello(name){alert("Hello,"+name);}}});與組件和prop不同，事件名不會(huì)自動(dòng)轉(zhuǎn)換大小寫(xiě)。調(diào)用$emit()函數(shù)觸發(fā)的事件名稱(chēng)需要與用于監(jiān)聽(tīng)該事件的名稱(chēng)完全匹配。如果在v-on指令中直接使用JavaScript語(yǔ)句，則可以通過(guò)$emit()函數(shù)訪問(wèn)自定義事件的附加參數(shù)，示例代碼如下：<button@click="$emit('enlarge-text',0.1)">Enlargetext</button>；03內(nèi)容分發(fā)PART3.1基本使用方法創(chuàng)建組件代碼如下：<navigation-linkurl="/profile">YourProfile</navigation-link><navigation-link>模板代碼如下：<av-bind:href="url"class="nav-link"><slot></slot></a>當(dāng)組件渲染時(shí)，<slot></slot>將被替換為“YourProfile”，插槽內(nèi)可以包含任何模板代碼或者組件，代碼如下：<navigation-linkurl="/profile"><!--添加一個(gè)FontAwesome圖標(biāo)--><spanclass="fafa-user"></span>YourProfile</navigation-link><navigation-linkurl="/profile"><!--添加一個(gè)圖標(biāo)的組件--><font-awesome-iconname="user"></font-awesome-icon>YourProfile</navigation-link>如果<navigation-link>的模板中沒(méi)有包含<slot>元素，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容都會(huì)被拋棄。3.2編譯作用域在插槽中使用數(shù)據(jù)的模板代碼如下：<navigation-linkurl="/profile">

Loggedinas{{}}</navigation-link>該插槽跟模板的其他地方一樣可以訪問(wèn)相同的實(shí)例property(也就是相同的“作用域”)，而不能訪問(wèn)<navigation-link>的作用域，例如：下方代碼中url是訪問(wèn)不到的：<navigation-linkurl="/profile">Clickingherewillsendyouto:{{url}}//這里的'url'會(huì)是undefined</navigation-link>3.3后備內(nèi)容可以給一個(gè)插槽設(shè)置默認(rèn)內(nèi)容，這個(gè)內(nèi)容只會(huì)在沒(méi)有提供內(nèi)容時(shí)被渲染，例如：<button>組件大部分時(shí)候渲染文本“Submit”作為默認(rèn)內(nèi)容，示例代碼如下：<buttontype="submit">

<slot>Submit</slot></button>當(dāng)在一個(gè)父組件中使用<submit-button>并且沒(méi)有提供任何插槽內(nèi)容時(shí)，將會(huì)渲染默認(rèn)內(nèi)容“Submit”，如果提供了內(nèi)容，則會(huì)渲染提供的內(nèi)容，代碼如下：<submit-button></submit-button><buttontype="submit">Submit</bu