學習要點:
1.指令
2.縮寫方法
本節課我們來開始學習 Vue3.x 的指令和其縮寫的方法。
一.指令
1. 回顧下上節課,我們已經學習了:v-once、v-html、v-bind 等指令;
2. 指令:即在 HTML 中帶有 v-前綴的特殊 attribute(屬性),值為單個 JS 表達式;
3. 比如:我們想讓一段內容是否可見,可以通過 v-if 的值為 false 對其隱藏;
flag : false
<span v-if="flag">{{counter}}span>
PS:可通過控制臺的查看器來觀察 HTML 的變化;
4. 有些指令可以接受一些“參數”,比如動態的設置 url 鏈接地址,采用 v-bind;
url : 'http://www.baidu.com'
<a v-bind:href="url">百度或搜狗a>
PS:可以在控制臺設置 vm.url = 'http://www.sogou.com'來改變 url 實現切換;
5. 上面的例子中 v-bind:href 中 href 看似固定,實則可以動態改變,具體如下:
<a v-bind:[attrname]="url">attr 動態改變a>
attrname : 'href'
PS:這里的動態參數都用小寫即可,否則會出錯,在 attribute 還可以使用修飾符,后面再說;
二.縮寫方法
1. 在實際使用過程中,v-bind:和 v-on:(事件部分會講),會非常常用;
2. 而這兩種質量后續會帶各種參數和修飾符導致過于繁瑣,故提供了簡寫方案:
// v-bind:
v-bind:href = :href
v-bind:[key] = :[key]
// v-on:
v-on:click = @click
v-on:[key] = @[key]
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!