Vue學習總結

2021-10-23 15:33:03 字數 2003 閱讀 7612

1 插值表示式

}

2 v-html

用來輸入一段html文字

3 v-pre

用來原樣輸入內容,告訴vue不要編譯這個指令宣告的元素中的內容

4 v-once

只使用資料一次,後續資料也不再更新到頁面上

5 v-text

只輸出文字內容

1 v-if v-else v-else-if

條件為真,當前的dom節點會被真正渲染到dom樹中,否則不會渲染到dom樹中

2 v-show

通過控制css來顯示元素,反之不顯示,無論條件為真假都會渲染

陣列

v-for=「(item,index) in list」

物件 v-for =「(value, key) in obj」

在迴圈渲染中 vue建議新增key值,標識出當前這些兄弟元素的唯一性,在下次更新dom是可以方便識別變化項,不變化項

class:

:class = 「active」 將來渲染的結果就是class = 「active變數的值」

:class= 「[active,]」 將來渲染的結果:如果值1是真值,結果是 class="active的值 classname" 如果動態值1為假值,結果是class="active的值"

style:
:style="  "
@click = 「事件處理函式」 fn定義在methods節點下,是乙個函式

@input = " 事件處理函式 " fn定義在methods節點下,上乙個函式

通過繫結事件使用者在觸發所繫結的事件時,將頁面上的資料傳遞到[業務邏輯層,mode層]

v-model雙向繫結指令,等於如下3個步驟:

在input上使用屬性繫結:value =

"data"

在input上繫結input事件處理函式fn

在fn事件處理函式執行this

.data = $event.target.value

事件修飾符:

.prevent 阻止預設行為

.stoppropagation 阻止事件冒泡

v-model的修飾符:

.number 將輸入內容轉成數字

.lazy 將事件觸發的時機從input調整到change

.trim 去除輸入框內容的兩端空格

input事件:監聽輸入框內容變化(增加 減少 貼上)的事件

change事件:當輸入框內容變化 且失去焦點時觸發

1父子元件通訊

父元件給子元件通過傳遞屬性的形式,可以是動態資料( :title = " 變數 " ) 也可以是靜態資料(「title = 固定值」)

子元件內部使用props屬性來宣告接收父元件的資料

2子向父傳值

子元件通過自定義事件來完成

1 父元件呼叫子元件時傳遞乙個自定義事件,事件處理函式在父元件中的methods節點下定義

2 子元件內在合適的時機觸發上一步傳遞過來的自定義事件,可以傳遞引數$emit(「自定義事件名稱」 傳遞的資料)

3 父元件內定義接收傳遞過來的資料

3兄弟元件間的通訊

1 定義事件中心,生成乙個例項物件

2 在元件內hub.¥on(『a』 fn) 監聽乙個事件 同時定義這個事件的處理函式fn

3 在元件2內 使用 hub.$emit(』 a 』 傳遞過來的資料) 觸發事件a 同時傳遞資料

4父子傳遞資料的型別

基本資料型別

引用資料型別

自定義事件

5自定義元件的v-model雙向資料繫結

預設情況下 父=>子通訊 和 子 =>父通訊按照前面的1 和 2 的方式進行,但是有些資料比較簡單或者有些元件之間就傳遞了乙個資料,此時使用前面的流程就顯示很冗餘和麻煩,所以vue提供了v-model指令來在元件間進行雙向資料繫結 父元件傳遞給子元件資料 子元件受到並使用 在操作的過程中對該資料進行的改變會自動的被父元件收到

VUE學習總結

對vue近半年的學習,用過iview,elment admin,mand mobile,從無到有,自己一步步搭建腳手架,直接下 自己打包,部署前後端分離。其他基於vue移動端框架都有研究,只是知道會用,其他的沒有深入了解。感覺所有框架都大同小異。同 用vue技術語法,實現前端效果。資料繫結,資料驅動...

學習Vue總結

html的解析是從頭到尾解析,因為語句放的位置,導致瀏覽器認為js檔案中某些關鍵字undefined v bind v model v if v on v show v html v text watch 計算屬性computed 過濾器filter 插槽 元件 非同步元件載入 混入內容mixin ...

vue學習總結

vue學習總結 vue學習總結 vue教程 vux移動元件庫 vue2.0生命週期鉤子 vue router2學習 使用axios傳送請求 vue2.0核心思想 vux專案中使用 qs.parse qs.stringify 使用方法 fetch的用法 babel5和babel6區別 webpack ...