使用Vue動手搭建todoMVC
2018年4月16日 晴 微風(fēng) 溫度 10-22°C >
先來介紹下什么是 todoMVC，todoMVC呢就是一個 任務(wù)板塊；
其中分為三個板塊：將要做,正在做,已完成;
具體如圖>
https://github.com/tastejs/todomvc-app-css/raw/master/screenshot.png
- 1 首先先準(zhǔn)備好環(huán)境
- 1.1 準(zhǔn)備好todomvc模板
首先先在github中搜索todomvc找到一個排行最高的模板 ，點(diǎn)進(jìn)去不要直接download，因?yàn)檫@個是已經(jīng)寫好的。所以 要先進(jìn)入這個 作者的主頁，然后下拉 找到 todomvc-app-template 該庫就是 我們需要的 模板,然后完整download下來保存 在一個新的文件夾中并解壓- 1.2 準(zhǔn)備好Vue環(huán)境
如果你電腦中已經(jīng) 配置過hexo 以及npm 環(huán)境后 只需要 在 todomvc當(dāng)前文件夾下 打開dos窗口 運(yùn)行 npm intall --save vue 在此文件夾下配置初始化Vue
好 這樣 準(zhǔn)備工作差不多已經(jīng)做好
下面開始 正式講述
- 2
- 2.1 打開JS文件夾中的 app.js 開始編輯
//首先清空已經(jīng)存在的東西，
//先定義一個vue對象模板
var vm = new Vue({
// 然后我們對html進(jìn)行vue綁定,
el:".todoapp1",
//data數(shù)據(jù)模塊
data:{
},
//methods方法模塊
methods:{
},
//watch監(jiān)聽模塊
watch:{
},
//computed計(jì)算模塊
computed:{
}
});
- 3 明確一下我們的頁面效果以及背后的編程邏輯
- 3.1 增刪改查
- 3.2 全選單選與item與left
- 3.3 路由跳轉(zhuǎn)
- 3.4 刪除所有已經(jīng)完成
