逆戰班方長君老師
指令 directive
指令後面跟的都是表示式或者變數
內建指令 vue內部提供的直接使用
自定義指令 實現自定義某些功能的指令
條件渲染
都可以控制乙個元素的顯示或者隱藏
v-show 通過樣式 display:none
v-if 直接控制div元素有還是沒有 (v-else v-elseif)
事件繫結
使用vue中的事件
v-on:事件名(和原生js的事件名一致):事件的處理函式
@事件名:事件處理函式
事件的處理函式寫在例項的配置項 motheds
處理函式的預設引數是事件物件
如果需要傳遞其他引數 事件物件需要通過`$event 手動傳遞
屬性繫結
v-bind
元素的屬性都是跟的固定的值
屬性繫結可以實現 屬性的後方跟變數或者表示式
v-bind:要繫結的屬性名
:要繫結的屬性名
列表渲染
v-for 陣列 ** 數字 字串
雙向資料繫結 v-model
v-model 相當於 事件繫結v-on 和屬性 v-bind 集合體
將表單元素和data裡的資料進行繫結 任何一方發生改變另一方都會跟著變
元件通訊
在元件和例項中自己的資料只有自己可以控制
父子通訊 props
父元件控制子元件 父元件控制自己的資料變化,將變化後的資料通過props自定屬性傳子元件
子父通訊 $emit
子元件控制父元件的資料 父元件控制自己的資料變化,將控制函式通過emit自定義事件傳遞子元件 供子元件呼叫
兄弟通訊
a.狀態提公升
b.事件匯流排
c.全域性狀態管理
vue的元件通訊的方式
關於vue元件相互通訊的幾種方式如下 父元件通過props向下傳遞資料給子元件,子元件通過event給父元件傳送訊息,實際上就是子元件把自己的資料傳送給父元件。第一種方式處理父子元件之間的資料傳輸有乙個問題 如果父元件a下面有子元件b,元件b下面有元件c,這時如果元件a想傳遞資料給元件c怎麼辦呢?如...
vue元件間通訊方式
一 props emit 將要傳遞的引數繫結到元件上,子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸,想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...
vue之元件通訊方式 兄弟元件
今天回顧一下vue元件中兄弟元件如何實現通訊 在兄弟元件之間的通訊,可以採用關係鏈和ref鏈去使用,解決兄弟之間通訊問題。html布局 我是哥哥 打弟弟 我是弟弟 嗚嗚嗚嗚嗚嗚 js vue.component big brother vue.component littel brother new...