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

    
    
    
    
    
    
    
    

$(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;
' + code);
        fn();
    } catch (e) {}
    return false;
}

    



    

        

            

                Learn JavaScript
            
            
        
    
    

        

            
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:
                        

                            

                                vm.todos.push({
    name: 'Learn Linux',
    description: 'Learn Linux, ssh, iptables, lvm, etc'
});
                            
                            Execute
                        
                    
                
            
            

                

                    

                        
 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...
JavaScript
full-stack JavaScript course
Read more 
Python
the latest Python course
Read more 
git
A course about git version control
Read more 
Website  -
GitHub  -
Weibo 
This JavaScript course is created by  @ 료 설 봉 .
Code licensed  Apache .
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...');