今天主要讲如何给模板上的标签绑定事件
首先描述一下我的需求：
在页面创建了一个红色的按钮，铵钮上的文字是“提交”，当我点击按钮时，按钮上的文字变成“已提交”。
提炼分析我们的需求：
1.点击按钮---触发事件
2.文字变化---执行函数
如何做呢？当当当当....另一个明星闪亮登场---“v-on:click”！这可是在vue编程里出镜率极高的当红小生噢。我们可以在dom标签上这样写：
<div>
<button v-on:click="changecon">{{ content }}</button>
</div>
v-on:click这是一个指令，因为需要写在模板标签上，所以也叫模板标签。意思就是向这个div标签上绑定一个事件。“ changecon ”是事件触发后执行的函数。那么问题来了，这个函数要写在哪里呢？当然是js里，如下：
export default {
data() {
return {
content: "提交"
}
},
methods: {
changecon: function() {
//函数体，执行的行为
}
}
}
如何将“提交”变成“已提交”呢？这就涉及到了vue的精华所在！
之前我们编程的思路是，如果数据有变化，我们会直接去操作dom节点；但在vue的世界里，不用去操作dom了，直接改变data里的数据，显示在页面上的数据就会随之变化了。原理就是，当vue里的data数据改变的时候，vue会自动地帮你更新dom里绑定的数据。就是我们想改变什么，去操作什么就可以了！是不是听起来很简单呢？接下来看下我是如何变化这个数据的。
思路：只要我把data里的content数据改变，我的页面数据就会随之变化。所以我们在方法里去改变content:
methods: {
changecon: function() {
this.content = "已提交"
}
}
this：指的是vue实例下的data数据。将data数据里的content变量改变，是不是前端页面的数据也随之改变呢？你们可以看下页面，点击一下看看是否执行成功呢？
神不神奇？酷不酷？vue带你进入一个神奇的世界！
所以在编写vue的时候，我们的思路一定要转变过来。曾经是面向dom进行编程，现在是面向数据编程。初接触vue时，可能有些懵，没关系，思维的碰撞本该如此，证明你是在动脑筋了。随着编程地不断深入，你会越来越发现vue的便捷高效，会爱上这门语言。
PS一下指令v-on:click的简写方式：@click 。在接下来的编程当中，我们都会用@click编写方式，因为太方便了！
好，这节课先到这里了，明天我们继续加油噢：）