码迷,mamicode.com
首页 > 其他好文 > 详细

vue 事件基础

时间:2018-11-20 11:43:08      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:get   下载   用法   tor   attr   before   box   事件   name   

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

 

vue 事件基础

标签:get   下载   用法   tor   attr   before   box   事件   name   

原文地址:https://www.cnblogs.com/itchenfirst/p/9987279.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!