指令3——（v-on）

作者: 小丘啦啦啦 | 来源:发表于2019-02-27 16:42 被阅读0次

指令3——（v-on）
11.Vue.js方法
【Vue基础】二、Vue中的指令
Vue作品考核回顾
说说 Vue.js 中的 v-on 事件指令
vue事件与表单处理
【Vue】常用指令之v-on
v-on指令
v-on 指令
指令

一、v-on
用来绑定事件，值识别为一个变量，与Vue对象的方法对应，可简写为（@）。
无传参的方法，默认了一个参数为event，是原生 DOM 。
定义了自己参数的方法，还需要在内联语句处理器中访问原始的 DOM ，可以用特殊变量 $event 把它传入方法。

<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>{{val}}</p>
    <!-- 绑定事件，指向Vue对象的方法 -->
    <input type="button" value="点击按钮" v-on:click="add">
    <!-- 事件后面也可直接更改Vue对象的数据属性 -->
    <input type="button" value="控制按钮" v-on:mouseover="mouseAdd('用鼠标增加',$event)">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        val: 1
      },
      methods: { //methods属性中定义了当前Vue对象所有可用方法
        add: function (event) {
          /* this指向当前Vue对象的数据 */
          this.val++;
          if (event) {
            console.log(event.target.tagName);
          }
        },
        mouseAdd(msg,event){
          this.val++;
          if (event) {
            console.log(event.target.tagName);
            console.log(msg);
          }
        }
      }
    })
  </script>
</body>

</html>

二、跑马灯

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <input type="button" value="动起来" @click="lang"/>
            <input type="button" value="停止" @click="stop"/>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'猥琐发育，画画~',
                    intervalId:null
                },
                methods:{  
                    lang(){   //es6对象方法简写
                        if(this.intervalId!=null){   
                            //如果不为null,说明已经开启了定时器,避免重复开定时器
                            return;
                        }
                        this.intervalId = setInterval(()=>{   
                            //把定时器的id赋值给Vue对象的数据,为之后清除定时器准备
                            const start = this.msg.substring(0,1);   
                            //这里箭头函数this会指向此Vue对象
                            const end = this.msg.substring(1);
                            this.msg = end+start;
                            /* Vue实例会实时监听自己身上data数据的变化
                            只要有变就会自动把最新数据同步到页面(不需要考虑重新渲染dom) */
                        },400);
                    },
                    stop(){
                        clearInterval(this.intervalId);   //清除定时器
                        this.intervalId = null;   //定时器id重新赋值为null
                    }
                        
                }
            })
        </script>
    </body>
</html>