vue中常用的缩写方式

// HTML
<div v-bind:title="message">绑定数据</div>
<div :title="message">绑定数据</div>
//上面两种写法都能渲染成下面这样
<div title="现在的时间 --》 2020-10-29 19:25:38">绑定数据</div>

// JS
data() {
    return {
          message: '现在的时间--》' + 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(':')
          );
    },
},

// HTML
<div v-on:click="showLocation">点击展示地点</div>
<div @click="showLocation">点击展示地点</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: // 无法获取当前位置
                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 = "发生未知错误(An unknown error occurred.)"
                break;
        }
    }
},

<p @click="doSomething"></p>

<p :class="{className:true}"></p>