記錄個人Vue.js從會用到精通之路 4

一些零碎知識點

指令的動態參數

<a v-bind:href = "'http://www.baidu.com'">
<a v-bind:[attributeName] = "'http://www.baidu.com'">
// 若是data中有attributeName屬性而且值爲href 那麼兩個DOM元素效果一致
複製代碼

綁定class

• 對象語法

  <div v-bind:class="{active : isActive}">
  複製代碼

  • 上面的語法表示acive這個class的存在與否取決於數據屬性isActive的truthiness
  • 咱們也能夠綁定一個計算屬性，返回一個對象。

• 數組語法

  <div v-bind:class="[activeClass, errorClass]"></div>
  複製代碼

  上面的語法表示div的class的值取決於數據屬性activeClass，errorClass的值

  // 數組語法中也能夠使用對象語法
  <div v-bind:class=[{active : isActive},errorClass]>
  複製代碼

  上面的語法表示始終添加errorClass，可是active不必定。

綁定style

• 對象語法

  div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  複製代碼

  v-bind:style看着很像CSS，但實際上是一個JS對象。
• 數組語法

  <div v-bind:style="[baseStyles, overridingStyles]"></div>
  複製代碼

  baseStyles和overridingStyles都是對象，使用數組語法能夠將多個樣式對象綁定到同一元素上
• Vue.js自動偵測是否須要添加瀏覽器引擎前綴，省的咱費心！