Vue数据及事件绑定

一、数据绑定

1、单向绑定

        把Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。
单向绑定的实现过程是：

• 所有数据只保存一份。
• 一旦数据变化，就去更新页面(只有data->DOM，没有DOM->data)
• 若用户在页面上做了更新，就手动收集(双向绑定式自动收集)，合并到原有的数据中。

( 1 )插值绑定

         数据绑定的基本形式，用“{ { }}”实现，这种语法在Vue中称为Mustache语法。插值的形式就是{ { data }}，它使用的是单向绑定。首先定义一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。

<div id="app">{
   {
    num }}</div>
   <script>
       new Vue({
   
           el: '#app',
           data: {
   
               num: '学习Vue'
           }
       })
   </script>

（ 2 ）v-bind绑定

        如果HTML的某些属性可以支持单向绑定，我们只需要在该属性前面加上v-bind指令，这样Vue在解析时会识别出该指令，将属性值跟Vue实例的Model进行绑定。以后，我们就可以通过Model来动态的操作该属性，从而实现DOM的联动更新。

<div id="app">
       <p v-bind:class="jumooc">Hello,{
   {
    name }}</p>
   </div>
   <script>
       var vm = new Vue({
   
           el: '#app',
           data: {
   
              name: 'Vue之旅',
              jumooc:'red'
           }
       })
   </script>
   <style>
       .red{
   
           background-color: red;
       }
       .blue{
   
           background-color: blue;
       }
   </style>

（ 3 ）双向绑定

        Vue框架的核心功能就是双向数据绑定。简单的说，双向绑定就是把Model绑定到View的同时也将View绑定到Model上，这样既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。
在Vue中只有表单元素能够创建双向的绑定，可以用v-model指令在<input>、<textarea>及<select>元素上创建双向数据绑定。

<form action="#" id="app">
       <p>
           <input type="text" v-model="name">
       </p>
       <p>
           <input type="text" v-model="age">
       </p>
       <p>姓名：{
   {
    name }}</p>
       <p>年龄：{
   {
    age }}</p>
   </form>
   <script>
       var vm = new Vue({
   
           el: '#app',
           data: {
   
               name: '刘备',
               age: 38
           }
       })
   </script> 

二、表单控件绑定

1、text（文本框）的绑定

<div id="app">