[Node.js基礎(chǔ)]學(xué)習(xí)②⑦--MVVM雙向綁定

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00147574857851718682c42639f466a934ad9d4f485d1f2000

$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            name: ''
        }
    });
    window.vm = vm;
});

<form id="vm" action="#">
    <p><input v-model="email"></p>
    <p><input v-model="name"></p>
</form>

<label><input type="checkbox" v-model="language" value="zh"> Chinese</label>
<label><input type="checkbox" v-model="language" value="en"> English</label>
<label><input type="checkbox" v-model="language" value="fr"> French</label>

對應(yīng)的Model為：

language: ['zh', 'en']

單個checkbox可以和boolean類型變量綁定：

<input type="checkbox" v-model="subscribe">

對應(yīng)的Model為：

subscribe: true; // 根據(jù)checkbox是否選中為true/false

<select v-model="city">
    <option value="bj">Beijing</option>
    <option value="sh">Shanghai</option>
    <option value="gz">Guangzhou</option>
</select>

對應(yīng)的Model為：

city: 'bj' // 對應(yīng)option的value

處理事件

<form id="vm" v-on:submit.prevent="register">
//使用.prevent表示阻止事件冒泡三痰，這樣茅诱，瀏覽器不再處理<form>的submit事件

var vm = new Vue({
    el: '#vm',
    data: {
        ...
    },
    methods: {
        register: function () {
            // 顯示JSON格式的Model:
            alert(JSON.stringify(this.$data));
            // TODO: AJAX POST...
        }
    }
});

package.json

{
    "name": "view-koa",
    "version": "1.0.0",
    "description": "form 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

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/bootstrap.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script>

$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            password: '',
            birth: '',
            gender: 's',
            language: ['zh'],
            city: 'bj',
            introduction: '',
            subscribe: true
        },
        methods: {
            register: function () {
                $('#modal-data').text(JSON.stringify(this.$data, null, '    '));
                $('#modal').modal();
                // TODO: post JSON data to server...
            }
        }
    });
    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>
    <div class="modal" id="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Handle Register Form</h4>
                </div>
                <div class="modal-body">
                    <p>Post JSON data:</p>
                    <pre id="modal-data"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <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>Register Vue Course</h3>
                            <form name="register" action="#" v-on:submit.prevent="register">
                                <div class="form-group">
                                    <label>Email address:</label>
                                    <input type="email" v-model="email" class="form-control" placeholder="Enter email">
                                </div>
                                <div class="form-group">
                                    <label>Password:</label>
                                    <input type="password" v-model="password" class="form-control" placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <label>Birth:</label>
                                    <input type="date" v-model="birth" class="form-control" placeholder="Birth">
                                </div>
                                <div class="form-group">
                                    <label>Gender:</label>
                                    <div class="radio">
                                        <label><input type="radio" name="gender" value="m" v-model="gender"> Male</label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" name="gender" value="f" v-model="gender"> Female</label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" name="gender" value="s" v-model="gender"> Keep Secret</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Language:</label>
                                    <div>
                                        <label class="checkbox-inline"><input type="checkbox" v-model="language" value="zh"> Chinese</label>
                                        <label class="checkbox-inline"><input type="checkbox" v-model="language" value="en"> English</label>
                                        <label class="checkbox-inline"><input type="checkbox" v-model="language" value="fr"> French</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>City:</label>
                                    <select v-model="city" class="form-control">
                                        <option value="bj">Beijing</option>
                                        <option value="sh">Shanghai</option>
                                        <option value="gz">Guangzhou</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Introduce Yourself:</label>
                                    <textarea v-model="introduction" class="form-control" rows="3" style="resize: none;" placeholder="Your background, interests, etc."></textarea>
                                </div>
                                <div class="form-group">
                                    <label>Subscribe:</label>
                                    <div>
                                        <label class="checkbox-inline"><input type="checkbox" v-model="subscribe"> Send me information of new courses</label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Register</button>
                            </form>
                        </div>
                    </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> Model</h3>
                    </div>
                    <div class="panel-body">
                        <h3>Try change the model</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.email = 'bob@example.com';
vm.birth = '1990-01-21';
vm.gender = 'f';
</textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Execute</button>
                        </form>
                    </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>

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;

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) => {
    ctx.response.redirect('/static/index.html');
});

app.listen(3000);
console.log('app started at port 3000...');

最后編輯于：2017.12.08 06:09:51

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市燥滑，隨后出現(xiàn)的幾起案子俯抖，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 212,884評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件忆蚀，死亡現(xiàn)場離奇詭異，居然都是意外死亡姑裂，警方通過查閱死者的電腦和手機馋袜，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,755評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來舶斧，“玉大人欣鳖，你說我怎么就攤上這事∨趺” “怎么了观堂？”我有些...
開封第一講書人閱讀 158,369評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長呀忧。經(jīng)常有香客問我师痕，道長，這世上最難降的妖魔是什么而账？我笑而不...
開封第一講書人閱讀 56,799評論 1贊 285
?港島之戀（遺憾婚禮）
正文為了忘掉前任胰坟，我火速辦了婚禮，結(jié)果婚禮上泞辐，老公的妹妹穿的比我還像新娘笔横。我一直安慰自己，他們只是感情好咐吼，可當(dāng)我...
茶點故事閱讀 65,910評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布吹缔。她就那樣靜靜地躺著，像睡著了一般锯茄。火紅的嫁衣襯著肌膚如雪厢塘。梳的紋絲不亂的頭發(fā)上茶没，一...
開封第一講書人閱讀 50,096評論 1贊 291
城市分裂傳說
那天，我揣著相機與錄音晚碾，去河邊找鬼抓半。笑死，一個胖子當(dāng)著我的面吹牛格嘁，可吹牛的內(nèi)容都是我干的笛求。我是一名探鬼主播，決...
沈念sama閱讀 39,159評論 3贊 411
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼糕簿，長吁一口氣：“原來是場噩夢啊……” “哼探入！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起冶伞，我...
開封第一講書人閱讀 37,917評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤新症，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后响禽，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體徒爹，經(jīng)...
沈念sama閱讀 44,360評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,673評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年芋类，在試婚紗的時候發(fā)現(xiàn)自己被綠了隆嗅。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,814評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡侯繁，死狀恐怖胖喳，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情贮竟，我是刑警寧澤丽焊，帶...
沈念sama閱讀 34,509評論 4贊 334
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站咕别，受9級特大地震影響技健，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜惰拱，卻給世界環(huán)境...
茶點故事閱讀 40,156評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一雌贱、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧偿短，春花似錦欣孤、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,882評論 0贊 21
一樁弒父案降传，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至勾怒，卻和暖如春搬瑰，著一層夾襖步出監(jiān)牢的瞬間款票，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,123評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工泽论，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人卡乾。一個月前我還...
沈念sama閱讀 46,641評論 2贊 362
代替公主和親
正文我出身青樓翼悴，卻偏偏與公主長得像，于是被迫代替她去往敵國和親幔妨。傳聞我的和親對象是個殘疾皇子鹦赎，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,728評論 2贊 351

[Node.js基礎(chǔ)]學(xué)習(xí)②⑦--MVVM雙向綁定

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00147574857851718682c42639f466a934ad9d4f485d1f2000

處理事件

package.json

static

index.html

static-files.js

app.js

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