Vue------------ bind指令学习

v-bind 指令

• 动态地绑定一个或多个特性

• :后的为传递的参数

  <!-- 绑定一个属性 -->
  <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="'/path/to/images/' + fileName">
  

• 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

  <!-- 绑定一个有属性的对象 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  

• 由于字符串拼接麻烦且易错，所以在绑定 class 或 style 特性时，Vue做了增强，表达式的类型除了字符串之外，还可以是数组或对象。

  • 绑定class

    • 对象语法

      <div v-bind:class="{ red: isRed }"></div>
      

      上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 真假。

    • 数组语法
      我们可以把一个数组传给 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' }"></div>
      

      data: {
        size: 30
      }
      

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

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

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

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

      <div v-bind:style="[styleObjectA, styleObjectB]"></div>
      

    • 自动添加前缀
      绑定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
    讲解组件时再说