Vue的事件处理，点击事件

    监听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、事件处理的修饰符

.stop阻止事件冒泡，等同于调用event.stopPropagation.capture捕获冒泡，使用capture模式添加事件监听器.once只触发一次回调，加上once之后prevent失效.prevent阻止标签的默认行为，等于调用event.preventDefault().passive不阻止事件的默认行为.self将事件绑定到自身，只有自身才能触发

<!--阻止单击事件继续传播-->
<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别名Enter13enterBackspace8deleteEsc27escLeft Arrow(←)37leftUp Arrow(↑)38upRight Arrow(→)39rightDown Arrow(↓)40downTab9tabDelete46deleteSpacebar32spaceShift16shiftCtrl17ctrlAlt18alt

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

v-model表单修饰符：

lazy光标离开标签的时候，将值赋予给value，进行数据同步trim自动过滤用户输入的首空格字符，而中间的空格不会过滤number
自动将用户输入转换为数值类型，如果转换结果为NaN，则返回覆盖原始值

<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指令修饰符：

sync对props进行一个双向绑定prop设置自定义标签属性，避免暴露数据，防止污染HTML结构camel将命名变为驼峰法命名法，如将hello_world属性名转换为helloWorld