数据单向绑定

数据单向绑定：vue页面元素绑定data对象的属性，由于Vue是响应式和数据驱动，当通过JavaScript更新data对象的属性时，视图绑定的属性将会产生“响应”，即匹配更新为新的值。单向绑定的方式：

• 双大括号的插值形式：通过双大括号的形式绑定data对象的属性

<template>
    <span>Message: {{ msg }}</span>
</template>

• v-bind指令的形式：v-bind指令与页面元素属性一起使用，页面元素由data属性驱动

<template>
    <button v-bind:disabled="isButtonDisabled">Button</button>
</template>

数据双向绑定

数据双向绑定：把data对象的属性绑定到视图，同时也将视图绑定到data对象的属性上，所以，当我们用JavaScript代码更新data对象的属性时，视图就会自动更新，反之，如果用户更新了视图，data对象的属性也自动被更新。

<template>
       // message是data对象中的属性
      <input v-model="message" placeholder="edit me">
 </template>

v-model指令可以实现双向绑定，在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model指令的修饰符

• .lazy修饰符：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 .lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<template>
      <!-- 在“change”时而非“input”时更新 -->
      <input v-model.lazy="msg">
</template>

• .number修饰符：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<template>
      <input v-model.number="age" type="number">
</template>

• .trim修饰符：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<template>
     <input v-model.trim="msg">
</template>