[Node.js基础]学习②⑧--同步DOM结构

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014757513445737513d7d65cd64333b5b6ba772839e401000

让Model和DOM的结构保持同步

  1. 产品评审
    新款iPhone上市前评审
  2. 开发计划
    与PM确定下一版Android开发计划
  3. VC会议
    敲定C轮5000万美元融资
todos: [
    {
        name: '产品评审',
        description: '新款iPhone上市前评审'
    },
    {
        name: '开发计划',
        description: '与PM确定下一版Android开发计划'
    },
    {
        name: 'VC会议',
        description: '敲定C轮5000万美元融资'
    }
]

v-for

  1. {{ 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 }}

  1. {{ t.name }}
    {{ t.description }}

Try add or remove todo:

Code

HTML:

{{ title }}

  1. {{ 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

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...');

你可能感兴趣的:([Node.js基础]学习②⑧--同步DOM结构)