1.概念：

Vue是一套用于构建用户界面的渐进式框架，Vue不同于React的是其设计思路不同，在页面中创建标签，再经过js代码编辑，把页面中的标签及属性修改，最后达到页面中的局部更新。

2. 版本及安装：

1. 目前Vue的版本：

Vue不支持IE8及以下版本，目前，Vue2.5的构建版本有两种：（运行时版本比完整版体积要小于30%）

一个包含编译器和运行时的版本，简称为完整版本

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂r载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编器，即使用完整版

一个只包含运行时的版本

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

2. 将Vue引入页面中的途径：

CDN
WebPack
Rollup
Browserify
Parcel

3. Vue基本语法：

1. 声明式地将数据渲染进DOM系统中

（1）.直接插入内容的方法

  //html
<div id="app">
      {{message}}
</div>

//js
var vm = new Vue{
    el:'#app',
    data:{
      message： '要显示的内容'
}}

（2）.用户绑定内容的方法

//html
<div id="app">
      <span
        v-bind:title="message"
        (
          或者
         title=message/
          v-bind:title=message/
          :title=message
          )
      >
      </span>
</div>

//js
var vm = new Vue{
    el:'#app',
    data:{
      message： '标题'
}}

2. 循环

 //html
<div id="app">
      <ol>
        <li  v-for="todo in(或of) todeos">
             {{todo.text}}
        </li>
     </ol>
</div>

//js
var vm = new Vue{
    el:'#app',
    data:{
        todos:[
              {text: ' 第一个内容'}，
              {text: ' 第二个内容'}，
              {text: ' 第三个内容'}
        ]    
    }
}

3. 条件

//html
<div id="app">
     <p v-if="seen">{{message}}</p>
</div>

 /js
var vm = new Vue{
    el:'#app',
    data:{
        seen:true
    }
}

在页面中能看到P元素是因为是因为DOM结构中出现了该p元素

4. 用户输入处理

//html
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

//js
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  reverseMessage: function () {
    this.message = this.message.split('').reverse().join('')
  }
})