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