一、vue.js的定位

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。不仅易于上手，还便于与第三方库或既有项目整合。

二，开发环境

1.使用cdn（上线环境）http://cdn.bootcss.com/vue/2.1.10/vue.js

2.使用npm命令（node.js）

3.直接引入vue.js脚本（初学）

三、指令

1.v-bind指令：单向绑定，能将变量的内容渲染到页面，反之不行。代码如下：

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


var app1=new Vue({
    el:"#app-1",
    data:{
        message:'页面加载于'+new Date().toLocaleTimeString()
  },
})

2.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!'
  }
})

3.v-if条件

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

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

4.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: '整个项目' }
    ]
  }
})

v-on事件与方法

<button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {//methods用来创建一系列方法
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

四、Vue的生命周期，钩子函数

1.beforeCreate  初始化事件和生命周期。

2.created 对象创建完成，已经配置了data的观测、属性和方法的运算、watch、事件回调。这个阶段可以使用ajax调用接口的数据。

3.beforeMount 准备好需要渲染的节点，但还没有挂载。

4.mounted 将准备好的节点渲染到页面，这个阶段可以使用js操作dom了。

5.beforeUpdate监测数据变化，适合用在数据更新之前。

6.update渲染更新后的数据。

7.beforeDestroy调用vm.$distory()方法后执行。

8.destroed实例销毁后调用，所有的事件监听器