vue中常用的縮寫方式

更新時間：2022年09月21日 16:39:14 作者：林迦葉

這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue常用縮寫

綁定數(shù)據(jù) v-bind

v-bind 的縮寫是：

可以使用 setAttribute 設(shè)置， getAttribute 獲取的屬性都可以使用這種動態(tài)綁定

列舉一些使用頻率比較高的，比如：

:title、:class、:style、:key、:item、:index、:src、:href

例子：

// HTML
<div v-bind:title="message">綁定數(shù)據(jù)</div>
<div :title="message">綁定數(shù)據(jù)</div>
//上面兩種寫法都能渲染成下面這樣
<div title="現(xiàn)在的時間 --》 2020-10-29 19:25:38">綁定數(shù)據(jù)</div>

// JS
data() {
?? ?return {
? ? ? ?? ?message: '現(xiàn)在的時間--》' + this.formatTime(new Date()),
? ? };
},
methods: {
? ? fillZero(n) {
? ? ? ?? ?return n < 10 ? '0' + n : n;
? ? },
? ? formatTime(time) {
? ? ? ?? ?var year = time.getFullYear(),
? ? ? ? ?? ?month = time.getMonth() + 1,
? ? ? ? ?? ?date = time.getDate(),
? ? ? ? ?? ?hours = time.getHours(),
? ? ? ? ?? ?minutes = time.getMinutes(),
? ? ? ? ?? ?seconds = time.getSeconds();
? ? ? ?? ?var Hours = this.fillZero(hours);
? ? ? ?? ?var Minutes = this.fillZero(minutes);
? ? ? ?? ?var Seconds = this.fillZero(seconds);
? ? ? ?? ?return (
? ? ? ? [year, month, date].join('-') +
? ? ? ? ' ' +
? ? ? ? [Hours, Minutes, Seconds].join(':')
? ? ? ?? ?);
?? ?},
},

監(jiān)聽事件 v-on

v-on 的縮寫是 @

常用的有@click點(diǎn)擊事件、@change域的內(nèi)容發(fā)生改變時觸發(fā)的事件、@mouseenter鼠標(biāo)移入事件、@mouseleave鼠標(biāo)移出事件、@mousemove鼠標(biāo)移動事件、@mousedown鼠標(biāo)按下事件、@mouseup鼠標(biāo)松開事件、@input輸入文本時觸發(fā)的事件、@focus獲取焦點(diǎn)事件、@blur失去焦點(diǎn)事件等等

例子：

// HTML
<div v-on:click="showLocation">點(diǎn)擊展示地點(diǎn)</div>
<div @click="showLocation">點(diǎn)擊展示地點(diǎn)</div>
<div class="geo"></div>

// JS
methods: {
?? ?showLocation(){
? ? ? ?? ?if (navigator.geolocation) {
?? ??? ??? ?navigator.geolocation.getCurrentPosition(this.showPosition, this.showError);
?? ??? ?} else {
?? ??? ??? ?document.querySelector('.geo').innerHTML = "此瀏覽器不支持地理位置(Geolocation is not supported by this browser.)";
?? ??? ?}
? ? },
? ? showPosition(position) {
?? ??? ?document.querySelector('.geo').innerHTML = "Latitude: " + position.coords.latitude + " & Longitude: " + position.coords.longitude;
? ? },
? ? showError(error) {
?? ??? ?switch (error.code) {
?? ??? ??? ?case error.PERMISSION_DENIED: // 用戶不允許地理定位
?? ??? ??? ??? ?document.querySelector('.geo').innerHTML = "用戶拒絕了地理定位請求(User denied the request for Geolocation.)"
?? ??? ??? ??? ?break;
?? ??? ??? ?case error.POSITION_UNAVAILABLE: // 無法獲取當(dāng)前位置
?? ??? ??? ??? ?document.querySelector('.geo').innerHTML = "位置信息不可用(Location information is unavailable.)"
?? ??? ??? ??? ?break;
?? ??? ??? ?case error.TIMEOUT: // 操作超時
?? ??? ??? ??? ?document.querySelector('.geo').innerHTML = "獲取用戶位置的請求超時(The request to get user location timed out.)"
?? ??? ??? ??? ?break;
?? ??? ??? ?case error.UNKNOWN_ERROR: // 未知錯誤
?? ??? ??? ??? ?document.querySelector('.geo').innerHTML = "發(fā)生未知錯誤(An unknown error occurred.)"
?? ??? ??? ??? ?break;
?? ??? ?}
?? ?}
},