VUE2 X全教程 基礎詳解(二)

2021-09-30 20:08:11 字數 1651 閱讀 9345

1.vue例項的生命週期及每個生命週期中自呼叫函式呼叫時機

2.模板語法的使用 

3.計算屬性 computed   方法methods ,及*** watch 操作屬性

4.計算屬性中的get和set方法的使用

5.vue中的兩種樣式繫結方式

6.vue中的條件渲染

7.vue中的列表渲染和物件渲染

單獨放在vue的例項中

beforecreate: function () ,

created: function () ,

// 在模板被渲染之前呼叫

beforemount: function () ,

// 頁面渲染之後執行

mounted: function () ,

// 銷毀之前被呼叫: when vm.$destroy() is called

beforedestroy: function () ,

// 銷毀之後呼叫

destroyed: function () ,

// 資料在更新之前呼叫

beforeupdate:function(),

// 資料在生命改變之後呼叫

updated:function()

插值表示式: }   

v-text

v-html 

其中v-text 等價於插值表示式  不會對內容中的值進行解析,而是原樣輸出,而v-html會進行解析

}}計算屬性的方計算-->

}用方法的方式進行計算-->}}

computed:,

// 會接收到對fullname的設定的值,然後可以對接收的到值進行一系列的操作==

set:function(value)}}

第一鐘 :class=" 通過class物件的方式

第二種:class="[activated, activatedone]  通過class物件陣列的方式

hello world

通過物件的方式操作:style="styleobj"

通過陣列的方式操作: :style="[styleobj,]"

hello world

v-if

v-else 

v-else -if 等等的使用 需要放在一起不能隔開,否則會拋語法錯誤的問題,在兩個dom切換的時候如果不需要進行復用的話需要給他們設定不同的key值

}-->

使用者名稱:

郵箱名:

}-->

} ---}

}

vue中的物件渲染

}--}--}

vue中的陣列渲染 set方法

}總結:我們在使用vue渲染陣列或物件時都有三種方法, 第一使用替換引用的方式 進行修改,二:使用vue陣列提供的變異方法進行修改,三:使用set方法進行修改

VUE2 X全教程(三) 元件精講

1.解決vue元件渲染的bug 2.元件引用 3.父子元件間的值傳遞 4.元件的引數校驗及非props特性 5.給父元件繫結原生事件 6.元件間的資料傳遞處理 7插槽的使用 8.作用域插槽 9.動態元件及v one指令 vue元件引發的bug及解決方案 11 動態元件 和 v once 指令 當我們...

Vue2 x學習二 資料渲染

之前,我們提到了vue可以解析雙大括號中的語法,資料繫結 以及,列表渲染 v for。在這一章中,我們將詳細說明資料的幾種繫結 渲染方式。之前一章中我們提到過,此處,我們通過 進行簡單回顧。補充 我們說過,在雙大括號中的語法變數能夠被vue解析。事實上,雙大括號中還能夠放表示式,常規表示式都能夠被解...

vue2 x知識總結

data data data data 逆轉訊息 data methods data 現在我們為每個 todo item 提供 todo 物件 todo 物件是變數,即其內容可以是動態的。我們也需要為每個元件提供乙個 key 稍後再 作詳細解釋。vue.component todo item dat...