目标：
1，初步了解Vue.js框架
2，介绍vue.js开发环境的搭建和脚手架工具的使用
3，Vue.js具体指令和项目实践（Todolist）
首先我们要理解框架和库的区别
库：库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；
框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。
简单来说：
库是将代码集合成的一个产品，供程序员调用。 框架则是为解决一个(一类)问题而开发的产品
第一章：Vue.js及相关工具介绍
Vue的特点：轻量(渐进式框架)，模块组件化，数据绑定。
多提的一句是Vue特别强调它是一个渐进式的框架，所以这个渐进式是必须要理解的。我们这里引用一段知乎上的解释：
在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： - 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。
直白一点就是，轻量的Vue只包括它最核心的文件，其他的工具你可以按照自己的想法渐进式的加入到自己的项目中。
//第一个Vue实例{ {message}}----------------------------var demo = new Vue({ el:'#app', data:{ message: 'Hello Vue.js' }});复制代码
Vue的中的组件与模块我们也要区分开来：
模块：侧重于功能或数据的封装，具体来说就像是功能的实现比如说格式化时间。
组件：包含了<template><style><script>而它的<script>可以由多种模块组成，具体来说header，footer这些高复用的页面都要做成组件。
环境安装
我们使用vue-cli命令行工具来构建初始化的Vue项目。
1，安装之前，还需要一些与之配套的环境
//webpack/vue-cli/npm或者用淘宝的
npm为node自带的包管理，无需再次下载，但如果使用cnpm就需要去安装一次
//以上都下载完毕后，打开cmd命令窗口，输入npm install -g vue-cli//-g 为全局安装，不加-g会安装到当前目录，下一次使用还要下载，加了安装到node目录下//当安装完了cli后，vue就变成了一个命令npm install -g webpack复制代码
2，我们开始利用 vue-cli构建一个项目
vue init webpack 项目名称（my-first-vue-project）//接下来就会出现一下的选项project name: 项目名称project description 描述Author 作者Use EsLint to lint your code? ES的语法检查工具，不推荐使用Setup unit tests with karma tmocha？ 单元测试，不推荐使用Setup e2e tests with Nightwotch? 端到端的测试，比如登陆，不推荐使用复制代码
3，项目的初始化就完成了，我们开始下载依赖
npm install/cnpm install后会产生一个node_modules的文件夹。具体说明看下方
Vue工程化项目中有一个文件夹叫node_modules里面全是该项目的需要的各种依赖包，但为了减少项目体积在上传到git仓库时Vue会限制这个文件夹的上传，但是为了保证项目的依赖，webpack把这些配置都保存在package.json中，我们从git下载到本地后在项目文件夹下，执行npm install/cnpm install会原样的把所有依赖还原，所以下载依赖是必不可少的一个步骤，通常来说cnpm会比npm快很多。
还有一些其他文件的上传限制
多说一句，我刚开始从git下载的Vue项目很长一段时间都找不到运行不了的原因(ノへ￣、)
运行项目
npm run dev/localhost:8080
在项目文件下cmd命令符中执行npm run dev产生一个端口8080在浏览器中输入localhost:8080打开项目
一个项目就执行完成了。。。。ヽ(✿ﾟ▽ﾟ)ノ
注：其实很多命令在项目的文件中就有体现，细心点不难发现就算是dev也存在package.json中
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" },复制代码 模板搭建完毕，在src目录下开发
注：vue-cli还有个酷炫的功能那就是热更新，我们localhost：8080后在代码上做出改动，自动显示到页面上。
项目完成后的打包
当项目完成后就可以打包成本地的项目了，且所有的压缩，打包，路由webpack都会帮你处理好的，npm run build会生成一个dist目录里面就是打包好的本地项目了(* ￣3)(ε￣ *)
我们对上面的*vue到页面的流程做一个总结:o(*≧▽≦)ツ┏━┓
好丑》》(°ー°〃)
接下来我们讲一下Vue中的一些重要选项
{ { message }}new Vue({ el:'#app', data:{ message:'Hello Vue' } })复制代码
vue首先是一个实例对象
data也是一个对象，并且对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
data:{ a: 1, b:[]}复制代码 methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
var vm = new Vue({ data: { a: 1 }, methods:{ plus: function(){ this.a++; }}});vm.plus() //调用方法vm.a // 2复制代码 watch（监听器）一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
watch:{ 'a':function(val,oldval){ console.log(val,oldval) }}//这个a就是上面data中的a，当它发生改变时，watch就做出变化复制代码 模板指令-HTML和Vue对象的粘合剂
数据渲染：v-text { { 插值表达式 }} v-html
v-text与v-html区别是一个解析html标签渲染，一个是纯文本渲染
这里不建议使用v-html去解析html标签防止xxs攻击（关于xxs自己）挺有意思的
控制模板隐藏 v-if v-show
这里的v-if与v-show最大的区别是v-show不会从DOM树上删除这个节点只是隐藏，v-if是懒加载，就是只有达到了它的运行条件它才会执行，它会直接删除该节点，或加载该节点
渲染循环列表： v-for
基本上每一个框架都会有关于循环列表的渲染方式
事件绑定 v-on/@
---------------------------------methods:{ doThis: function(){ //do something } }复制代码 属性绑定 v-bind/：
还是多用于class与style绑定
复制代码
这其中的数组中的是字符串，而对象中的是布尔值
小结：Vue实例中最重要的三个分别是：data，methods，watch其中Vue对象的数据methods是方法，watch是对象监听，vue中的设置通过指令来生效。
第二章：使用Vue.js做一个Todolist
现在我们就要使用我们以上学习的知识做一个小的demo；来加深我们的印象
我们前面初始化了一个项目，我们用它来做模板，在src目录下开发