vue视频教程系列第七节-如何给模板上的标签绑定事件

vue视频教程系列第七节-如何给模板上的标签绑定事件

今天主要讲如何给模板上的标签绑定事件

首先描述一下我的需求：

在页面创建了一个红色的按钮，铵钮上的文字是“提交”，当我点击按钮时，按钮上的文字变成“已提交”。

提炼分析我们的需求：

1.点击按钮---触发事件

2.文字变化---执行函数

如何做呢？当当当当....另一个明星闪亮登场---“v-on:click”！这可是在vue编程里出镜率极高的当红小生噢。我们可以在dom标签上这样写：

{{content}}

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数据改变，我的页面数据就会随之变化。我们这样写

methods: {

   changecon: function() {

    this.content = "已提交"

   }

  }

this：指的是vue实例下的data数据。将data数据里的content变量改变，是不是前端页面的数据也随之改变呢？你们可以看下页面，点击一下看看是否执行成功呢？

神不神奇？酷不酷？vue带你进入一个神奇的世界！

所以在编写vue的时候，我们的思路一定要转变过来。曾经是面向dom进行编程，现在是面向数据编程。初接触vue时，可能有些懵，没关系，思维的碰撞本该如此，证明你是在动脑筋了。随着编程地不断深入，你会越来越发现vue的便捷高效，会爱上这门语言。

PS一下指令v-on:click的简写方式：@click 在接下来的编程当中，我们都会用@click编写方式，因为太方便了

欢迎关注公众号：Web前端风暴