Vue 事件

1 语法:
    1.1 使用v-on指令注册事件
         <标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
    1.2  简写方式
         <标签 @事件句柄="表达式或者事件处理函数"></标签>
2. 注意事项:
        事件处理函数作为事件句柄的值不需要调用.

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
           num:0
        },
        methods:{
            myclick:function(){
                app.num++;
                console.log(this);
            }
        }
    });
</script>

内联事件处理函数

1 语法:
    1.1 使用v-on指令注册事件
         <标签 v-on:事件句柄="内联函数(实际参数)"></标签>
    1.2  简写方式
         <标签 @事件句柄="内联函数(实际参数)"></标签>
2. 注意事项:
    2.1 内联事件处理函数需要调用才能够执行并且可以传入实际参数给函数

<div id="app">
 <button v-on:click="say('hello')">hello</button><br/>
 <button @click="say('hi')">hi</button><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
        },
        methods:{
            say:function(message){
                console.log(this);
            }
        }
    });
</script>

事件处理函数中的this

事件处理函数和内联事件处理函数都在事件发生时被Vue实例调用执行.
所以this代表当前Vue实例
用法:
   this代表当前Vue实例. 所以在事件处理函数中可以通过this访问data中的数据和其他  方法.

<div id="app">
    <h1>{{num}}</h1>

    <button @click="myclick">点我1</button>
    <button @click="myclick()">点我2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   var app = new Vue({
        el: "#app",
        data: {
            num:1
        },
       methods:{
            myclick:function () {
                this.num++;
            }
        }
    });
</script>

事件对象

Vue事件对象就是JavaScript中原生的事件对象

   1  事件处理函数接收自动接收事件处理函数
        当事件发生时,浏览器会自动将事件对象传递给事件处理函数中.

   2  内联事件处理函数需要通过$event将事件对象传递给事件处理函数.

   3. 注意事项:
       $event是一个固定的名字不能够被修改

<div id="app">
    <button @click="myclick1">按钮1</button>
    <button @click="myclick2('你好',$event)">按钮2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {},
       methods:{
            myclick1:function (event) {
               console.log(event.target);
            },
            myclick2:function (message,event) {
               console.log(message,event.target);
            }
        }
    });
</script>

事件修饰符

1. 语法:
    1.1 使用v-on指令注册事件
         <标签 v-on:事件句柄.修饰符="表达式或者事件处理函数"></标签>
    1.2  简写方式
         <标签 @事件句柄.修饰符="表达式或者事件处理函数"></标签>

2  事件修饰符
    当事件发生时, 可以阻止事件冒泡以及默认事件等操作.
   常见的事件修饰符:
   .prevent  :阻止事件默认行为

3. 按键修饰符
   通过按键修饰符来指定什么按键才出发事件处理函数.
   常见的事件修饰符:
   .keyup.enter: 按下回车键时触发事件处理函数.

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="myclick1">点我</a>
    <input type="text" @keyup.enter="mykey">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
       el: "#app",
        data: {},
        methods:{
            myclick1:function (event) {
                alert("手真贱...");
           },
            mykey:function (event) {
                console.log("准备提交表单了.....");
            },
        }
    });
</script>