vue2的todolist入門小項目的詳細(xì)解析
更新時間:2017年05月11日 10:29:40 作者:Hxvin
本篇文章主要介紹了vue2的todolist入門小項目的詳細(xì)解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
看完vue2的官方文檔后,找個入門項目鞏固下知識點,簡單的todolsit是個不錯的選擇。
項目用到了vue.js
vue.cli
webpack
ES6
node
環(huán)境,完成項目后會對這些技術(shù)棧有了些了解。
準(zhǔn)備開發(fā)環(huán)境
$ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev
- 安裝谷歌插件vue.js devtools
- 下載vue.js的webpack模板
- 下載todomvc的模板 (提供html和css)(也可以直接$ git clone https://github.com/tastejs/todomvc-app-template.git 來下載)
- 把todomvc的index.html拖到todolist文件夾去覆蓋里面的index.html
- 打開todomvc的json文件,會看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -S 從而下載該css
- 刪點todolsit index.html的默認(rèn)css,js引用,src文件夾下的main.js引入模板css(import‘todomvc-app-css/index.css')
- 引入vue(import Vue form ‘vue')
- 等寫完代碼后 $npm run build 一鍵打包構(gòu)建,會看到dist文件夾
main.js的代碼
//后面的為注釋講解, ~表示串聯(lián)index.html的對應(yīng)內(nèi)容 import 'todomvc-app-css/index.css' import Vue from 'vue' //添加localStorage var STORAGE_KEY = 'todos-vuejs-2.0' var todoStorage = { fetch: function () { var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') todos.forEach(function (todo, index) { todo.id = index }) todoStorage.uid = todos.length return todos }, save: function (todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) } } //用過濾器篩選出三種狀態(tài) var filters = { all(todos) { return todos }, active(todos) { return todos.filter((todo) => { return !todo.completed }) }, completed(todos) { return todos.filter((todo) => { return todo.completed }) }, } let app = new Vue({ el: '.todoapp', // ~ <section class="todoapp"> data: { msg: 'hello world', title: '待做清單', // 渲染標(biāo)題 ~ {{title}} newTodo: '', todos: todoStorage.fetch(), // ~ v-show="todos.length" ; ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos" editedTodo: '', // 空的編輯對象 hashName: 'all' }, watch: { todos: { handler: function (todos) { todoStorage.save(todos) }, deep: true } }, computed: { remain() { return filters.active(this.todos).length //未完成事項的數(shù)量 ~ {{remain}} }, isAll: { // ~ v-model="isAll" get() { return this.remain === 0 }, set(value) { this.todos.forEach((todo) => { todo.completed = value }) } }, filteredTodos() { //用hashName過濾出當(dāng)前頁面的todos ~ v-for="(todo,index) in filteredTodos" return filters[this.hashName](this.todos) } }, methods: { addTodo(e) { //輸入值為空時,不添加(trim去除前后空格) ~ v-model.trim="newTodo" if (!this.newTodo) { return } this.todos.push({ id: todoStorage.uid++, content: this.newTodo, completed: false //結(jié)合v-model 根據(jù)completed狀態(tài)綁定樣式 ~:class="{completed:todo.completed; ~ v-model="todo.completed" }) this.newTodo = '' }, removeTodo(index) { //綁定x樣式,點擊刪除該todo ~ @click="removeTodo(index)" this.todos.splice(index, 1) }, editTodo(todo) { //編輯 ~ @dblclick="editTodo(todo)" this.editCache = todo.content //儲存編輯前的內(nèi)容 this.editedTodo = todo // 點擊編輯里面的內(nèi)容而不是只是空文本框~ editing:todo==editedTodo}" }, doneEdit(todo, index) { //失去焦點后 ~ @blur="doneEdit(todo)";@keyup.enter="doneEdit(todo)" this.editedTodo = null //不存在編輯了或者說編輯已完成 if (!todo.content) { //如果編輯后沒有內(nèi)容了,刪除該todo this.removeTodo(index) } }, cancelEdit(todo) { //按esc鍵取消此次編輯操作 ~ @keyup.esc="cancelEdit(todo)"> this.editedTodo = null todo.content = this.editCache //當(dāng)esc取消編輯時,還原編輯前的內(nèi)容 }, clear() { //點擊清除已完成的功能 ~ @click="clear" this.todos = filters.active(this.todos) //獲取并渲染未完成的事項 ~ } }, directives: { //自定義屬性 ~ v-focus="todo == editedTodo" focus(el, value) { //文本框雙擊獲取焦點 if (value) { el.focus() } } } }) //hash(url地址中#以及之后的字符) function hashChange() { // ~ :class="{selected:hashName=='all'}";:class="{selected:hashName=='active'}";:class="{selected:hashName=='completed'}" let hashName = location.hash.replace(/#\/?/, '') //正則表達式去除#/?,獲取如all,active,completed if (filters[hashName]) { //如果過濾狀態(tài)的hashName存在 app.hashName = hashName //給整個app變量里的hashName賦上那個值 } else { location.hash = '' //取消 app.hashName = 'all' //否則就賦值‘a(chǎn)ll',回到全部事項的頁面 } } window.addEventListener('hashchange', hashChange) //全局監(jiān)聽hash
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue使用富文本編輯器vue-quill-editor的操作指南和注意事項
vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項,需要的朋友可以參考下2023-05-05Element Table 自適應(yīng)高度的實現(xiàn)示例
el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下2024-07-07Vue3+Canvas實現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運動算法、爆炸效果、以及障礙物的生成,感興趣的小伙伴可以了解一下2022-03-03