《Vue.js超詳細入門與項目實戰(zhàn)》課件全套 李永亮 第1-10章 vue 3簡介 -vue 3詳解

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

Integrated

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

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

謝謝觀看！HelloWord與Vue3的基礎(chǔ)特性Contents目錄HelloWord示例01Vue3組件的生命周期02數(shù)據(jù)綁定0304案例01HelloWord示例PARTHelloWord示例<divid='app'><!--簡單文本插值--><p>{{message}}</p><!--JavaScript表達式--><p>{{message.toUpperCase()}}</p><!--簡單文本插值--><p>{{spanHTML}}</p><!--輸出HTML--><pv-html="spanHTML"></p></div>HelloWord示例<!--綁定數(shù)據(jù)--><av-bind:href="url">Vue.js</a></div><!--某些情況下可能需要翻墻才能訪問--><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的最基本的使用方法，實現(xiàn)了數(shù)據(jù)的綁定。在data()函數(shù)中返回的值將在頁面中顯示。其運行效果如下所示。HelloWord示例典型的項目的組件樹可能如下所示：RootComponent└─TodoList├─TodoItem│├─TodoButtonDelete│└─TodoButtonEdit└─TodoListFooter├─TodosButtonClear└─TodoListStatistics02Vue3組件的生命周期PART認識生命周期Vue3組件的生命周期:創(chuàng)建實例初始化數(shù)據(jù)編譯模板掛載DOM渲染更新到最終卸載實例鉤子函數(shù)Vue3提供了以下8個鉤子函數(shù):beforeCreate（創(chuàng)建前）created（創(chuàng)建后）beforeMount（載入前）mounted（載入后）beforeUpdate（更新前）updated（更新后）beforeUnmount（卸載前）unmounted（銷毀后）03數(shù)據(jù)綁定PART文本插值數(shù)據(jù)綁定最常見的形式是使用Mustache語法（雙大括號）的文本插值。代碼如下：<span>Message:{{msg}}</span><script>constapp={data(){return{msg:'HelloVue.js'};}};constvm=Vue.createApp(app).mount('#app');</script>文本插值Mustache語法標簽

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

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

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

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

<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>利用過濾器過濾指定字符代碼如下：<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進而觸發(fā)組件不同的表現(xiàn)形式。指令的主要職責是在其值發(fā)生改變時，將相應的影響作用于DOM對象。<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，這三個指令用于實現(xiàn)條件判斷，在true和false之間切換時，元素或組件將被銷毀或重建。v-if、v-else-if、v-else渲染結(jié)果將age屬性的值修改為20（即vm.age=20），然后切換回元素窗口，渲染結(jié)果如圖

