[Node.js基礎(chǔ)]學(xué)習(xí)②⑧--同步DOM結(jié)構(gòu)

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

讓Model和DOM的結(jié)構(gòu)保持同步

<ol>
    <li>
        <dl>
            <dt>產(chǎn)品評審</dt>
            <dd>新款iPhone上市前評審</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>開發(fā)計劃</dt>
            <dd>與PM確定下一版Android開發(fā)計劃</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>VC會議</dt>
            <dd>敲定C輪5000萬美元融資</dd>
        </dl>
    </li>
</ol>

todos: [
    {
        name: '產(chǎn)品評審',
        description: '新款iPhone上市前評審'
    },
    {
        name: '開發(fā)計劃',
        description: '與PM確定下一版Android開發(fā)計劃'
    },
    {
        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>

正確的方法是不要對數(shù)組元素賦值，而是更新：

vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

或者，通過splice()方法，刪除某個元素后，再添加一個元素，達(dá)到“賦值”的效果：

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" >Get Courses</a></li>
                    <li><a target="_blank" >Source Code</a></li>
                    <li><a target="_blank" >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" >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" >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" >Read more</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer style="background-color:#ddd; padding: 20px 0;">
        <div class="container">
            <p>
                <a target="_blank" >Website</a> -
                <a target="_blank" >GitHub</a> -
                <a target="_blank" >Weibo</a>
            </p>
            <p>This JavaScript course is created by <a target="_blank" >@廖雪峰</a>.</p>
            <p>Code licensed <a target="_blank" >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...');
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容