属性的绑定
在上一篇中，我们使用 {{}} 将数据和Html标签值进行了绑定。
<h1>{{ message }}</h1>
对于标签Html中的属性，我们使用一个叫做指令（directive）的概念将数据和Html属性进行绑定。
我们需要使用一个叫做 v-bind 的指令来绑定:
<h1 v-bind:class="titleClass">{{ message.split('').reverse().join('') }}</h1>
这里我们将h1标签的class属性和数据“titleClass”进行了绑定。全部代码如下，
<script>
export default {
data() {
return {
message: 'Hello World!',
titleClass: 'title'
}
}
}
</script>
<template>
<h1>{{ message }}</h1>
<h1 v-bind:class="titleClass">{{ message.split('').reverse().join('') }}</h1>
</template>
<style>
.title {
color: red;
}
</style>
运行后我们可以发现，反转的字符串变成了红色
图片.png
这里同时介绍一个简略的写法，因为v-bing这个指令非常常用，因此Vue提供了一个简略的写法：
<h1 :class="titleClass">{{ message.split('').reverse().join('') }}</h1>
事件监听
Vue还提供了另一个指令 v-on 用来监听事件，这里将click事件绑定到了函数 increment 上。
<button v-on:click="increment">count is: {{ count }}</button>
在Vue的methods中定义 increment 函数：
<script>
export default {
data() {
return {
message: 'Hello World!',
titleClass: 'title',
count: 0
}
},
methods: {
increment () {
this.count ++;
}
}
}
</script>
运行后可以发现count按钮可以计数：
图片.png
因为v-on也比较常用，因此Vue也提供了一个简介的写法
<button @click="increment">{{ count }}</button>
