http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014757513445737513d7d65cd64333b5b6ba772839e401000
让Model和DOM的结构保持同步
<ol>
<li>
<dl>
<dt>产品评审</dt>
<dd>新款iPhone上市前评审</dd>
</dl>
</li>
<li>
<dl>
<dt>开发计划</dt>
<dd>与PM确定下一版Android开发计划</dd>
</dl>
</li>
<li>
<dl>
<dt>VC会议</dt>
<dd>敲定C轮5000万美元融资</dd>
</dl>
</li>
</ol>
todos: [
{
name: '产品评审',
description: '新款iPhone上市前评审'
},
{
name: '开发计划',
description: '与PM确定下一版Android开发计划'
},
{
name: 'VC会议',
description: '敲定C轮5000万美元融资'
}
]
v-for
<ol>
<li v-for="t in todos">
<dl>
<dt>{{ t.name }}</dt>
<dd>{{ t.description }}</dd>
</dl>
</li>
</ol>
正确的方法是不要对数组元素赋值，而是更新：
vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';
或者，通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：
var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);
package.json
{
"name": "view-koa",
"version": "1.0.0",
"description": "todo example with vue",
"main": "app.js",
"scripts": {
"start": "node --use_strict app.js"
},
"keywords": [
"vue",
"mvvm"
],
"author": "Michael Liao",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/michaelliao/learn-javascript.git"
},
"dependencies": {
"koa": "2.0.0",
"mime": "1.3.4",
"mz": "2.4.0"
}
}
static-files.js
const path = require('path');
const mime = require('mime');
const fs = require('mz/fs');
function staticFiles(url, dir) {
return async (ctx, next) => {
let rpath = ctx.request.path;
if (rpath.startsWith(url)) {
let fp = path.join(dir, rpath.substring(url.length));
if (await fs.exists(fp)) {
ctx.response.type = mime.lookup(rpath);
ctx.response.body = await fs.readFile(fp);
} else {
ctx.response.status = 404;
}
} else {
await next();
}
};
}
module.exports = staticFiles;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="learn javascript by www.liaoxuefeng.com">
<title>Vue</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/vue.js"></script>
<script>
$(function () {
var vm = new Vue({
el: '#vm',
data: {
title: 'TODO List',
todos: [
{
name: 'Learn Git',
description: 'Learn how to use git as distributed version control'
},
{
name: 'Learn JavaScript',
description: 'Learn JavaScript, Node.js, NPM and other libraries'
},
{
name: 'Learn Python',
description: 'Learn Python, WSGI, asyncio and NumPy'
},
{
name: 'Learn Java',
description: 'Learn Java, Servlet, Maven and Spring'
}
]
}
});
window.vm = vm;
});
function executeJs() {
try {
var code = $('#code').val();
var fn = new Function('var vm = window.vm;\n' + code);
fn();
} catch (e) {}
return false;
}
</script>
</head>
<body>
<header class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="/" class="navbar-brand">Learn JavaScript</a>
</div>
<nav class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li><a target="_blank" href="http://www.liaoxuefeng.com/">Get Courses</a></li>
<li><a target="_blank" href="https://github.com/michaelliao/learn-javascript">Source Code</a></li>
<li><a target="_blank" href="http://getbootstrap.com/">Resource</a></li>
</ul>
</nav>
</div>
</header>
<div id="important" style="color:#cdbfe3; background-color:#6f5499; padding:30px 0; margin:-20px 0 20px 0;">
<div class="container">
<h1 style="color:#fff; font-size:60px">Getting started</h1>
<p style="font-size:24px; line-height:48px">Learn JavaScript, Node.js, npm, koa2, Vue, babel, etc. at liaoxuefeng.com.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span> MVVM</h3>
</div>
<div class="panel-body">
<div id="vm">
<h3>{{ title }}</h3>
<ol>
<li v-for="t in todos">
<dl>
<dt>{{ t.name }}</dt>
<dd>{{ t.description }}</dd>
</dl>
</li>
</ol>
</div>
<hr>
<h3>Try add or remove todo:</h3>
<form action="#" onsubmit="return executeJs()">
<div class="form-group">
<textarea id="code" class="form-control" style="font-family: Menlo,Monaco,Consolas,'Courier New',monospace; resize:none;" rows="5">vm.todos.push({
name: 'Learn Linux',
description: 'Learn Linux, ssh, iptables, lvm, etc'
});</textarea>
</div>
<button type="submit" class="btn btn-primary">Execute</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-eye-open"></span> Code</h3>
</div>
<div class="panel-body">
<p>HTML:</p>
<pre><div id="vm">
<h3>{{ title }}</h3>
<ol>
<li v-for="t in todos">
<dl>
<dt>{{ t.name }}</dt>
<dd>{{ t.description }}</dd>
</dl>
</li>
</ol>
</div></pre>
<p>JavaScript:</p>
<pre>var vm = new Vue({
el: '#vm',
data: {
title: 'TODO List',
todos: [
{
name: 'Learn Git',
description: 'Learn how to use git as distributed version control'
},
{
name: 'Learn JavaScript',
description: 'Learn JavaScript, Node.js, NPM and other libraries'
},
{
name: 'Learn Python',
description: 'Learn Python, WSGI, asyncio and NumPy'
},
{
name: 'Learn Java',
description: 'Learn Java, Servlet, Maven and Spring'
}
]
}
});</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Get more courses...</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">JavaScript</h3>
</div>
<div class="panel-body">
<p>full-stack JavaScript course</p>
<p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Python</h3>
</div>
<div class="panel-body">
<p>the latest Python course</p>
<p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000">Read more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">git</h3>
</div>
<div class="panel-body">
<p>A course about git version control</p>
<p><a target="_blank" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Read more</a></p>
</div>
</div>
</div>
</div>
</div>
<footer style="background-color:#ddd; padding: 20px 0;">
<div class="container">
<p>
<a target="_blank" href="http://www.liaoxuefeng.com">Website</a> -
<a target="_blank" href="https://github.com/michaelliao/learn-javascript">GitHub</a> -
<a target="_blank" href="http://weibo.com/liaoxuefeng">Weibo</a>
</p>
<p>This JavaScript course is created by <a target="_blank" href="http://weibo.com/liaoxuefeng">@廖雪峰</a>.</p>
<p>Code licensed <a target="_blank" href="https://github.com/michaelliao/learn-javascript/blob/master/LICENSE">Apache</a>.</p>
</div>
</footer>
</body>
</html>
app.js
const Koa = require('koa');
const app = new Koa();
const isProduction = process.env.NODE_ENV === 'production';
// log request URL:
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
var
start = new Date().getTime(),
execTime;
await next();
execTime = new Date().getTime() - start;
ctx.response.set('X-Response-Time', `${execTime}ms`);
});
// static file support:
let staticFiles = require('./static-files');
app.use(staticFiles('/static/', __dirname + '/static'));
// redirect to /static/index.html:
app.use(async (ctx, next) => {
if (ctx.request.path === '/') {
ctx.response.redirect('/static/index.html');
} else {
await next();
}
});
app.listen(3000);
console.log('app started at port 3000...');