注意0102如需控制多個元素的創(chuàng)建或刪除，可以使用<template>元素將這些元素包裝起來，然后在<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>需要特別注意的是：當一個條件被滿足時，后續(xù)的條件判斷都不會再執(zhí)行，v-else-if和v-else需要緊跟在v-if或v-else-if之后。Vue3基本指令0102條件渲染指令條件渲染指令的主要功能是根據(jù)指令的值為true或false進而觸發(fā)組件不同的表現(xiàn)形式。指令的主要職責是在其值發(fā)生改變時，將相應的影響作用于DOM對象。<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屬性，當條件變化時，該指令會觸發(fā)過渡效果，代碼如下。v-show指令V-show渲染結(jié)果從頁面的展示效果來看，v-show與v-if似乎沒有不同，但在頁面結(jié)構(gòu)中可以發(fā)現(xiàn)，v-show并沒有根據(jù)條件不同而改變頁面結(jié)構(gòu).v-show的值是true還是false，v-show指令都會創(chuàng)建元素，它通過CSS樣式中的display屬性來控制元素是否顯示。當v-if的值為false時，v-if指令不會創(chuàng)建該元素。只有當v-if的值為true時，v-if指令才會真正創(chuàng)建該元素。02列表渲染PARTVue3基本指令0102列表渲染指令列表渲染指令的主要功能是根據(jù)數(shù)組的值來進行列表的遍歷循環(huán)。從而快速的渲染html結(jié)構(gòu)，使代碼具有整潔性，開發(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指令基于一個數(shù)組來渲染一個列表。v-for指令需要使用iteminitems形式的特殊語法，其中items是源數(shù)據(jù)數(shù)組，item是被迭代的數(shù)組元素的別名，v-for指令V-show渲染結(jié)果在<li>元素上使用v-for指令遍歷數(shù)組，這將循環(huán)渲染<li>元素。在v-for塊中，可以訪問所有父作用域的屬性，item是數(shù)組中元素的別名，在每次循環(huán)時，item的值為數(shù)組當前索引的值，除此之外，v-for還支持一個可選的第二個參數(shù)，也可以用v-for來遍歷一個對象的所有可枚舉屬性。<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甚至可以增加第三個參數(shù)來獲取索引，代碼如下：<liv-for="(value,name,index)inmyObject">{{index}}.{{name}}:{{value}}</li>Vue3默認采用“就地更新”策略。如果數(shù)據(jù)項的順序被更改，Vue3將不會移動頁面元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素，并確保它們在每個索引位置被正確渲染。建議在使用v-for指令時盡可能提供key值，這樣可以提高v-for的渲染效率，v-for指令<divv-for="iteminitems":key="item.id"><!--內(nèi)容--></div>Vue3基本指令0102列表渲染指令

列表渲染指令的主要功能是根據(jù)數(shù)組的值來進行列表的遍歷循環(huán)。從而快速的渲染html結(jié)構(gòu)，使代碼具有整潔性，開發(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可以用來顯示數(shù)組過濾或排序后的結(jié)果，如果要顯示一個數(shù)組經(jīng)過過濾或排序后的版本，而不改變原始數(shù)據(jù)，可以創(chuàng)建一個計算屬性來返回處理后的數(shù)組v-for的其他操作v-for循環(huán)中無法使用計算屬性，可以使用methods()函數(shù)來解決Vue3基本指令v-for也可以接受整數(shù)n進行作為迭代參數(shù)，在這種情況下模板會重復循環(huán)n次，代碼如下：<ul><templatev-for="iteminitems":key="item.msg"><li>{{item.msg}}</li><liclass="divider"role="presentation"></li></template></ul>也可以利用帶有v-for的<template>來循環(huán)渲染一段包含多個元素的內(nèi)容，<divid="range"class="demo"><spanv-for="nin10":key="n">{{n}}</span></div>注意：當它們處于同一節(jié)點時，v-if的優(yōu)先級比v-for更高，這意味著v-if將沒有權(quán)限訪問v-for中的變量<templatev-for="todointodos":key=""><liv-if="!todo.isComplete">{{}}</li></template>03數(shù)據(jù)綁定指令v-bindPARTVue3基本指令0102v-bind的主要作用是動態(tài)更新HTML元素上的屬性，同時也可以動態(tài)綁定組件的props屬性，也可以使用簡寫的符號“:”來代替它。<divid="app"><av-bind:href="url">前往百度</a></div>

<script>constvm=Vue.createApp({data(){return{url:''}}}).mount('#app');</script>下面示例中鏈接的href屬性通過v-bind指令動態(tài)地設(shè)置，當數(shù)據(jù)發(fā)生變化時，組件會被重新渲染v-bind參數(shù)與數(shù)據(jù)綁定數(shù)據(jù)綁定指令v-bind動態(tài)綁定在這種情況下，v-bind指令不需要接收參數(shù)，可以直接使用，代碼如下：<divid="app"><!--綁定一個有屬性的對象--><formv-bind="form0bj"><inputtype="text"></form></div><script>constvm=Vue.createApp({data(){return{form0bj:{method:‘get’,action:‘#’}}}}).mount(‘#app’);</script>渲染結(jié)果Vue3官方提供了一個簡寫方式: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é)果在開發(fā)者工具的控制臺窗口中，輸入vm.message='WelcometotheVueworld'，可以看到v-model綁定的表達式數(shù)據(jù)發(fā)生改變，導致頁面元素的值隨之改變。數(shù)據(jù)雙向綁定Vue3基本指令值綁定復選框

v-model指令用于在表單中的<input>、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定.復選框。在使用單個復選框時，在<input>元素上可以使用兩個特殊的屬性true-value和false-value來指定選中狀態(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ù)綁定，負責監(jiān)聽用戶的輸入事件從而更新數(shù)據(jù)，并對一些極端場景進行特殊處理，單選按鈕被選中時，v-model綁定的數(shù)據(jù)屬性的值默認被設(shè)置為該單選按鈕的value值?？梢允褂胿-bind將<input>元素的value屬性再綁定到另一個數(shù)據(jù)屬性上，選中后的值就是這個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通過選擇框選擇內(nèi)容后，其值是選項的值，即<option>元素的value屬性的值。選項的value屬性也可以使用v-bind指令綁定到一個數(shù)據(jù)屬性上，代碼如下：<selectv-model="selected"title="select"><!--內(nèi)聯(lián)對象字面量--><optionv-bind:value="{number:2022}">2023</option></select>或者將value屬性綁定到一個對象字面量上，當選項被選中時，vm.selected.number的值會變更為2023，代碼如下：<optionv-for="optioninoptions"v-bind:value="option.value"></option>選擇框選項Vue3基本指令0102trim修飾符。用于自動過濾用戶輸入內(nèi)容首尾兩端的空格，使用v-model時，代碼如下：<inputtype="text"v-model="inputValue"><p>{{inputValue}}</p><inputtype="text"v-model.trim="inputValue"><p>{{inputValue}}</p>運行結(jié)果如圖lazy修飾符。用于將v-model的默認觸發(fā)方式由input事件更改為change事件number修飾符。用于自動將用戶輸入的數(shù)據(jù)轉(zhuǎn)換為數(shù)值類型，如果無法被parseFloat()轉(zhuǎn)換，<inputtype="text"v-model.lazy="inputValue"><p>{{inputValue}}</p><inputtype="text"v-model.number="inputValue"><p>{{inputValue}}</p>修飾符Vue3基本指令方法、計算屬性與監(jiān)聽屬性<divid="app"><!--渲染DOM樹--><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"歡迎嘗試這個Vue例子"++"-"+this.topic;}}}).mount('#app');</script>運行效果如圖0102Vue3基本指令0102計算屬性

在模板中使用表達式非常方便，但如果表達式的邏輯比較復雜，使用計算屬性會大大減少模板的復雜度，代碼如下<divid="app"><p>{{message.split(").reverse().join(")}}</p></div>計算屬性是以函數(shù)形式在computed選項中定義?？梢允褂糜嬎銓傩詠韺崿F(xiàn)字符串反轉(zhuǎn)的功能，代碼如下<script>constvm=Vue.createApp({data(){return{message:'Hellol,welcometoVue!'}},//創(chuàng)建計算屬性computed:{//計算屬性的getterreversedMessage(){returnthis.message.split('').reverse().join('');}}}).mount('#app');</script><divid="app"><divid="app"><p>原始字符串：{{message}}</p><p>計算后的反轉(zhuǎn)字符串：{{reversedMessage}}</p></div></div>Vue3基本指令運行結(jié)果如圖計算屬性默認只有g(shù)etter，因此不能直接修改計算屬性，如需修改可以參考以下代碼：<script>constvm=Vue.createApp({data(){return{firstName:'Smith',lastName:"Will"}},//創(chuàng)建計算屬性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)聽事件

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

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

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

Vue3

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

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

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

1.4鉤子函數(shù)0102固定欄靠前所謂的固定欄，也就是帶有.mui-bar屬性的節(jié)點，都是基于fixed定位的元素；常見組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規(guī)則：放在.mui-content元素之前，即使是底部工具條和底部選項卡，也要放在.mui-content之前，否則固定欄會遮住部分主內(nèi)容；一切內(nèi)容都要包裹在mui-content中。除了固定欄之外，其它內(nèi)容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基于Fixed定位，不受流式布局限制，普通內(nèi)容依然會從top:0的位置開始布局，這樣就會被固定欄遮罩，mui為了解決這個問題，定義了如下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ù)中訪問，代碼如下：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通過props屬性傳遞數(shù)據(jù)0102使用組件時可以為組件元素設(shè)置屬性。首先需要在組件內(nèi)部注冊一些自定義屬性，稱為prop，這些prop是在組件的props選項中定義的，然后就可以將這些prop名稱作為元素的屬性名來使用，通過屬性向組件傳遞數(shù)據(jù)。代碼如下：Vponent('blog-post',{props:['title'],template:'<h3>{{title}}</h3>'})一個組件默認可以擁有任意數(shù)量的prop，任何值都可以傳遞給任何prop。在上述模板中能夠在組件實例中訪問title這個值。一個prop被注冊之后，就可以像這樣把數(shù)據(jù)作為一個自定義屬性傳遞進來。

2.2通過“總線”傳遞數(shù)據(jù)事件總線是Vue3的一個實例，也稱作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ù)包含兩個參數(shù)：一個是事件名稱，一個是參數(shù)。以下是一個以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通過“總線”傳遞數(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>接下來需要在需要響應的組件中接收事件并作出響應，代碼如下：<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通過“總線”傳遞數(shù)據(jù)<script>importbusfrom"@/utils/eventBus.js"exportdefault{methods:{handleClick(){bus.$off("collapse",{})//移除單個事件bus.$off()//移除全部事件}}}</script>移除事件可使用$off，單獨移除某一個事件的監(jiān)聽需要第一個參數(shù)，即事件名稱，全部移除則不需要任何參數(shù)，代碼如下：2.3通過監(jiān)聽事件傳遞數(shù)據(jù)前面介紹了父組件可以通過prop向子組件傳遞數(shù)據(jù)，反過來，子組件的某些功能需要與父組件進行通信，則可以通過自定義事件實現(xiàn)。子組件使用$emit()函數(shù)觸發(fā)事件，父組件使用v-on指令監(jiān)聽子組件的自定義事件，$emit()函數(shù)的語法形式如下：$emit(eventName,[...args])eventName為事件名，args為附加參數(shù)，這些參數(shù)會傳給事件監(jiān)聽器的回調(diào)函數(shù)。子組件通過第二個參數(shù)向父組件傳遞數(shù)據(jù)。ponent('child',{data(){return{name:'張三'}},

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

this.$emit('greet',);}},template:'<button@click="handleClick">開始歡迎</button>'})2.3通過監(jiān)聽事件傳遞數(shù)據(jù)0102子組件中的按鈕接收到click事件后，使用$emit()函數(shù)觸發(fā)一個自定義事件，使用組件時可以使用v-on指令監(jiān)聽greet事件，實現(xiàn)子組件向父組件傳遞數(shù)據(jù)，代碼如下：<divid="app"><child@greet="sayHello"></child></div>constapp=Vue.createApp({methods:{//自定義事件的附加參數(shù)會自動傳入函數(shù)sayHello(name){alert("Hello,"+name);}}});與組件和prop不同，事件名不會自動轉(zhuǎn)換大小寫。調(diào)用$emit()函數(shù)觸發(fā)的事件名稱需要與用于監(jiān)聽該事件的名稱完全匹配。如果在v-on指令中直接使用JavaScript語句，則可以通過$emit()函數(shù)訪問自定義事件的附加參數(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>當組件渲染時，<slot></slot>將被替換為“YourProfile”，插槽內(nèi)可以包含任何模板代碼或者組件，代碼如下：<navigation-linkurl="/profile"><!--添加一個FontAwesome圖標--><spanclass="fafa-user"></span>YourProfile</navigation-link><navigation-linkurl="/profile"><!--添加一個圖標的組件--><font-awesome-iconname="user"></font-awesome-icon>YourProfile</navigation-link>如果<navigation-link>的模板中沒有包含<slot>元素，則該組件起始標簽和結(jié)束標簽之間的內(nèi)容都會被拋棄。3.2編譯作用域在插槽中使用數(shù)據(jù)的模板代碼如下：<navigation-linkurl="/profile">

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

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