Vue中“v-on”命令

该命令用来绑定事件，可以是连接的选择器，也可以是某中变化

CDN完事后在body标签里

<div id="app">
        <input type="button" value="指令1" v-on:click="dolt">
        <input type="button" value="指令2" @click="changeFood">
        <h3 @click="changeFood">{{food}}</h3>
    </div>

如代码所示，v-on可省略为“@”，不影响其使用

在下面创建“script”标签

然后：

<script>
        var app = new Vue({
            el:"#app",
            data: {
                    food:"土豆"
                },
                methods: {
                    dolt: function() {
                        alert("昏睡的云雪");
                    },
                    changeFood: function() {
                        console.log(this.food); //获取data中food的数据
                }
                /*无论开头取什么名字，只要冒号后面跟着“function”都可以用*/
            }
        });
    </script>

取个名后面加上" : function  "是为了被“v-on”指令使用

其中“changeFood”是在控制台中显示的，如果在“changeFood”中添加

?

1	this.food+="heiheihei";

　　则每点击一次指令2的按钮则在界面上弹出一次“heihiehei”。

?

1	v-on:click="count++"

　　表示每点击一次这个按钮，“count”变量就会增加一。