v-bind 指令

• 动态地绑定一个或多个特性（此处的特性是指行间样式的属性）
  

• :后的为传递的参数

   <section id="app">
        <!-- 绑定一个属性 -->
        <img v-bind:src="imageSrc">
        <!-- 动态特性名 (2.6.0+) -->
        <button v-bind:[key]="value"></button>
        <!-- 缩写 -->
        <img :src="imageSrc">
        <!-- 动态特性名缩写 (2.6.0+) -->
        <button :[key]="value"></button>
        <!-- 内联字符串拼接 -->
        <img :src="'https:' + fileName">
    </section>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                imageSrc:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg',
                key:'a',
                fileName:'//dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg',
                value:'123'
            }
        });
    </script>

  v-bind的无参数，且绑定一个对象，键值对为特性

  <div v-bind="{naem:key,age:'18',height:'163cm', class:'zzz'}"></div>

  绑定class

• 对象语法

  <div :class='{red:true}'></div>

  
  当为false
  
  使用对象绑定class时当value为真时key才被添加为类名
  可以使用

    <section id="app">
        <div :class='{red:classA}'></div>
    </section>
    <script>
        const vm = new Vue({
            el: "#app", 
            data: {
                classA:true,
            }
        });
    </script>

• 数组语法

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

<div v-bind:class="[classA, classB]"></div>

在数组语法总可以使用三元表达式来切换class

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

在数组语法中可以使用对象语法

  <div v-bind:class="[classA, { classB: isB, classC: isC }]">
  <div v-bind:class="classA" class="red">

v-bind:class 可以与普通 class 共存

  <div v-bind:class="classA" class="red">

绑定style

看着比较像CSS，但其实是一个JavaScript对象
CSS属性名可以用驼峰式(camelCase)或者短横线分隔(kebab-case)来命名
但是使用短横线分隔时，要用引号括起来
使用对象语法

<div v-bind:style="{ fontSize: size + 'px' }">123</div>
<div v-bind:style="{ 'font-size': size + 'px' }">123</div>

data: {
  size: 30
}

也可以直接绑定一个样式对象，这样模板会更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    fontSize: '13px'
  }
}

使用数组语法
数组语法可以将多个样式对象应用到同一个元素

    <section id="app">
        <div v-bind:style="[styleA,styleB]">123456</div>
    </section>
    <script>
        const vm = new Vue({
            el: "#app", 
            data: {
                styleA:{
                    color:'red',
                    'font-size': '30px',
                },
                styleB:{
                    width:'100px',
                    height:'100px',
                    background:'blue'
                }
            }
        });
    </script>

• 自动添加前缀
  绑定style时，使用需要添加浏览器引擎前缀的CSS属性时，如 transform，Vue.js会自动侦测并添加相应的前缀。

• 多重值
  从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值:

  <div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
  修饰符：
  修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

• .camel
  由于绑定特性时，会将大写字母转换为小写字母，如：
  

  <!-- 最终渲染的结果为：<svg viewbox="0 0 100 100"></svg> -->
  <svg :viewBox="viewBox"></svg>

  
  所以，Vue提供了v-bind修饰符 camel，该修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性

  <svg :view-box.camel="viewBox"></svg>

• .prop

被用于绑定 DOM 属性 (property)

<div v-bind:text-content.prop="text"></div>

• .sync

讲解组件时再说

传递一个对象的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind 。例如，对于一个给定的对象 person：

person: {
  name: 'shanshan',
  age: 18
}

传递全部属性：

<my-component v-bind="person"></my-component>

上述代码等价于：

<my-component
  :name="person.name"
  :age="person.age"
></my-component>