10-Vue指令之V-bind

• v-bind 指令用于响应更新 html ，将一个或多个 attribute 或者一个组件 prop 动态绑定到表达式，v-bind 可以简写：

<!--绑定 attribute-->
<img v-bind：src="imageSrc">
<!--缩写-->
<img ：src="imageSrc">

• 在绑定 class 或者 style 时。支持其他类型的值，如数组或对象，如：

<div id="app">
    <div :class = '[classA,{classB: isB,classC: isC}]'></div>

</div>

  var vm = new Vue({
        el: '#app',
        data: {
            classA: 'a',
            isB: false,
            isC: true
        }
    })

结果：

<div class = 'a classC'

• 没有参数时，可以绑定到一个对象，注意，此时 class 和 style 绑定不支持数组和对象 （对象 key 会转换为小写），如：

<div id="app">
    <div v-bind="{id:someProp,'otherAttr':otherProp}"> </div>
</div>

<script>
    var vm  = new Vue({
        el: '#app',
        data: {
            someProp : 'idName',
            otherProp : 'prop'
        }
    })

结果：

 <div id = idName  otherAttr = prop> </div>

• 在绑定 prop 时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。
  修饰符为：
  
  • .sync — 双向绑定，只能用于 prop 绑定
  • .once — 单次绑定，只能用于 prop 绑定
  • .camel — 将绑定的特性名字转换回驼峰命名。只能用于普通的 html 特性的绑定，通常用于绑定驼峰命名的 SVG 特性，比如viewBox

 <!-- prop 绑定，'prop'必须在 my-component 组件内声明 -->
<my-component :prop = 'someThing'>  </my-component>
<!-- 双向 prop 绑定-->
<my-component :prop.sync = 'someThing'>  </my-component>
<!-- 单次 prop 绑定-->
<my-component :prop.once = 'someThing'>  </my-component>