一、为什么使用vue.js

1、vue.js是一个强大的数据处理框架，能够很好的提升前端开发效率

2、国内使用vue.js开发前端的企业多，需求量大

3、vue.js文档详细，生态丰富，资料多、全、易学习，遇到问题容易在网上找到答案

二、 vue.js的安装

vue.js的安装有三种方法：

1.在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2.使用cdn方法（建议下载到本地）推荐下载地址：

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3.NPM 方法 ，建议使用淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v2.3.0
#升级 npm
cnpm install npm -g

在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

# 最新稳定版
$ cnpm install vue

三、指令

vue.js中以v-开头的都是表示vue.js的指令

1、v-bind

将元素节点的 title 特性和 Vue 实例的 message 属性保持一致

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

2、v-if

控制切换元素是否显示

<div id="app-3">
  <p v-if="seen">你现在看到我了</p>
</div>

var app3=new Vue({
    el:'#app-3',
    data:{
      seen:true//显示
    }
})
// seen:false时隐藏

3、v-for

绑定数组的数据来渲染一个项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

4、v-on 

添加一个事件监听器

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

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

5、v-model

表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})