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>
  • 相关阅读:
    mac os programming
    Rejecting Good Engineers?
    Do Undergrads in MIT Struggle to Obtain Good Grades?
    Go to industry?
    LaTex Tricks
    Convert jupyter notebooks to python files
    How to get gradients with respect to the inputs in pytorch
    Uninstall cuda 9.1 and install cuda 8.0
    How to edit codes on the server which runs jupyter notebook using your pc's bwroser
    Leetcode No.94 Binary Tree Inorder Traversal二叉树中序遍历(c++实现)
  • 原文地址:https://www.cnblogs.com/netflix/p/14626488.html
Copyright © 2011-2022 走看看