IMWeb訓練營作業 Todo

vuejs 學習 —— todo

作業使用vue-cli搭建開發環境，修改了部分webpack配置，採用模組化開發形式，部分內容加入了動畫效果，支援雙擊todo進行編輯，支援hash監聽，沒有設計師，視覺呈現請dalao多見諒

// 雙擊間隔最大時間

const double_touch_time = 500

export default ,

...data () }},

methods: = this.touchinfo

const now = new

date().gettime()

if (now - timestamp <= double_touch_time)

this.touchinfo.timestamp = now}},

...}

:class=""

>

}label>

type="text"

ref="_input"

v-model="touchinfo.text"

@blur="changetodotext"

@submit.prevent="changetodotext"

@keyup.enter.prevent="changetodotext"

/>

li>

template>

export default

},computed: = this

return todo === touchinfo.todo}},

// 更新時監聽編輯狀態並focus input

updated ()

}}script>

// src/main.js

// 例項化
data () 
}})// 監聽hash變化
window.onhashchange = () => 

IMWeb訓練營作業 todolist

先來幾張。預設的外觀 新增幾個待辦適宜後的外觀 編輯待辦適宜後的外觀 標記為已完成後的外觀 篩選未完成的外觀 刪除1個待辦適宜後的外觀 實現思路 用乙個陣列儲存所有待辦適宜。每個待辦適宜的格式是如下 我用新建待辦適宜時的時間戳做那條待辦適宜的id。對待辦適宜的增刪改查就是對陣列的增刪改查。下面是部分...

IMWeb訓練營作業 Todolist

v for指令 根據一組陣列的選項列表進行渲染 語法 value，key in items value，key of items 變異方法 vue提供一組方法，對陣列進行操作時候，會觸發檢視更新 push pop shift unshift splice sort reverse 事件處理器 v o...

IMWeb訓練營作業 todo list

通過這兩天對todo list例項的學習與實踐，對vue有了進一步的了解和認識。html html html head lang en meta charset utf 8 link rel stylesheet href index.css title todo list title script...