內容導讀

這裡就不多贅述了，可以上官網查看，下面有些例子會用到，有些不會用到。

基礎

指令

• v-text
• v-html
• v-for
• v-if
• v-else
• v-show
• v-cloak
• v-on
• v-bind

這裡就不多贅述了，可以上官網查看，下面有些例子會用到，有些不會用到。

計算屬性（computed）：

• 會有緩存，不修改依賴的變量時不會進行重新計算，只有修改了依賴的變量才會重新計算，效率更高
• 每一個計算屬性有get和set兩個方法

監聽器（watch）:

• 類似計算屬性，也會有緩存，但是語法和computed相比會複雜很多

動態綁定class和style

class：

• 對象

 :class="{class名: boolean值}"

• 數組

 :class="[data中的值, {class名: boolean值}, data中的值]"

style:

也有對象和數組的區分，都是根據data中數據進行渲染style

條件渲染

• 如果重複修改的話使用v-show效率更高
• v-if和v-else必須在一起
• 如果有重複的input需要不同的渲染，可以添加key去進行區分

列表渲染

• 給v-for循環添加key，增加效率
• 改變數組內容指定的方法才有效，直接操作下標數據會變，但是不會重新渲染頁面
• push
• pop
• shift
• unshift
• splice
• sort
• reverse
• 修改數據內容還可以直接修改數組的引用也可以直接改變數據的值

組件

非父子組件之間的傳值

• vuex
• 觀察者模式/發佈訂閱模式/bus/總線

 
 <title>非父子組件之間的傳值/<title>
 


 

 <child>
 <child>
 


 

插槽

• slot
• slot-scope

 <child>
 <template>
 
{{props.row}}

 /<template>
 /<child>

Vue.component('child', {
 data: function () {
 return {
 list: [{
 id: 1,
 name: 'shi'
 }, {
 id: 2,
 name: 'yan'
 }, {
 id: 3,
 name: 'ping'
 }]
 }
 },
 template: `

 

 <slot> :row="item">
 /<slot>
 

 
`
})
var vm = new Vue({ 

 el: "#container"
})

動態組件與 v-once 指令

動態組件

<component>

v-once

只渲染一次，後續的從內存中取，可以有效的優化渲染性能

 
 <title>動態組件與 v-once 指令/<title>
 


 

 <component>
 <button>switch/<button>
 

這些只是在自己學習中部分的案例和基礎，官網的例子很好，有不懂的可以上官網上查看 vue官網