vue 事件基礎

v-on 

縮寫：@

v-on:click="handle($event)"     $event可以獲取到該dom的基礎信息           https://cn.vuejs.org/v2/api/#v-on

 

其他的

HTML 事件屬性寫法與之類似

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

onafterprint	script	文檔打印之后運行的腳本。
onbeforeprint	script	文檔打印之前運行的腳本。
onbeforeunload	script	文檔卸載之前運行的腳本。
onerror	script	在錯誤發生時運行的腳本。
onhaschange	script	當文檔已改變時運行的腳本。
onload	script	頁面結束加載之后觸發。
onmessage	script	在消息被觸發時運行的腳本。
onoffline	script	當文檔離線時運行的腳本。
ononline	script	當文檔上線時運行的腳本。
onpagehide	script	當窗口隱藏時運行的腳本。
onpageshow	script	當窗口成為可見時運行的腳本。
onpopstate	script	當窗口歷史記錄改變時運行的腳本。
onredo	script	當文檔執行撤銷（redo）時運行的腳本。
onresize	script	當瀏覽器窗口被調整大小時觸發。
onstorage	script	在 Web Storage 區域更新后運行的腳本。
onundo	script	在文檔執行 undo 時運行的腳本。
onunload	script	一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

例如：onload 換成vue的寫法就是 v-on:load="handle($event)"      或    @load="handle($event)" 

v-on:  就相當於  onload 前綴的on用法，其他的用法類似

其他的我沒試過不知道是不是這樣的額，猜想應該是這樣的額

@load的用法

 <div class="imgAll">
         <!--屏幕寬度： {{screenWidth}}-->
          <ul>
            <li v-for="(value,key) in imageUrls" class="imgBox" >
              <div class="box">
                <img :src="value" @load="drawImage_box($event)" class="imsg">
              </div>
              <i class="delImg" v-on:click="delImg(key)"> X </i>
            </li>
            <li >
              <div class="z_file">
                <input type="file" name="file" class="inputstyle"  @change="PreviewImage"/>
              </div>
            </li>
          </ul>
        </div>

//獲取縮略圖盒子寬高后再執行縮放
      drawImage_box(e){
          var width_img= $(".imgBox").width();
          var height_img= $(".imgBox").height();
          // console.log(width_img + "," + height_img);
          this.DrawImage( e.target,width_img, height_img);
        },
      //圖片縮放居中核心功能
      DrawImage(ImgID,width_s, height_s) {
        var image = new Image();
        let imgInfo = ImgID;
        if (imgInfo) {
          let src = ImgID.src;
          image.src = src;
          if (image.width > 0 && image.height > 0) {
            if (image.width / image.height <= width_s / height_s) {
              ImgID.width = width_s;
              var height = (image.height * width_s) / image.width;
              ImgID.height = height;
              ImgID.style.marginTop = -(height - height_s) / 2 + "px";
            } else {
              ImgID.height = height_s;
              var width = (image.width * height_s) / image.height;
              ImgID.width = width;
              ImgID.style.marginLeft = -(width - width_s) / 2 + "px";
            }
          }
        }
      },