Vue之事件绑定与监听与内置指令

v-on 指令用来 监听 DOM 事件

<button v-on:click="say">Say</button>

方法及内联语句处理器

使用methodsz中的方法作为事件的处理器，
v-on:后的参数接受所有的原生事件名称

<button v-on:click="say">Say</button>
var vm = new Vue({ 
el : '#app', 
data: { 　
　 msg : 'Hello Vue.js'
   }, 
   methods : { 　
   　 say : function() { 　　
     　　 alert(this.msg); 　
        　 } 
          } });

输出：Hello Vue.js
v-on 也支持内联 JavaScript 语句，但仅限一个语句

<button v-on:click="sayFrom('from param')">Say</button>
var vm = new Vue({ 
el : '#app', 
data: { 　
　 msg : 'Hello Vue.js' 
  }, 
  methods : { 　
  　 sayFrom: function(from) { 　
    　　 alert(this.msg + '' + from); 　
       　 } 
         } });

同一元素上也可以通过 v-on 绑定多个相同事件函数，执行顺序为顺序执行

<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">

修饰符

v-on有多个修饰符，处理事件的细节

<a v-on:click.stop='doThis'></a>  <!-- 阻止单击事件冒泡 -->
<form v-on:submit.prevent="onSubmit"></form> //阻止表单默认提交事件
<form v-on:submit.stop.prevent="onSubmit"></form> //阻止默认提交事件且阻止冒泡
<form v-on:submit.stop.prevent></form>//可以只有修饰符，并不绑定事件

注：事件冒泡的意思就是点击子节点，会向上触发父节点，祖先节点的点击事件。比如一个div，包裹另一个div的情况，外围的div就是父节点。

v-on 还提供了按键修饰符

<input v-on:keyup.13="submit"/> //当输入回车时触发 Submit 函 数
//全部按 键别名为：enter、tab、delete、esc、space、up、down、left、right
<input v-on:keyup.enter="submit" />

内置指令

1.v-bind

<a v-bind:href="url">...</a>    简写为<a :href="url">...</a>

告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
2.v-on

<a v-on:click="doSomething">...</a>  简写为<a @click="doSomething">...</a>