2018-07-30 v-on的事件监听

一个简单的按钮点击事件，用到v-on监听：

初始状态

代码：

<template>
  <div>
    <div class="bottom" >
      <div class="startBox" v-on:click="counter+=1">
        <text>按钮</text>
      </div>
    </div>
      <div class="bottom" >
          <div class="startBox" >
              <text>点了{{counter}}下</text>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data: {
            counter: 0,
        },

    }
</script>

每点一下按钮，下边的数字加1
另一种方式是通过函数，然后控制点击次数的增加：
代码：

<template>
  <div>
    <div class="bottom" >
      <div class="startBox" v-on:click="times">
        <text>按钮</text>
      </div>
    </div>
      <div class="bottom" >
          <div class="startBox" >
              <text>点了{{counter}}下</text>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data: {
            counter: 0,
        },
        methods: {
            times:function (event) {
                this.counter++
            }
        }
    }
</script>

此处用到v-model 指令在表单控件元素上创建双向数据绑定。
令人感动的是：v-model 会根据控件类型自动选取正确的方法来更新元素。
蓝色代表输入框

image.png

代码：

<template>
  <div>
    <div class="bottom" >
        <text>单行文本输入：</text>
          <input class="start" placeholder="由此开始输入..." v-model="message1">
          <text>你刚刚输入了:</text>
            <text>{{message1}}</text>
    </div>
      <div class="bottom" >
          <text>多行文本输入：</text>
          <textarea class="start" placeholder="由此开始输入..." v-model="message2"></textarea>
          <text>你刚刚输入了:</text>
          <text>{{message2}}</text>
      </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data: {
            message1:'this is 1',
            message2:'this is 2\nthis is 3',
        },
    }
</script>

当把里面内容都清空，则显示：

image.png