學習Vue實現去哪兒網(上) 基礎知識總結

2021-09-19 10:29:23 字數 1576 閱讀 9231

(1)vue掛載渲染基礎;

(2)生命週期;

(3)計算,方法與監聽;computed中get與set;

(4)vue進行樣式渲染:<1>class的物件(true or false)或陣列繫結;<2>style的繫結陣列資料(data中定義styleobj用於樣式繫結改變)

(5)vue的條件渲染:v-if(不渲染);v-show(渲染而不顯示)

(6)列表渲染:

陣列渲染:

v-for="((item,index) in items)"; :key="item.id(唯一量)";

陣列變異方法:pop ,push , shift , unshift , splice , sort , reverse ;

vue.set(物件,index,value)【全域性】;vm.$set(.....)【例項上】

template迴圈渲染佔位符...;

物件渲染:

v-for="((item,key,index) in items)"; key為鍵值;

除了重新給物件賦值以外,還可以用vue.set(物件,key,value)【全域性】;vm.$set(.....)【例項上】

(1)注意點:

。table**【ul,ol,select等也是這樣】元素中只能用指定標籤,使用元件會渲染錯誤,使用is:

。子元件中data必須是乙個函式 。操作dom時候可以使用ref獲取dom節點:this.$refs.dom中ref名;

(2)父子元件之間的傳值

。子元件通過this.$emit("事件名",引數)給父元件用props ; 父元件通過屬性《監聽事件@事件名=「函式」【函式可獲取傳過來的值】》向子元件傳值

。子元件不可修改從父元件傳遞來的值,反之可修改;若要修改可將獲得的值重新賦給新定義的量【單向資料流】

(3)元件的引數校驗與非props特性

。非props特性:父元件向子元件傳值,但是子元件不接,則內容會渲染在子元件標籤屬性上不會渲染在標籤內

。引數校驗:

vue.component("child",}},

template:'}

' })

(4)元件繫結原生事件(繫結後加上.native)

(5)非父子元件之間的傳值【bus/匯流排/發布訂閱模式/觀察者模式】

(6)在vue中使用插槽

元件template中使用標籤獲取插槽內容 ; 多個插槽內容dom中給屬性solt="aaa",在標籤中給name="aaa",即可對應插槽即具名插槽。
(7)vue中的作用域插槽

}(8)動態元件與v-once指令

css以及keyfrom實現;js實現;animat.css 與velocity.js實現動畫;多元素過渡動畫;列表動畫;動畫元件的封裝

css與js實現動畫

多個元素的過渡動畫

列表的過渡動畫

動畫封裝為元件

vue學習(基礎知識)

下面是新增元件的兩種方式 申明方法和變數,並進行應用。命令 config index.js package.json 專案資訊 使用vue之前需要先安裝nodejs。參考 在cmd中使用以下命令 npm install g vue cli 安裝腳手架 npm run dev 在demo資料夾下使用該...

Vue基礎知識學習(後端)

vue安裝 直接引用cdn npm安裝 構建大型應用使用,在這不用 命令列工具 構建大型單頁應用,在這不用 vue基本 結構 指令1 v text,v html,顯示文字內容 區別 v html中的資料原樣顯示 v html中的資料可能會被轉義,比如會被當成html 指令2 v on,繫結事件指令 ...

學習vue基礎知識(四)

將同乙個事件迴圈內的所有資料操作進行和並 然後統一更新並不是資料修改一次就更新一次 自動執行引入模組內部的install方法install 方法一般做的是全域性註冊元件 v model 使用場景 1.表單元素上 2.元件上在元件使用v model 提供可乙個叫 value 自定義屬性 提供了乙個叫 ...