[Node.js基础]学习②⑦--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>

对应的Model为：

language: ['zh', 'en']

单个checkbox可以和boolean类型变量绑定：

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

对应的Model为：

subscribe: true; // 根据checkbox是否选中为true/false

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

对应的Model为：

city: 'bj' // 对应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" href="http://www.liaoxuefeng.com/">Get Courses</a></li>
                    <li><a target="_blank" href="https://github.com/michaelliao/learn-javascript">Source Code</a></li>
                    <li><a target="_blank" href="http://getbootstrap.com/">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" href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">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" href="http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000">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" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Read more</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer style="background-color:#ddd; padding: 20px 0;">
        <div class="container">
            <p>
                <a target="_blank" href="http://www.liaoxuefeng.com">Website</a> -
                <a target="_blank" href="https://github.com/michaelliao/learn-javascript">GitHub</a> -
                <a target="_blank" href="http://weibo.com/liaoxuefeng">Weibo</a>
            </p>
            <p>This JavaScript course is created by <a target="_blank" href="http://weibo.com/liaoxuefeng">@廖雪峰</a>.</p>
            <p>Code licensed <a target="_blank" href="https://github.com/michaelliao/learn-javascript/blob/master/LICENSE">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...');
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,302评论 19赞 139
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,950评论 25赞 709
  • 『随机失眠攻略』
    当万籁俱寂，而大脑却异常灵活的时候。要么，你辗转在梦与梦之间挣扎，将整天意淫的各种桥段乱码重播；要么，你只是又习惯...
    撒大勒伐德里奥阅读 1,066评论 0赞 0
  • 月子餐莫非全被杰伦吃了？昆凌二胎复出美兼瘦
    上个月刚刚生完二胎的昆凌仅仅休息了一个月就复出啦！在电影《极致追击》发布会上，她以S形的唯美人鱼卷发惊艳亮相！ 无...
    温商娱乐阅读 2,444评论 0赞 0
  • 省代半门槛活动总结
    1.自己存在的问题 自己对公司对产品比较相信，但是个人缺乏实战经验，对代理提出的问题没法解答，所以没有说服代理升级...
    雪cddthc阅读 1,709评论 0赞 0