1.1属性绑定

1.1.1vue中常用的属性绑定“v-bind:属性”，可简写为“:属性”

运行结果：

上面展示的是v-bind的最基本的使用，第一种是完整语法，第二种是简写语法，除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他属性进行绑定，最常见的是对于样式的绑定，即class和style属性。

1.1.2我们还可以给v-bind:class一个对象，也可以直接绑定数据里的一个对象，以动态地切换class。当然v-bind:class也可以和普通的class共存。

运行结果：

1.1.3我们还可以把一个数组传给v-bind:class，以应用一个class列表。

1.1.4还可以运用三目运算符，根据条件选取列表中的class。

1.2事件绑定

1.2.1我们可以用“v-on:事件”，可以简写为“@事件”来绑定一个事件监听器，通过它来调用我们vue实例中定义的方法。

上面的@click.once这是一个事件修饰符，只触发一次事件，如果不加，没点击一次就增加一个vue，加了once只能触发一次添加一个vue。

还有几个事件修饰符：

stop    阻止冒泡

prevent    阻止默认事件

运行结果：

1.3双向绑定

v-bind实现了数据的单向绑定，将vue实例中的数据同元素属性值进行绑定，如果要跟数据进行双向绑定我们就需要用到v-model。

1.3.1基本用法

运行结果：

1.3.2v-model.number

v-model.number可以将文本框输入的字符串内容转换成数字类型。

运行结果：

上面注释掉的代码执行后后面类型为string。

1.3.3v-model.trim

可以除去input框中用户输入的字符串的首尾空格字符，但是不能去除中间的空格。