您现在的位置是：网站首页> 编程资料编程资料

vue中常用的缩写方式_vue.js_

2023-05-24 186人已围观

简介 vue中常用的缩写方式_vue.js_

vue常用缩写

绑定数据 v-bind

v-bind 的缩写是：

可以使用 setAttribute 设置， getAttribute 获取的属性都可以使用这种动态绑定

列举一些使用频率比较高的，比如：

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

例子：

// HTML 绑定数据
绑定数据
 //上面两种写法都能渲染成下面这样 绑定数据

// 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(':')           );     }, },

监听事件 v-on

v-on 的缩写是 @

常用的有@click点击事件、@change域的内容发生改变时触发的事件、@mouseenter鼠标移入事件、@mouseleave鼠标移出事件、@mousemove鼠标移动事件、@mousedown鼠标按下事件、@mouseup鼠标松开事件、@input输入文本时触发的事件、@focus获取焦点事件、@blur失去焦点事件等等

例子：

// HTML 点击展示地点
点击展示地点

// 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;         }     } },