vue中常用的缩写方式

目录vue常用缩写绑定数据v-bind监听事件v-onvue的简写vue常用缩写绑定数据v-bindv-bind的缩写是：可以使用setAttribute设置，getAttribut...

目录

vue常用缩写

绑定数据 v-bind

v-bind 的缩写是 ：

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

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

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

例子：

// 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);
    rhttp://www.cppcns.cometurn (
    [year, month, date].join('-') +
    ' ' +
    [Hours, Minutes, Seconds].join(':')
    );
 },
},

监听事件 v-on

v-on 的缩写是 @

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

例子：

// 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').inpythonnerHTML = "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.)"
    www.cppcns.combreak;
   case error.UNKNOWN_ERROR: // 未知错误
    document.querySelector('.geo').innerHTML = "发生未知错误(An unknown error occurred.)"
    break;
  }
 }
},

vue的简写

1. &javascriptlt;p v-on:click="DOSomething"></p>    

简写：

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

2. <p v-bind:class="{className:true}"    

简写：

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。