1.Method與計算屬性computed的區(qū)別

區(qū)別在于method每次都執(zhí)行函數(shù)，而computed基于依賴緩存，只要相關(guān)值不變，那么就不必再執(zhí)行函數(shù)。



下面，注意Date不是響應式依賴：



computed: {

  now: function () {

    return Date.now()

  }

}

所以使用計算屬性



2.v-if與v-show

v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。



v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）。



相比之下， v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。



一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。



令，v-show不支持template語法。



3.v-for

可以v-for="item in items"也可以of



還有可選第二參數(shù)作為前項的索引：



<li v-for="(item, index) in items">

也可以用模板渲染父節(jié)點或模板，來渲染多個子塊。



<ul id="repeat-object" class="demo">

     <li v-for="value in object">

       {{ value }}

     </li>

  </ul>

new Vue({

       el: '#repeat-object',

       data: {

       object: [

        {FirstName: 'John'},

        {LastName: 'Doe'},

        {Age: 30}

      ]

    }

  })

寫成這樣，輸出：



{ "FirstName": "John" }

{ "LastName": "Doe" }

{ "Age": 30 }

將object從數(shù)組變?yōu)槿缦拢?br />


object: {



FirstName: 'John',



LastName: 'Doe',



Age: 30



}



那么輸出：



John

Doe

30

此時直接指向的是值了。



還有三參數(shù)：v-for="(value, key, index) in object"

還可以用整數(shù)，輸出10個數(shù)字：



<div id="haha">

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

</div>

var t=1,n=0;

new Vue({

 el: '#haha',

 data: {

 object: {

 n:n+t

  }

 }

})

很好的例子

4.一些數(shù)組方法

push()：在末尾添加一個或多個元素，并返回新長度

pop()：刪除并返回最后一個元素

shift()：刪除并返回第一個元素

unshift()：數(shù)組開頭添加一個或多個元素，并返回新長度

splice()：刪除或替換元素，返回被刪除元素。splice（index，number，new ele），用new ele 替換index開始的number個元素

sort()

reverse()





5.類似v-on:click(含參)的注意點

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

methods: {

  warn: function (message, event) {

    // 現(xiàn)在我們可以訪問原生事件對象

    if (event) event.preventDefault()

    alert(message)

  }

}

如上，可以傳入原生DOM對象。

阻止冒泡還有其他方法，即在v-on上使用事件修飾符。常見事件修飾符有：

<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián)  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件偵聽器時使用事件捕獲模式 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只當事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調(diào) -->

<div v-on:click.self="doThat">...</div>

<!-- 只會觸發(fā)一次點擊 -->

<a v-on:click.once="doThis"></a>

有事件修飾符，還有鍵盤修飾符。

<!-- 只有在 keyCode 是 13 時調(diào)用 vm.submit() -->

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

又新增了按鍵修飾符，和組合鍵修飾：

<!-- Alt + C -->

<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

6.神奇的v-model

神奇之處在于會根據(jù)控件形式自動選取方法更新元素。

例子

<div id="che">

      <select v-model="sele"  multiple>

         <option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>

         

      </select>

      <span>{{sele}}</span>

    </div>

new Vue({

          el: '#che',

          data: {

            sele: [],

            ops:[

                {index:1,va:"s"},

                {index:2,va:"ss"},

                {index:3,va:"ssr"}

            ]

          }

        })

若option里綁定value，則會將value值按所選中的放在數(shù)組sele開頭。

若沒有綁定value，會將{{op.va}}當做value。若寫為{{op.index}}則將index當做value。



藍藍設(shè)計( m.jjddy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。