v-on事件指令

v-on 用来绑定对应的js事件，触发的事件只需要写在Vue对象的methods属性中即可，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="myClick">点击此处，修改下方title</button>
        <h1>{{title}}</h1>

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title: "冒险岛"
        },
        // 所有的函数或者放大都在methods属性中定义
        methods:{

            // 当触发myClick方法时，就会调用methods中的myClick
            myClick:function(){
                alert(123);
            }
        }
    })
</script>

第12行使用v-on将myClick方法绑定给点击事件

测试：
点击按钮，成功触发弹窗。

练习：点击按钮修改title标签内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="myClick">点击此处，修改下方title</button>
        <h1>{{title}}</h1>

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title: "冒险岛"
        },
        // 所有的函数或者放大都在methods属性中定义
        methods:{

            // 当触发myClick方法时，就会调用methods中的myClick
            myClick:function(){
                this.title="maple story"
            }
        }
    })
</script>

第29行直接使用this.title="maple story"修改指定的属性即可，不需要像微信小程序中使用this,setData({})

v-on简写

使用@ 可以代替v-on: ，例如上面的v-on:click="myClick" 可以写成如下形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="myClick">点击此处，修改下方title</button>
        <h1>{{title}}</h1>

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title: "冒险岛"
        },
        // 所有的函数或者放大都在methods属性中定义
        methods:{

            // 当触发myClick方法时，就会调用methods中的myClick
            myClick:function(){
                this.title="maple story"
            }
        }
    })
</script>

案例：轮播

实现一个点击加号就切换到下一张图片，点击减号就切换到上一张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="myClick">点击此处，修改下方title</button>
        <h1>{{title}}</h1>

        <button @click="sub">-</button>
        <button @click="add">+</button>
        <h3>{{num}}</h3>
        <img :src="'images/men1-'+num+'.jpg'" alt="">
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title: "冒险岛",
            num:1,
        },
        // 所有的函数或者放大都在methods属性中定义
        methods:{

            // 当触发myClick方法时，就会调用methods中的myClick
            myClick:function(){
                this.title="maple story"
            },
            sub:function(){
                this.num--
            },
            add:function(){
                this.num++
            }
        }
    })
</script>

15-16行添加加减按钮，并且使用@绑定点击事件用来触发sub,add两个函数
36-40行为sub,add两个函数，用来改变num值的大小
18行使用:绑定data中的num的值，这样通过点击加减按钮改变num的值，从而改变图片的路径，切换成不同图片。
- 这里要注意使用字符串在单引号内,data中的变量名不需要单引号。

测试页面：