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 ...