作用：事件绑定(给元素设置事件)
    语法: v-on(简写@)

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>v-on事件绑定</title>
    9.     <style>
    10.         .box{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: red;
    14.         }
    15.         .active{
    16.             background-color: green;
    17.         }
    18.     </style>
    19. </head>
    21. <body>
    22.     <div id='app'>
    23.         <h3>{{num}}</h3>
    24.         <button v-on:click="handleClick">+1</button>
    25.         <div class='box' :class='{active:isActive}'></div>
    26.         <button @click='changeClick'>切换</button>
    27.         <input v-on:keyup.up="submit">
    28.     </div>
    29.     <script src="./vue.js"></script>
    30.     <script>
    32.         /* 
    34.         1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    36.         2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
    38.         3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
    40.         */
    41.         new Vue({
    42.             el: '#app',
    43.             data: {
    44.                 num:0,
    45.                 isActive:false
    46.             },
    47.             methods: {
    48.                 handleClick(){
    49.                     this.num+=1;
    50.                 },
    51.                 changeClick(){
    52.                   this.isActive = !this.isActive;
    53.                 },
    54.                 submit(){
    55.                     alert(1);
    56.                 }
    57.             },
    58.         })
    59.     </script>
    60. </body>
    62. </html>