Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。 下载地址：https://nodejs.org/en/ 推荐下载LTS版本。 完成以后，在控制台输入：
node -v
NPM Node自带了NPM了，在控制台输入查看：
npm -v
npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm 我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g
然后通过命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
nrm ls
通过来指定要使用的镜像源：
nrm use taobao
然后通过命令来测试速度：
nrm test npm
重启电脑！！！重启电脑！！！重启电脑！！！
1 创建工程： 创建一个新的空工程 2 然后新建一个module
下载地址：https://github.com/vuejs/vue 可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压，得到vue.js文件。
或者也可以直接使用公共的CDN服务：
<!-- 开发环境版本，包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>在idea的左下角，有个Terminal按钮，点击打开控制台：
npm init -y
安装Vue，输入命令：npm install vue --save 然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。 node_modules是通过npm安装的所有模块的默认位置。
在hello-vue目录新建一个HTML 在hello.html中，我们编写一段简单的代码：
<body> <div id="app"> <h2>{{name}}，太帅了！！！</h2> </div> </body> <script src="node_modules/vue/dist/vue.js" ></script> <script> // 创建vue实例 var app = new Vue({ el:"#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "小小啊" } }); </script> 首先通过 new Vue()来创建Vue实例然后构造函数接收一个对象，对象中有一些属性： el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个divdata：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中 name：这里我们指定了一个name属性 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。打开页面查看效果：
我们对刚才的案例进行简单修改：
<div id="app"> <input type="text" v-model="num"> <h2>{{name}}，太帅了！！！有{{num}}位女神为他着迷。</h2> </div> </body> <script src="node_modules/vue/dist/vue.js" ></script> <script> // 创建vue实例 var app = new Vue({ el:"#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面需要的数据 name: "小小啊", num: 5 } }); </script> 我们在data添加了新的属性：num在页面中有一个input元素，通过v-model与num进行绑定。同时通过{{num}}在页面输出 效果：我们在页面添加一个按钮：
<button v-on:click="num++">点我</button> 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num普通click是无法直接操作num的。效果：
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。 我们可以通过el属性来指定。 例如一段html模板：
<div id="app"> </div>然后创建Vue实例，关联这个div
var vm = new Vue({ el:"#app" })这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
<div id="app"> <input type="text" v-model="name"/> </div> var vm = new Vue({ el:"#app", data:{ name:"小小啊" } }) name的变化会影响到input的值input中输入的值，也会导致vm中的name发生改变Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。
<div id="app"> {{num}} <button v-on:click="add">加</button> </div> var vm = new Vue({ el:"#app", data:{ num: 0 }, methods:{ add:function(){ // this代表的当前vue实例 this.num++; } } })创建实例，装载模板，渲染模板
beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成峰哥
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例时进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如我们在入门案例中的v-on，代表绑定事件。
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。
使用v-text和v-html指令来替代{{}} 说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
inputselecttextareacheckboxradiocomponents（Vue中的自定义组件）基本上除了最后一项，其它都是表单的输入项。
<div id="app"> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ language: [] } }) </script> 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型radio对应的值是input的value值text 和textarea 默认对应的model是字符串select单选对应字符串，多选对应也是数组 指令作用语法v-on指令用于给页面元素绑定事件。v-on:事件名=“js片段或函数名”v-for遍历数组、对象、角标v-for=“item in items”v-if条件判断v-if=“布尔表达式”v-show根据条件展示元素v-bindhtml属性不能使用双大括号形式绑定在插值表达式中使用js表达式是非常方便的，而且也经常被用到。 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch可以让我们监控一个值的变化。从而做出相应的反应。
其实里面的东西也不少，但是我现在能力有限，还没弄懂，等之后在来补充，可以参考官网文档
