前情回顾

上一课,我们学习了三个vue指令:v-if, v-show, v-for。

v-if和v-show的作用是条件性的渲染一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-for的作用是循环渲染一块内容,比如对列表进行循环渲染,展示不同的数据。

事件监听器(v-on指令)

v-on指令可以为你添加一个事件监听器,用来与用户进行交互。我们可以使用v-on写一个一个非常简单的点击+1的功能,如下代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>v-on</title>
    <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
      <span>{{count}}</span>
      <button v-on:click="handleClick">加1</button>
    </div>
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            count: 0
          },
          methods: {
            handleClick() {
              this.count++
            }
          }
        })
      </script>
    </body>
</html>
运行结果:
每次点击button,数值加1
代码解析:
  • 代码第11行,button标签内添加了一个v-on:click事件监听器。
  • 在vue实例化对象中,定义了一个data属性,count初始化为0。
  • 在vue实例化对象中,还定义了一个方法,handleClick方法。v-on:click="handleClick"语句就是将事件监听器绑定在该方法中。
  • handleClick方法中实现了count加1的功能。注意,this的作用就是表示当前的vue实例对象。

表单输入的双向绑定(v-model指令)

Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

如下代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>v-on</title>
    <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
      <span>{{msg}}</span>
      <input v-model="msg" />
    </div>
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            msg: 0
          }
        })
      </script>
    </body>
</html>
运行结果:
刚打开浏览器的时候看到的是0,以及输入框里有个0.

当你在输入框里输入其他字符串的时候,外面的span标签里的内容也跟着变化。

这就叫双向数据绑定。

代码解析:
  • 在input标签内,使用了v-model指令,将输入框绑定在msg中。
  • msg定义在vue实例化对象的data属性里。
  • 这就实现了用户输入与DOM双向数据绑定,非常简单吧!

rubben
6 声望1 粉丝