Vue的事件处理，点击事件

目录

1、 v-on:click 绑定属性示例：

2、 v-on:click 绑定方法示例：

3、 v-on:click 绑定特殊变量示例：

4、事件处理的修饰符 

        按键修饰符：

        v-model表单修饰符：

        v-bind指令修饰符：

        监听DOM事件使用的是v-on指令，该指令通常在模板中直接使用，在触发事件时会触发执行一些JavaScript代码。Vue.js提供了v-on指令的简写形式“@”，可用“@”来代替，如v-on:click可用简写成@click

1、 v-on:click 绑定属性示例：

<div id="element">
   <button @click="count++">点击</button>
   <p>{{count}}</p>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            count:0
        }
    })
</script>

2、 v-on:click 绑定方法示例：

<div id="element">
   <button @click="show">点击</button>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            count:0
        },
        methods:{
            show:function(){
                alert("点击调用")
            }
        }
    })
</script>

3、 v-on:click 绑定特殊变量示例：

除了绑定到一个方法之外，v-on也支持内联JavaScript语句，但只可以使用一个语句，如果在内联语句中需要获取原生的DOM事件对象，可以将一个特殊变量$event传入方法之中

<div id="element">
   <button @click="show('我被点击了',$event)">点击</button>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            count:0
        },
        methods:{
            show:function(message,e){
                e.preventDefault();//组织浏览器默认行为
                alert(message)
            }
        }
    })
</script>

4、事件处理的修饰符 

<!--阻止单击事件继续传播-->
<a v-on:click.stop="doSomething"></a>
<!-- 默认情况下，点击子div会默认触发冒泡，打印的结果为2，1；
这里给父div添加了capture修饰符，则会转为捕获阶段，则点击子div时，会从最外层向点击的目标元素一层一层触发相同的事件，则结果为1，2； -->
<div @click.capture="showMsg(1)">
    <div @click="showMsg(2)">
    </div>
</div>
  <!-- showMsg(msg) {
      console.log(msg);
  } -->
<!--只触发一次，后续不会触发-->
<button v-on:click.once="doSomething"></button>
<!--阻止默认事件-->
<a href="#" v-on:click.prevent="doSomething"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 `onScroll` 完成  -->
<div v-on:scroll.passive="onScroll"></div>
<!--阻止表单默认提交事件-->
<form v-on:submit.prevent="onSubmit"></form>
<!--只有当事件是从当前元素本身触发时才会调用处理函数-->
<div v-on:click.self="doSomething"></div>
<!--修饰符串联，阻止表单默认提交事件且阻止冒泡-->
<a v-on:click.stop.prevent="doSomething"></a>
<!--只有修饰符，而不绑定事件-->
<form v-on:submit.prevent></form>

        按键修饰符：

<!--使用keycode-->
<input v-on:keyup.13="xxx">
<!--使用别名-->
<input v-on:keyup.enter="xxx">

        v-model表单修饰符：

<div id="element">
    <p>lazy示例,光标离开输入框时，值才会同步更新</p>
    <input v-model.lazy="message" placeholder="点击输入">
    <p>当前输入：{{message}}</p>
    <p>number示例</p>
    <input v-model.number="message1" placeholder="点击输入">
    <p>当前输入：{{message1}}</p>
    <p>trim示例</p>
    <input v-model.trim="message2" placeholder="点击输入">
    <p>当前输入：{{message2}}</p>
 </div>
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
     var demo = new Vue({
         el: '#element',
         data: {
             message: '',
             message1:'',
             message2:'',
         }
     })
 </script>

        v-bind指令修饰符：