《Vue 3基礎(chǔ)入門》課件 第三章Vue 3基本指令

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í)，元素或組件將被銷毀或重建。v-if、v-else-if、v-else渲染結(jié)果將age屬性的值修改為20（即vm.age=20），然后切換回元素窗口，渲染結(jié)果如圖

注意0102如需控制多個(gè)元素的創(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>需要特別注意的是：當(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ā)過渡效果，代碼如下。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指令都會(huì)創(chuàng)建元素，它通過CSS樣式中的display屬性來控制元素是否顯示。當(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ù)組的值來進(jìn)行列表的遍歷循環(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指令基于一個(gè)數(shù)組來渲染一個(gè)列表。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)時(shí)，item的值為數(shù)組當(dāng)前索引的值，除此之外，v-for還支持一個(gè)可選的第二個(gè)參數(shù)，也可以用v-for來遍歷一個(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ù)來獲取索引，代碼如下：<liv-for="(value,name,index)inmyObject">{{index}}.{{name}}:{{value}}</li>Vue3默認(rèn)采用“就地更新”策略。如果數(shù)據(jù)項(xiàng)的順序被更改，Vue3將不會(huì)移動(dòng)頁面元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并確保它們在每個(gè)索引位置被正確渲染。建議在使用v-for指令時(shí)盡可能提供key值，這樣可以提高v-for的渲染效率，v-for指令<divv-for="iteminitems":key="item.id"><!--內(nèi)容--></div>Vue3基本指令0102列表渲染指令

列表渲染指令的主要功能是根據(jù)數(shù)組的值來進(jìn)行列表的遍歷循環(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é)果，如果要顯示一個(gè)數(shù)組經(jīng)過過濾或排序后的版本，而不改變原始數(shù)據(jù)，可以創(chuàng)建一個(gè)計(jì)算屬性來返回處理后的數(shù)組v-for的其他操作v-for循環(huán)中無法使用計(jì)算屬性，可以使用methods()函數(shù)來解決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>來循環(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將沒有權(quá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屬性，也可以使用簡寫的符號(hào)“:”來代替它。<divid="app"><av-bind:href="url">前往百度</a></div>

<script>constvm=Vue.createApp({data(){return{url:''}}}).mount('#app');</script>下面示例中鏈接的href屬性通過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è)簡寫方式: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ā)者工具的控制臺(tái)窗口中，輸入vm.message='WelcometotheVueworld'，可以看到v-model綁定的表達(dá)式數(shù)據(jù)發(fā)生改變，導(dǎo)致頁面元素的值隨之改變。數(shù)據(jù)雙向綁定Vue3基本指令值綁定復(fù)選框

v-model指令用于在表單中的<input>、<textarea>和<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定.復(fù)選框。在使用單個(gè)復(fù)選框時(shí)，在<input>元素上可以使用兩個(gè)特殊的屬性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ù)綁定，負(fù)責(zé)監(jiān)聽用戶的輸入事件從而更新數(shù)據(jù)，并對(duì)一些極端場景進(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通過選擇框選擇內(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)過濾用戶輸入內(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ù)值類型，如果無法被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)聽屬性<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"歡迎嘗試這個(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ì)算屬性來實(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)聽事件

v-on指令用于綁定