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

相關文章
相關標籤/搜索