动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。
注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：
.stop - 调用 event.stopPropagation()；停止冒泡。
.prevent - 调用 event.preventDefault(); 停止监听原生事件。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once - 触发一次。


使用手法：  
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="app">
    <p v-bind:style="{color:fontColor}">{{ message }}</p>
    <button v-on:click="changeContent">改变内容</button>
    <button @click="alertMessage('请在此处修改弹窗内的文字内容!')">弹窗</button>
    <button @click.once="changeColor('red')">改变颜色</button>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: '.app',
        data: {
            message: '天气好热!',
            fontColor:'blue'
        },
        methods:{
            changeContent(){
                this.message = '天气好热啊!!!!!';
            },
            alertMessage(str){
                alert(str);
            },
            changeColor(color){
                this.fontColor = color
            }
        }

    })
</script>
</body>
</html>

我们在上面案例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。