vue.js 實戰 todo list

vue.js 起源

vue.js 的作者是尤雨溪，是一名中國人，之前在谷歌工作，現在在全職維護 vue 項目。

vue.js 是 2014 年推出來的。現在已經更新到 2.x 版本，3.0 版本會在 2020 年第 1 季度推出。

vue.js 借鑒了 mvvm 思想，采用單向數據流，使得數據流更加清晰易懂。

 

小貼示：什么是 MVVM？

MVC 架構

MVVM 架構

最常見的就是 mvc 架構，由模型、視圖、控制器組成。mvvm 模式由模型、視圖、視圖模型組成。mvvm 模式的優點是便於復雜的邏輯解耦。開發者只需要關注業務邏輯，不需要手動操作 dom，不需要關注數據狀態的同步問題，復數的數據狀態維護全部交由 mvvm 統一管理即可。

vue.js 特性

• 響應式

vue.js 渲染到 html 中的數據是響應式的。可以理解為 html 中展示的數據是 vue.js 定義的數據一個引用，而不是拷貝，當修改 vue.js 定義的數據時，html 自動響應更新顯示。vue.js 框架給 js 和 html 頁面建立起一座隱形的橋梁以響應並更新數據。

• 組件化

vue.js 組件將要復用的通用性功能進行封裝，便於大型項目的開發，也便於項目的功能性拆解。符合 D.R.Y. 原則。

• 向下擴展

vue.js 和基於 jquery 的站點進行整合比較方便，只需要花一上午看下 [官方教程](
https://cn.vuejs.org/v2/guide/installation.html) 的基礎章節就可以寫起來了。

• 性能

React 和 Vue 都是非常快的，所以速度並不是在它們之中做選擇的決定性因素。對於具體的數據表現，可以移步這個[第三方 benchmark](https://stefankrause.net/js-frameworks-benchmark8/table.html)，它專注於渲染/更新非常簡單的組件樹的真實性能。

vue.js 基礎

1. 創建 vue.js 實例

new Vue({
    el: '#app'
    data: {
        message: 'hello world',
    }
})

el 表示 vue.js 實例掛載到的 dom 元素

data 是 vue.js 實例的數據對象，可響應數據變化

2. 數據綁定

<div id="app">{{ message }}</div>

3. 條件渲染

<h1 v-if="isRainy">下雨了</h1>
<h1 v-else>天晴了</h1>

4. 列表渲染

new Vue({
    data: {
        list: [
            {message: '西紅柿'},
            {message: '蘋果'},
            {message: '梨子'},
        ],
    }
});

<ul>
    <li v-for="item in list">{{ item.message }}</li>
</ul>

5. 計算屬性

new Vue({
    computed: {
        listLen: function() {
            return this.list.length;
        }
    }
});

computed 用來定義計算屬性，它是根據 vue.js 數據屬性（``data``）計算而來的屬性，它也可以響應式更新。

6. Class 綁定

<span v-bind:class="{isdone: isDone}">學習vue.js</span>

上面表示，當 isDone 這個 vue.js 實例的數據屬性為真時，span 元素上就有一個名為 isdone 的 css class。

7. 事件處理

<button type="button" v-on:click="del">刪除</button>

上面表示，監聽 button 元素的 click 事件，處理方法是 del。

8. 表單輸入綁定

<input type="text" v-model="text">

v-model 在表單元素上創建雙向數據綁定。即修改上面輸入框的值，會同步更新到 vue.js 實例的 text 數據對象；直接修改 vue.js 實例的 text 數據對象，也會同時反應到輸入框上來。

vue.js 實戰 todo list

一、創建 vue.js 實例

var vue = new Vue({
    el: '#app',
    data: {
        text: '',
        list: [
            {text: '待辦第1點', done: false},
            {text: '待辦第2點', done: false},
            {text: '待辦第3點', done: false},
        ],
    },
    methods: {
        add: function() {},
        finish: function() {},
        unfinish: function() {},
        del: function() {},
    },
    computed: {
        todoNum: function() {},
        finishNum: function() {},
    }
})

二、創建 html 頁面

<div id="app">
    <input type="text" placeholder="待辦事項" v-model="text">
    <button type="button" v-on:click="add">增加</button>
    
    <ul>
        <li v-for="item in list">
            <span>{{ item.text }}</span>
            <button type="button" v-on:click="unfinish(item)" v-if="item.done">未完成</button>
            <button type="button" v-on:click="finish(item)" v-else>已完成</button>
            <button type="button" v-on:click="del(item)">刪除</button>
        </li>
    </ul>
</div>

截圖：

三、增加按鈕功能

methods: {
    add: function() {
        if (!this.text.replace(/\s/g, '')) {
            alert('請輸入內容');
            return false;
        }
        this.list.push({text: this.text, done: false});
        this.text = '';
    }
}

四、刪除按鈕功能

methods: {
    del: function(item) {
        this.list.splice(this.list.indexOf(item), 1);
    }
}

五、已完成按鈕功能

js 新增：

methods: {
    finish: function(item) {
        item.done = true;
    },
    unfinish: function(item) {
        item.done = false;
    }
}

html 新增：

<span v-bind:class="{isdone: item.done}">{{ item.text }}</span>

css 新增：

.isdone { text-decoration: line-through; }

截圖：

六、增加待完成、已完成條數，最終完善

js 新增：

computed: {
    todoNum: function() {
        return this.list.filter(function(item) {
            return !item.done;
        }).length;
    },
    finishNum: function() {
        return this.list.filter(function(item) {
            return item.done;
        }).length;
    },
}

html 代碼：

<div id="app" v-cloak>
    <h3>vue分享 todolist</h3>
    <input type="text" placeholder="待辦事項" v-model="text">
    <button type="button" v-on:click="add">增加</button>

    <ul v-if="list.length">
        <li v-for="item in list">
            <span v-bind:class="{isdone: item.done}">{{ item.text }}</span>
            <button type="button" v-on:click="unfinish(item)" v-if="item.done">未完成</button>
            <button type="button" v-on:click="finish(item)" v-else>已完成</button>
            <button type="button" v-on:click="del(item)">刪除</button>
        </li>
    </ul>
    <p v-else>
        空空如也
    </p>

    <p>待辦 {{ todoNum }} 條，已完成 {{ finishNum }} 條。</p>
</div>

演示：

實戰源碼

https://gitlab.com/imzhi/vue-share-todolist