vue 學習注意事項

一：插值方式：

1：數據綁定，最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值 <span>Message: {{ msg }}</span>  經過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新

2：屬性綁定，屬性插值使用v-bind指令，Mustache {{}}不能在 HTML 屬性中使用，應使用 v-bind 指令

3：全部的數據綁定， Vue.js 都提供了徹底的 JavaScript 表達式支持,僅限單個表達式。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

有個限制就是，每一個綁定都只能包含單個表達式，js語句及流控制不會生效：如

<!-- 這是語句，不是表達式 -->   {{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->   {{ if (ok) { return message } }}

4：指令

指令的職責就是當其表達式的值改變時相應地將某些行爲應用到 DOM 上

<p v-if="seen">Now you see me</p>

v-if 指令將根據表達式  seen 的值的真假來移除/插入  <p> 元素，（有點相似於visible）

< a v-on:click="doSomething">

  v-on 指令，它用於監聽 DOM 事件： 參數是監聽的事件名

 

二：過濾器：filters

被用做一些常見的文本格式化。過濾器能夠用在兩個地方：mustache{{}} 插值和 v-bind 表達式

{{ message | capitalize }}

過濾器函數總接受表達式的值做爲第一個參數。

new Vue({

// ...

filters: {

　　capitalize: function (value) {   //參數value是message的值

　　　　if (!value) return ''

　　　　value = value.toString()

　　　　return value.charAt(0).toUpperCase() + value.slice(1)

　　}

}

})

過濾器是 JavaScript 函數，所以能夠接受參數：

{{ message | filterA('arg1', arg2) }}
這裏，字符串 'arg1' 將傳給過濾器做爲第二個參數， arg2 表達式的值將被求值而後傳給過濾器做爲第三個參數，message是默認的第一個參數。

三：縮寫：

v-bind 縮寫 ：  

<!-- 完整語法 -->

<a v-bind:href="url"></a>

<!-- 縮寫 -->

<a :href="url"></a>

v-on 縮寫 @

<!-- 完整語法 -->

<a v-on:click="doSomething"></a> 

<!-- 縮寫 -->

<a @click="doSomething"></a>

 

四： 計算屬性 computed  

computed  之前的名字叫作ready是在dom加載後立刻執行的。

對於任何複雜邏輯，你都應當使用計算屬性， 計算屬性須要藉助「緩存」。

發現，計算屬性能夠經過調用表達式中的 method 來達到一樣的效果。若是你 不但願有緩存，請用 method 替代。

區別：計算屬性是基於它們的依賴 進行緩存的 。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要  message 尚未發生改變，屢次訪問  reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數

計算屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter

一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調

watch 屬性：用來觀察和響應 Vue 實例上的數據變更。 （檢測data數據變更） 

想要在數據變化響應時，執行 異步操做或開銷較大的操做，用watch是頗有用的.

 

五：Class 與 Style 綁定

綁定HTML的class

1 、能夠傳給  v-bind:class 一個 對象，以動態地切換 class 。

<div v-bind:class="{ active: isActive }"></div> 表示 class   active 的更新將取決於 數據屬性 isActive 是否爲真值 。

二、也能夠在對象中傳入更多屬性用來動態切換多個 class ,         v-bind:class="{ active: isActive, 'text-danger': hasError }"

三、也能夠直接綁定 數據裏的一個對象   <div v-bind:class="classObject"></div>

data: { classObject: {

active: true,

'text-danger': false

}}

四、也可綁定返回對象的計算屬性

data: { isActive: true, error: null},

computed: {

classObject: function () {

return {

　　active: this.isActive && !this.error,

　　'text-danger': this.error && this.error.type === 'fatal',

}}}

 

五、能夠把一個數組傳給  v-bind:class ，以應用一個 class 列表  < div v-bind:class="[activeClass, errorClass]">

 

v-bind:class用在組件上：

當你在一個定製的組件上用到  class 屬性的時候，這些 類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。

綁定內聯樣式 v-bind:style

 CSS 屬性名能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）： <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接綁定到一個樣式對象一般更好

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

data: { styleObject: {

color: 'red',

fontSize: '13px'}}  一樣的，對象語法經常結合返回對象的 計算屬性使用。

v-bind:style 的數組語法能夠將多個樣式對象應用到一個元素上：< div v-bind:style="[baseStyles, overridingStyles]">

 

六：v-if vs v-show

v-if 是「真正的」條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下， v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

v-show 是簡單地切換元素的 CSS 屬性 display 。

v-if支持 <template> 語法

注意， v-show 不支持 <template> 語法，也不支持 v-else。

v-if 與 v-for 一塊兒使用，當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

七：列表渲染 v-for 

 v-for 塊中，咱們擁有對父做用域屬性的徹底訪問權限。 v-for 還支持一個可選參數，最後一個參數爲當前項的索引。

<ul id="example-2">
　　<li v-for="(item, index) in items">
　　　　{{ parentMessage }} - {{ index }} - {{ item.message }}
　　</li>
</ul>

var example2 = new Vue({

　　el: '#example-2',

　　data: {

　　　　parentMessage: 'Parent',

　　　　items: [

　　　　　　{ message: 'Foo' },

　　　　　　{ message: 'Bar' }

　　　　]

　　}

})

也能夠用 of 替代 in 做爲分隔符。 <div v-for="item of items"></div>

v-for 迭代模塊：也能夠用帶有 v-for 的 <template> 標籤來渲染多個元素塊

v-for 迭代對象：

data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30}}

<li v-for="value in object">{{ value }} </li>    會列出 John  Doe   30

<div v-for="(value, key) in object">{{ key }} : {{ value }} </div>   會列出 :      FirstName: John             LastName: Doe              Age: 30

<div v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }} </div>  也可輸出最後一個參數index

v-for 迭代整數：<span v-for="n in 10">{{ n }}</span>    輸出：12345678910

數組更新檢測

變異方法：執行這些方法它們也將會觸發視圖更新  push()pop()shift()unshift()splice()sort()reverse()

重塑數組：有些方法是非變異方法，不會觸發視圖更新，這時候須要重塑數組來觸發視圖更新，即從新給數組賦值。如： filter(), concat(), slice()

注意事項

Vue 不能檢測如下變更的數組：

1. 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue  解決方法：能夠用Vue.set(example1.items, indexOfItem, newValue)或example1.items.splice(indexOfItem, 1, newValue)替換
2. 當你修改數組的長度時，例如： vm.items.length = newLength  解決方法：也一樣可使用 splice：example1.items.splice(newLength)替換

顯示過濾/排序結果

想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種狀況下，能夠建立返回過濾或排序數組的計算屬性。