zoukankan      html  css  js  c++  java
  • 第五课 vue的事件调用自定义方法

    <template>
    <!-- vue的事件调用自定义方法 -->

      <div id="app">

    <!--
          <img v-bind:src='url' />

          <img :src='url' /> -->

          {{msg}}
        <br>
        <br>
        <br>


          <button v-on:click="run1()">执行方法的第一种写法</button>
          <br><br><br>

          <button @click="run2()">执行方法的第二种写法</button>

          <br>
          <br>
          <br>

          <button @click="getMsg()">获取data里面的msg</button>


          <br>
          <br>
          <br>

          <button @click="setMsg()">改变data里面的msg</button>


          <br>
          <br>
          <br>

          <button @click="requestData()">请求数据</button>

          <hr>

          <ul>
            <!-- item是数据,key是数据的下标 -->
            <li v-for="(item,key) in list">
              {{key}}---   {{item}}
            </li>
          </ul>

          <br>
          <br>
          <br>
          <button @click="deleteData('111')">执行方法传值111</button>

          <br>
          <br>
          <button @click="deleteData('222')">执行方法传值2222</button>
          <br>
          <br>
          <br>
          <!-- 通过内置变量$event触发事件查看 -->
          <button data-aid='123' @click="eventFn($event)">事件对象</button>

      </div>
    </template>

    <script>



        export default {
          data () {
            return {
              msg: '你好vue',
              list:[]
            }
          },
          methods:{

            run1:function(){

              alert('这是一个方法');

            },
            run2(){
              alert('这是另一个方法');
            },

            getMsg(){
                alert(this.msg);
            },
            setMsg(){
              this.msg="我是改变后的数据"
            },
            requestData(){

                for(var i=0;i<10;i++){

                  this.list.push('我是第'+i+'条数据');
                }
            },
            deleteData(val){

                alert(val);
            },
            eventFn(e){
              console.log(e);
    /* 触发事件
    altKey: false
    bubbles: true
    button: 0
    buttons: 0
    cancelBubble: false
    cancelable: true
    clientX: 69
    clientY: 575
    composed: true
    ctrlKey: false
    currentTarget: null
    defaultPrevented: false
    detail: 1
    eventPhase: 0
    fromElement: null
    isTrusted: true
    layerX: 69
    layerY: 800
    metaKey: false
    movementX: 0
    movementY: 0
    offsetX: 59
    offsetY: 6
    pageX: 69
    pageY: 800
    path: (6) [button, div#app, body, html, document, Window]
    relatedTarget: null
    returnValue: true
    screenX: 116
    screenY: 679
    shiftKey: false
    sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
    srcElement: button
    target: button
    timeStamp: 14528728.630000005
    toElement: button
    type: "click"
    view: Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
    which: 1
    x: 69
    y: 575
    __proto__: MouseEvent
    */
              // e.srcElement  dom节点



              e.srcElement.style.background='red';

              /*获取自定义属性的值*/
              console.log(e.srcElement.dataset.aid);
            }

          }

        }
    </script>


    <style lang="scss">



    </style>
  • 相关阅读:
    SQLSERVER走起微信公众帐号已经开通搜狗微信搜索
    从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn)
    从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控)
    恢复SQL Server被误删除的数据(再扩展)
    Windows server 2012 添加中文语言包(英文转为中文)(离线)
    SQL Server技术内幕笔记合集
    将表里的数据批量生成INSERT语句的存储过程 增强版
    在SQL2008查找某数据库中的列是否存在某个值
    SQLSERVER走起 APP隆重推出
  • 原文地址:https://www.cnblogs.com/netflix/p/14626488.html
Copyright © 2011-2022 走看看