[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)品評(píng)審</dt>
            <dd>新款iPhone上市前評(píng)審</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>開發(fā)計(jì)劃</dt>
            <dd>與PM確定下一版Android開發(fā)計(jì)劃</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>VC會(huì)議</dt>
            <dd>敲定C輪5000萬(wàn)美元融資</dd>
        </dl>
    </li>
</ol>
todos: [
    {
        name: '產(chǎn)品評(píng)審',
        description: '新款iPhone上市前評(píng)審'
    },
    {
        name: '開發(fā)計(jì)劃',
        description: '與PM確定下一版Android開發(fā)計(jì)劃'
    },
    {
        name: 'VC會(huì)議',
        description: '敲定C輪5000萬(wàn)美元融資'
    }
]

v-for

<ol>
    <li v-for="t in todos">
        <dl>
            <dt>{{ t.name }}</dt>
            <dd>{{ t.description }}</dd>
        </dl>
    </li>
</ol>

正確的方法是不要對(duì)數(shù)組元素賦值,而是更新:

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

或者剃执,通過(guò)splice()方法呈础,刪除某個(gè)元素后,再添加一個(gè)元素萌京,達(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)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末硬毕,一起剝皮案震驚了整個(gè)濱河市京闰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掖肋,老刑警劉巖纵诞,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異培遵,居然都是意外死亡浙芙,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門籽腕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)嗡呼,“玉大人,你說(shuō)我怎么就攤上這事皇耗∧洗埃” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)万伤。 經(jīng)常有香客問(wèn)我窒悔,道長(zhǎng),這世上最難降的妖魔是什么敌买? 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任简珠,我火速辦了婚禮,結(jié)果婚禮上虹钮,老公的妹妹穿的比我還像新娘聋庵。我一直安慰自己,他們只是感情好芙粱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開白布祭玉。 她就那樣靜靜地躺著,像睡著了一般春畔。 火紅的嫁衣襯著肌膚如雪脱货。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評(píng)論 1 305
  • 那天律姨,我揣著相機(jī)與錄音振峻,去河邊找鬼。 笑死线召,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的多矮。 我是一名探鬼主播缓淹,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼塔逃!你這毒婦竟也來(lái)了讯壶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤湾盗,失蹤者是張志新(化名)和其女友劉穎伏蚊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體格粪,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躏吊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帐萎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片比伏。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖疆导,靈堂內(nèi)的尸體忽然破棺而出赁项,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布悠菜,位于F島的核電站舰攒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏悔醋。R本人自食惡果不足惜摩窃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望篙顺。 院中可真熱鬧偶芍,春花似錦、人聲如沸德玫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)宰僧。三九已至材彪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間琴儿,已是汗流浹背段化。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留造成,地道東北人显熏。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像晒屎,于是被迫代替她去往敵國(guó)和親喘蟆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容