Vue 2.6 + 補漏

Vue 2.6 + 補漏

指令

動態參數

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:href。

約束

<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

<!-- 在 DOM 中使用模板時這段代碼會被轉換爲 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>

計算屬性和偵聽器

計算屬性

計算屬性緩存 vs 方法

爲何計算屬性有緩存?

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在組件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

能夠在模板中直接使用methods中的方法
計算屬性是基於它們的響應式依賴進行緩存的

• 使用methods 訪問reversedMessage() ，每一次都會執行一遍
• 使用computed 訪問reversedMessage() ，若是內部依賴的message沒有變化，不會執行內部邏輯，會返回上一次計算的結果

注意：計算屬性依賴的數據必須是響應式數據（如data內定義的數據）

計算屬性 vs 偵聽屬性

• 計算屬性 依賴變化 依賴數據變化才執行函數邏輯

• 偵聽器 自身變化 自身數據變化才執行邏輯
  

  計算屬性的 setter

  計算屬性默認還有getter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

如今再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName也會相應地被更新。

偵聽器

數據變化時執行異步或開銷較大的操做時使用

watch: {
    // 若是 `question` 發生改變，這個函數就會運行
    foo: function (new, old) {
   //...
    },
     list:{
       handler:function(){
       },
         deep:true 
       // 若是list是個數組或對象，改變某一項或屬性都會 深度檢測到
     }
  },

Class和Style

class

對象用法

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

注意前面已經有class了 
isActive 是bl 值，
也能夠直接在data或者計算屬性裏寫 

數組用法

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

or

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 用在組件上

會被加到組件根元素上

<my-component class="baz boo"></my-component>

<!-- class="以前的 baz boo" -->

Style

 對象用法

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

能夠直接在data裏寫或者計算屬性也能夠
vue-js 能夠自動加前綴 如transform 
注意 {直接寫，字符串} 無論是在template仍是data裏 

條件渲染

v-if

2.1 新增

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

key 

Vue 會盡量高效地渲染元素，會複用一些元素（同一DOM，不一樣數據）
使用 Key 添加惟一標識，阻止複用

v-show

v-show 只是控制 css display屬性
注意，v-show 不支持< template >元素，也不支持 v-else。
通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好

v-for比v-if 優先級更高  不推薦使用

列表渲染

使用對象

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

遍歷時按Object.keys()遍歷順序

維護狀態

注意：key 必須是 number和string

數組更新檢測

變異方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

這些方法改變原數組，能夠作響應式變化

注意事項

因爲 JavaScript 的限制，Vue 不能檢測如下數組的變更：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

1. 使用 vm.$set 

vm.$set(vm.items, indexOfItem, newValue)

1. 使用 splice()

一樣對象也是如此

1. 修改添加單個

//Vue.set(object, propertyName, value)
Vue.set(vm.userProfile, 'age', 27)

1. 修改添加多個

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

能夠在v-for 使用的

<li v-for="n in even(numbers)">{{ n }}</li>  //函數

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

// 1 2 3 4 5.. 10 


<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

組件上使用 v-for key 是必須的

事件處理

事件修飾符 >>>

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止單擊事件繼續傳播 -->
<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>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

??? 修飾符 

v-model

v-model 在內部爲不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 做爲 prop 並將 change 做爲事件。