vue 事件基础

Posted 2021-01-21 itchenfirst

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