http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014757513445737513d7d65cd64333b5b6ba772839e401000
让Model和DOM的结构保持同步
-
- 产品评审
- 新款iPhone上市前评审
-
- 开发计划
- 与PM确定下一版Android开发计划
-
- VC会议
- 敲定C轮5000万美元融资
todos: [
{
name: '产品评审',
description: '新款iPhone上市前评审'
},
{
name: '开发计划',
description: '与PM确定下一版Android开发计划'
},
{
name: 'VC会议',
description: '敲定C轮5000万美元融资'
}
]
v-for
-
- {{ t.name }}
- {{ t.description }}
正确的方法是不要对数组元素赋值，而是更新：
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
Vue
Getting started
Learn JavaScript, Node.js, npm, koa2, Vue, babel, etc. at liaoxuefeng.com.
MVVM
{{ title }}
-
- {{ t.name }}
- {{ t.description }}
Try add or remove todo:
Code
HTML:
{{ title }}
-
- {{ t.name }}
- {{ t.description }}
JavaScript:
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'
}
]
}
});
Get more courses...
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...');