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

HelloWord與Vue3的基礎特性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)簡單登錄頁面下面構建一個簡單的登錄頁面核心代碼<script>constapp={data(){return{title:'登

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