Vue with Allgator 03

1. Events
2. 动态样式
3. v-model的两种方式

Events

https://alligator.io/vuejs/events/

v-on

用户在视图中的交互可以触发DOM中的事件，比如click，keyup。我们使用v-on指令处理这些事件。

一个简单的例子，我们点击按钮实现递增的计数：

data() {
  return {
    count: 0
  }
}

<label>Count is: {{count}}</label>
<button v-on:click="count++">Increment</button>

绑定方法到 v-on

使用方法名将其绑定到事件：

<input v-model="addValue">
<button v-on:click="addToCount">Add</button>

methods: {
  addToCount: function() {
    this.count = this.count + parseInt(this.addValue);
  }
}

v-on的简写方式

v-on:可以用@来代替。比如：

<button @click="addToCount">Add</button>

修改事件

**event.preventDefault()**经常被调用，用于阻止浏览器的默认行为。例如：

<a href="test" @click.prevent="addToCount">Add</a>

在Vue中以下修改是适用的：

• stop 防止事件冒泡的DOM树
• prevent 防止默认行为
• capture 捕获模式用于事件处理
• self 只触发事件本身
• once 仅运行函数一次

修改按键

我们使用keyup来处理按键事件：

<input v-on:keyup.13="addToCount" v-model="addValue">

13表示回车键，抬起回车键后会触发addToCount事件。

Vue提供了预定义的一些按键，比如enter,tab,delete,esc,space和left。当然，也可以为按键设置别名：

Vue.config.keyCodes.a = 65

动态样式

https://alligator.io/vuejs/dynamic-styles/

v-model的两种方式

https://alligator.io/vuejs/v-model-two-way-binding/