(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 自定義屬性 提供了乙個叫 ...