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