寫幾個小案例來理解vue的元件化程式設計思想,下面是乙個demo.
效果圖示:
需求:
header部輸入任務,進行新增,在list中顯示;
list中每個item項,滑鼠移入時,背景變灰並顯示delete按鈕.點選按鈕可刪除該項;滑鼠移出時,恢復原樣;
footer部: 1.根據列表勾選狀態及數量顯示已完成數和全部數; 2.當已完成數為0時,不顯示清除已完成任務按鈕; 3.當已完成數等於全部數量時,全選框勾選. 4.當list列表為空時,全選框不勾選; 5.當主動勾選全選時,所有項都勾選,去勾選時所有項去勾選.
專案目錄:
* 使用localstorage儲存資料的工具模組
* 1.函式
* 2.模組
* 需要向外暴露乙個功能還是多個功能
*/const projects_key = 'project_key'
export default ,
readprojects()
}
import vue from 'vue'
import './base.css' // 全域性引入base.css檔案
new vue()
.todo-container
.todo-container .todo-wrap
} 刪除
已完成} / 全部}
清除已完成任務
關於vue的使用可參考vue官方教程和api:
若數字大於0(val>0),大於0可不寫,預設大於0; 字串為空時( !str),預設不為空字串
關於footer.vue中使用的reduce()函式:實現陣列的累加操作
array.reduce(function(total, currentvalue, currentindex, arr), initialvalue)
reduce函式可接受乙個function函式以及乙個initialvalue(傳入的初始值)的初始值。
其中function函式接受四個引數分別為total（每次計算的返回值），currentvalue（當前陣列的元素值），currentindex（當前陣列元素的索引值），arr（當前陣列元素）
vue元件化的應用
前言 vue元件化的應用涉及到vue cli的內容，所以在應用之前是需要安裝node和vue cli的，具體如何安裝我就不一一贅述了。可能一會兒我心情好的時候，可以去整理一下。1 應用的內容 在乙個頁面中，需要乙個固定的內容，這個內容可以多次引用，那麼就可以考慮把他分離出來，在下次需要的時候，實現引...
vue元件化專案應用的問題
最近一周都在回顧年前的專案，其中的乙個用vue做的專案，發現了很多可以優化的問題 元件化的拆分，記得之前剛入職工作的時候，部門老大給我們布置了乙個任務，就是拆分頁面，當時覺得有什麼還拆分的，不就是直接寫?來到北京之後，恰巧是公司業務比較急的時候，拿到需求之後，看到頁面就直接去寫了，因為業務的需要，當...
vue元件與元件化
元件化是當今最為流行的一種可復用性增加的方法，隨著當今前端開發的複雜度更加，這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...