《Vue 3基礎(chǔ)入門》課件 第二章 Hello Wod與Vue 3的基礎(chǔ)特性

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)目的組件樹可能如下所示：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（銷毀后）03數(shù)據(jù)綁定PART文本插值數(shù)據(jù)綁定最常見的形式是使用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è)面在瀏覽器中打開，并通過(guò)按F12鍵打開開發(fā)者工具，就能夠看到如圖2.3所示的內(nèi)容。文本插值在控制臺(tái)中，輸入vm.msg=“welcome”，然后按回車鍵，可以看到頁(yè)面中的文字立刻進(jìn)行了更新，如圖2.4所示。另外，通過(guò)使用v-once指令，開發(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)常需要開發(fā)者屏蔽一些特殊字符。假設(shè)有這樣一個(gè)頁(yè)面，其中包含一個(gè)輸入框，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，頁(yè)面會(huì)實(shí)時(shí)顯示用戶的輸入內(nèi)容，并將其中的所有小寫字母轉(zhuǎn)化為大寫字母，相當(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中的所有小寫字母轉(zhuǎn)化為大寫字母，并將格式化后的內(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(){