vue数据绑定

数据绑定：
<div id="app">
数据渲染：
  {{ message }}   //数据绑定
  <div v-html="htmlMess"></div>    //html绑定
  <div v-text="message"></div>    //数据绑定


属性绑定：v-bind
  <h1 v-bind:title="message">aaa</h1>      //属性绑定
  <a v-bind:href="url">百度</a>    //属性绑定
  <a :href="url">百度</a>    //属性绑定简写


类名绑定：
  <div v-bind:class="active : isActive"></div>    //类绑定，当isActive为true时类名生效
  <div v-bind:class="active:isActive,red:isRed"></div>    //多类名绑定，用逗号隔开
  <div v-bind:class="classObj"></div>    //对象类名绑定
  <div v-bind:class="[active,red]"></div>    //类名数组绑定
  <div v-bind:class="isActive ? active : red"></div>    //三元运算符类名绑定


样式绑定：
  <div v-bind:style="{width:width,height:height}"></div> //内联样式绑定
  <div v-bind:sytle="styleObj"></div> //内联样式对象绑定
  <div v-bind:style="[styleObj1,styleObj2]"></div>         //内联样式对象数组绑定




条件绑定
  <p v-if="seen">hahah</p>    //条件为真时显示，css中直接有无此元素
  <p v-show="seen">hah</p>     //效果同if，css中为display：none
循环绑定：
  <p v-for="list in lists">{{alist.text}}</p>    //绑定lists数组
  <p v-for="value in lists">{{value}}</p>     //值循环输出
  <p v-for="(key value) in lists">{{key}}:{{value}}</p>     //键值对输出
  <p v-for="(index key value) in lists">{{index}}:{{key}}:{{value}}    //索引加键值对输出
  <p v-for="n in 10">{{n}}</p>    //整数迭代


事件绑定：
  <a v-on:click="fun1">点击</a>    //事件对应fun1方法 
  <a @click="fun1">点击</a>     //事件绑定简写
  事件修饰符：
  <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能点击一次，2.1.4版本新增 -->
  <a v-on:click.once="doThis"></a>


按键绑定：相应按键按下时触发
  <input v-on:keyup.enter="submit">
  <input @keyup.enter="submit">   //缩写
  全部的按键别名：
  .enter  .tab  .delete (捕获 "删除" 和 "退格" 键) .esc  .space  .up  .down  .left  .right  .ctrl  .alt  .shift  .meta


双向绑定：
  <p>{{message}}</p>    //绑定Vue中message
  <input type="text" v-model="message"/>    //input输入值将传入Vue中的message
  <select v-model="message" id="aa">      //同input
  <option>百度</option>
  <option>腾讯</option>
  <option>阿里</option>
  </select>
  绑定修饰符：v-model.lazy//将input同步改为change同步    v-model.mumber//将能转化为数字的字符串转化为数字
  v-model.trim//过滤空格


运算绑定：  
<p>{{reverseMess}}<p/>      //相当于调用方法，此方法对message取反
</div>


<script>
  var app = new Vue({
    el: '#app',     //绑定元素
    data: { //绑定数据
    message: 'Hello Vue!',
    isActive:true,
    isRed:true,
    width:"200px",
    height:"300px",
    styleObj:{
    color:red,
    height:"200px"
    }
    classObj:{
    isActive:true,
    isRed:true
   }
    htmlMess:'<h2>hello world</h2>',
    seen:false,
    url:'http://www.baidu.com',
    lists:[
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
    }
   }
  })
</script>