一.vue是什麼
vue簡單小巧(壓縮後大小僅有17kb),漸進式(可以一步一步,有階段的使用,不必一開始就使用所有東西)的前端框架
提供了開發中常用功能,如:1.解耦檢視與資料2.元件復用3.前端路由4.狀態管理5.虛擬dom
開發模式(m v vm):mvvm由mvc繁衍而來,當v(檢視)層變化時,會自動更新到vm(檢視模型),然後m(模型)層發生變化,反之亦然,v和vm之間通過雙向繫結建立聯絡
二.使用安裝vue
1.通過2.通過腳手架vue-cli(專案中):
1安裝vue
npm install vue
2全域性安裝vue-cli
vue install --global vue-cli
3建立基於webpack模板的新專案
vue init webpack my-project //my-project :專案名稱
4進入專案
cd my-project
npm install
6執行專案
npm run dev
或npm start
7專案打包
npm run build
computed
當模板中的表示式或者邏輯過長時,專案就會難以維護,比如
.reverse().join(,)}} //split()擷取 reverse()取反 join()將陣列轉換成字串
用法:計算屬性可以完成各種複雜的邏輯,包括運算,函式呼叫,只要最終返回乙個結果
每個計算屬性中都包含乙個getter和乙個setter函式,getter用來讀取,setter用來修改,絕大多數只用預設的getter很少用setter
計算屬性小技巧:1計算屬性可以依賴其他計算屬性2計算屬性不僅可以依賴當前的vue例項的資料,還可以依賴其他例項的資料
計算屬性快取(與methods區別):你可能發現,呼叫methods裡的方法也可以實現計算屬性的邏輯,甚至methods還可以傳值,使用起來更靈活,為什麼還要使用計算屬性呢,原因就是計算屬性是基於他的依賴快取的,乙個計算屬性所依賴的資料發生變化時,他才會重新獲取值,而methods只要重新渲染,他就會被呼叫,因此函式也會被執行
四.vue內建指令
(1).v-bind(簡寫也可以叫語法糖為 : ):主要用於動態更新html元素上的屬性
v-bind:class(繫結class,動態切換class)
物件語法:
給div繫結乙個class,名為cheng,這個名為cheng的class依賴於data中資料congming,當congming為ture時,新增上class,渲染結果為:
動態新增class可以存在多個,如
當:class的表示式過長或者邏輯複雜時,還可以繫結乙個計算屬性,或者data,methods
渲染結果:
陣列語法當需要應用多個class是,可以用陣列語法
渲染結果:
三元表示式來根據條件切換
當cheng為true時,渲染結果為:
在陣列中使用物件
v-bind:style(給元素繫結內聯樣式,與繫結class類似)
渲染結果:
程聰明
可以寫在data或者computed裡,
渲染結果
程聰明
可以使用陣列語法
程聰明
(2)v-cloak:不需要表示式,會在vue例項結束編譯時從繫結的html元素上移除,經常和css中的display:none;配合使用:
當網速較慢,vue檔案還沒載入完成時,頁面會顯示}的字樣,直到頁面載入完成,所以這個過程螢幕是會閃動的,而v-cloak就是解決頁面閃動問題的,但是一般在大型的專案中,html結構只有乙個空的div元素,剩餘的內容都是由路由掛載不同元件完成,所以不再需要
(3).v-once:不需要表示式的指令,作用是定義它的元素或元件值渲染一次,包括元素或元件的所有子節點.首次渲染後,不在隨資料的變化重新渲染,將被視為靜態內容:}
(4)v-if.v-else-if.v-else:條件渲染指令 ,與if.else.else if類似,根據表示式的值渲染dom聰明
v-else-if需要緊跟v-if,v-else需要緊跟v-else-if,如果一次判斷的是多個元素,可以在元素上使用條件指令,最終渲染的結果不會包含該元素,聰明
(5)v-show:ye v-if用法基本一致,只不過v-show改變元素的css屬性display.當表示式值為false時,元素隱藏,為true時元素顯示
注:v-show不能寫在template上
v-show和v-if區別:v-if時真正的條件渲染,建立dom和刪除dom,而v-show只是在元素上新增了css屬性;v-if更適合於條件不常改變的場景,v-show適合頻繁操作的場景
(6)v-for:遍歷陣列或者物件迴圈顯示,表示式需要用in或者if結合使用
遍歷陣列:
渲染結果:聰明
v-for可以選引數作為當前的索引:
渲染結果:
1-聰2-明
跟v-if一樣,v-for也可以寫在template標籤上,進行多個元素渲染,也可以進行物件渲染:
渲染結果:
男100
遍歷物件時可以有兩個引數
渲染結果:
1-gender-男
2-age-100
v-for還可以迴圈整數:
}1 2 3 4 5 6 7 8 9 10陣列變異的方法:
push() //向陣列的末尾新增乙個或多個元素，並返回新的長度
pop() //刪除並返回陣列的最後乙個元素
shift() //把陣列的第乙個元素從其中刪除，並返回第乙個元素的值
unshift() //向陣列的開頭新增乙個或更多元素，並返回新的長度
splice() //向/從陣列中新增/刪除專案，然後返回被刪除的專案
sort() //對陣列的元素進行排序
reverse() //顛倒陣列中元素的順序
filter() //建立乙個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素(不會改變原陣列)
concat() //連線兩個或多個陣列(不會改變原陣列)
slice() //從已有的陣列中返回選定的元素(不改變原陣列)
(7).v-on(簡寫也可以叫語法糖為 @ ):繫結事件***,如v-on:click }
監聽事件可以寫在methods中}
(8)v-model:表單資料雙向繫結
使用v-model後,表單顯示的值只能依賴所繫結的資料,不在關心初始化時的value屬性
五.元件
全域性註冊元件
component
vue.component('cheng',)渲染結果:
template的dom元素必須被乙個元素包含
區域性註冊元件
componets
vue模板在某種情況下會受html的限制,比如table中值允許寫tr.td.th等**元素,所以在**中直接使用元件是無效的,在這種情況下,可以用is屬性來掛載
總結 日常總結
最近變得浮躁了，學不進了，那就寫總結吧。關於刷題 從去年十一月份到現在，感覺唯一堅持的意見事情就是刷力扣了。四個多月，寫了六百多道題，大概有四五題一天，然後也在堅持參加周賽。很多時候，有些事情成了習慣，那麼也就不需要去堅持了。比如說現在，每天都是先把每日一題和劍指 offer 的任務完成了再開始做其...
日常學習總結
關於vb中的把字串 日期型 數值型 賦值給某個變數的寫法 eg dim m1,r 此處我並不清楚 m1 到底是什麼型別 所以vb會自動匹配其應該所屬的型別，這是vb的一點強大之處 m select fitemid from t item where fitemclassid 3 and fnumbe...
Android日常總結
個人在此記錄一下.2,有時候 出現了異常,但是androidstudio並不列印錯誤資訊.這時候,我們可以通過斷點來除錯,如果斷點走到某一步了,不繼續往下面走,說名剛剛的那行 有問題,比如說textview.settext 1 textview設定乙個int值,這時系統可能沒有列印錯誤日誌.3,在l...