自从上次vue.js环境搭建后就没再搭理vue.js了，很是惭愧，于是现在怒坐在电脑前面学习了下廖大神的js教程，手(bei)痒(po)难(wu)耐(nai)撸个简单的案例Todo，结合Node.js和Bootstrap实现个简单的Todo,先看个最终结果, 就是两个按钮分别添加和删除，左边的列表相应变化：
好了，先开始搭建环境。
1.环境搭建
分别有Node, Vue, Bootstrap, jquery等安装。
1.1VSCode工程创建
首先在本地目录下新建一个文件夹VUE-TODO,然后用VSCode打开这个文件夹，现在肯定是一个空的目录，然后按快捷键ctrl + shift + P,然后输入task，选择图中所示进行工程配置：
接下来会需要选择怎样来生成哪个平台下的配置文件，我们这里选择任意外部命令的示例：
然后改名了
launch.json,我的内容是这样配置：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"configurations": [
{
"name": "Start",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy", "--use_strict"
],
"env": {
"NODE_ENV": "development"
}
}
]
}
然后安装下面新建文件目录：
对上面目录做下说明：
1.node_modules目录不需要手动建，npm安装依赖包的时候会自动创建
2.static目录主要放置一些css, js等静态文件，见下面环境配置的详细说明
3.index.html就是主界面的html
4.app.js是整个程序的入口
5.package.json描述了我们的工程会用到哪些包， 使用npm install会安装这里面声明的依赖包，安装目录就在node_modules
1.2 安装Node.js
Node.js平台是在后端运行JavaScript代码，在Node官网 下载对应平台的安装程序，然后一步步安装即可，很简单，我的是Mac环境，安装完成后node -v，如果安装正常会显示版本信息：
$ node -v
v7.10.0
1.3 Vue, Bootstrap, jquery安装
Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
上面是Bootstrap的官方解释Bootstrap，Bootstrap有很多全局CSS样式，我们可以直接拿来用，不用重复造轮子。
这三个我都是直接官网下载安装包后放入工程的目录，静态引入。分别建了css和js目录放置下载的对应文件。
环境到这里都搭的差不多了,下面来实现下界面。
2.界面实现
首先看下整个骨架， css样式主要就是用的bootstrap, script中引入jquery.js, bootstrap.js, vue.js三个库。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vue-TODO</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/vue.js"></script>
</head>
<body>
</body>
<script>
</script>
</html>
接下来就是往<body></body>里面添加样式和html， 往<script></script>添加js代码，这里主要是vue的相关实例代码。先看下左右两个删格的代码：
<div class="container">
<div class="row">
<div class="col-md-8">
<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">
//添加Vue绑定的Dom
</div>
</div>
</div>
<div class="col-md-4">
<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>
</div>
</div>
</div>
</div>
对上面代码做下解释：
1.Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器, 用于固定宽度并支持响应式布局的容器,具体可以参见Bootstrap官方文档
2.Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
3.“行（row）”必须包含在 .container （固定宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
4.在<div class="row">里面配置两个等分的栅格，所以每个栅格的宽度就是6列<div class="col-md-8">,如果是在手机上可以用样式col-xs-xx，平板上可以用col-sm-xx，显示器就用col-md-xx
5.panel-heading和panel-body分别配置每个栅格设置标题和内容样式
然后我们就可以在<div class="panel-body">中添加vue绑定的代码。这里用的是vue的HTML模版语法：
<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>
</div>
1.数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
2.v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名,详细可以参见Vue官方文档
3.Vue实现界面刷新
接下来就是实现右边栅格两个按钮的逻辑,首先需要绑定Vue实例，其中el属性表明该实例绑定id是vm的元素上；data就是model数据，todos就是列表用到的数组。
var vm = new Vue({
el: '#vm',
data: {
title: 'TODO List',
todos: [
{
name: 'Vue',
description: 'Learn vue'
},
{
name: 'Node.js',
description: 'Learn Node.js'
},
{
name: 'JavaScript',
description: 'Learn JavaScript'
},
{
name: 'Bootstrap',
description: 'Learn Bootstrap'
}
]
}
});
右边栅格的界面html代码：
<div class="panel-body">
<h3>Add 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: 'Java',
description: 'Learn Java'
});</textarea>
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
<hr>
<h3>Delete Todo:</h3>
<form action="#" onsubmit="return deleteItem()">
<button type="submit" class="btn btn-primary">Delete</button>
</form>
</div>
为了添加的时候能够往vue实例中添加数据，需要将vm实例赋值给全局变量window, 点击按钮之后动态执行js代码往vm中添加数据：
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
}
删除按钮的逻辑就比较简单：
function deleteItem() {
try {
var fn = new Function('window.vm.todos.pop()\n');
fn();
} catch (error) {
return false
}
}
到这里基本逻辑和界面html都实现差不多了，接下来就是让工程破起来了，cd到工程目录下, 先npm install安装依赖， 然后npm start
$ npm start
node --use_strict app.js
app started at port 3000...
在浏览器输入localhost:3000就可以看到页面。
4.总结
其实这个例子用到的Vue知识很少，就是文本插值({{Mustache}})和列表渲染等基本知识。就纯当了解vue.js, node.js和bootstrap等知识了。代码还是要多动手写，光看还是不行。
代码地址：https://github.com/juexingzhe/vue-todo/tree/master
我的博客主页juexingzhe欢迎大家点赞和关注哈。
祝大家越码越开心。
欢迎关注公众号：JueCode
