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

Vue3基本指令Contents目錄條件渲染指令01列表渲染指令v-for02數(shù)據(jù)綁定指令v-bind03v-model與表單0401條件渲染PARTVue3基本指令0102條件渲染指令條件渲染指令的主要功能是根據(jù)指令的值為true或false進而觸發(fā)組件不同的表現(xiàn)形式。指令的主要職責是在其值發(fā)生改變時，將相應(yīng)的影響作用于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ā)生改變時，將相應(yīng)的影響作用于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指令用于綁定