vue.js 實戰 todo list

vue.js 起源

vue.js 的做者是尤雨溪，是一名中國人，以前在谷歌工做，如今在全職維護 vue 項目。css

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

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

小貼示：什麼是 MVVM？jquery

MVC 架構git

MVVM 架構架構

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

vue.js 特性

響應式

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

組件化

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

向下擴展

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

性能

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

1、建立 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() {}, } })

2、建立 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>

截圖：

3、增長按鈕功能

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

4、刪除按鈕功能

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

5、已完成按鈕功能

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; }

截圖：

6、增長待完成、已完成條數，最終完善

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

原文出處：https://www.cnblogs.com/imzhi/p/vuejs-todolist-demo.html