下午班

1.Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.入门手册

2.1 使用Vue

简单的在html页面中包含如下代码即可使用Vue

2.2 Vue实例

通过添加一个Vue实例即可使用Vue相关API。

new Vue({
  el: '#root'
});

el 属性指定哪些 html 元素可以使用Vue API。
'#root'表示带有id="root"的 html 元素将可以使用Vue API。
其他常用的属性包括：
data：指定 Vue 实例所拥有的变量。
methods：指定 Vue 实例所拥有的函数。
computed：指定 Vue 实例所拥有的计算属性（拥有固定的计算公式但值会发生变化的变量）。
下面是一个包含多个属性的 Vue 实例：

new Vue({
  el: '#root',
  data: {
    message: 'Hello'
  },
  methods: {
     reverseMessage() {
       // `this` 指向 Vue 实例
       this.message =  this.message.split('').reverse().join('')
     }
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 Vue 实例
      return this.message.split('').reverse().join('')
    }
  }
});

该实例包含了值为 'Hello' 的 data 变量，能反转 'Hello' 的函数 reverseMessage 和计算属性 reversedMessage。

2.3 生命周期钩子

下图是 Vue 实例的生命周期图

图中的红框是被叫做生命周期钩子的函数，可以在实例中像定义属性一样定义他们

new Vue({
  el: '#root',
  data: {
    message: ''
  },
  created: function () {
    this.message = 'Hello';
  }
});

2.4 常用指令

可以在 Vue 实例指定的 html 元素中添加指令，以进行一些便捷操作：
v-for：可以进行数据的遍历，生成相同的 html 元素。
v-model：将 html 表单上的数据和 Vue 实例的数据进行双向绑定，两者只要其中一个发生变化，另一个也会随之变化。
v-if：检查给定的逻辑值，为真就渲染当前元素，否则不渲染。
v-show：检查给定的逻辑值，为真就显示当前元素，否则隐藏。
v-on：绑定事件监听器。发生指定事件便执行给定的函数。
v-bind：动态绑定属性。
下面是一个例子：


    
         {{ task.name }}

结果如下：

当点击 reverse 按钮时，message 会倒转并且 v-if 按钮消失，v-show 按钮出现，v-bind 的 class 属性从 active 变为消失

同时由于经常使用，v-bind 属性和 v-on 属性分别可以简写为：和 @

2.5 组件

每个组件都为 Vue 实例的孩子，同时每个组件也可以拥有自己的子组件。

下面是一个组件的例子：


  
      Here is the content for the about us tab.

Vue.component('tab', {
    template: `
        
    `,
    props: {
        name: { required: true },
        selected: { default: false }
    },
    data() {
        return {
            isActive: false
        };
    },
    computed: {
        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-')
        }
    },
    mounted() {
        this.isActive = this.selected
    },
    methods: {
        emitListenRe() {
            this.$emit('listenRe')
        }
    }
});

tab 为这个组件的名称, tabs 为他的父组件。
template：组件包含的模板。会把 html 文件中所有模板标签替换为这里定义的内容。
如会被替换为这里的模板内容
可以用 ' ' 包含单行的模板，也可以用 ` ` 包含块级模板。
slot：模板中的会将模板标签中的内容插入模板中，如上面例子中的

标签
props：包含了从父亲传下来的数据。required 表示这个数据是必须存在的（父亲必须传下来这个数据）， default则定义了没接受到这个数据时的默认值。
可以看到上面例子中标签中的 name 属性和 selected 属性的值传入到了模板中。
data：和实例中的 data 一样，但注意此时必须定义为函数形式并包含 return。
生命周期钩子：与 data 一样必须定义为函数。
emit：子组件可以通过 emit 函数向父组件传递事件。父组件使用 v-on 监听到时间后便可执行相应操作。上面的例子中, 通过传递`'listenRe'`，当 `tabs` 听到之后，便会执行 `reverseMessage`。

2.6 通信

Vue 使用 axios 和服务器进行通信。

import axios from 'axios'
Vue.prototype.$http = axios

加入上述代码后即可在 Vue 实例中使用：

this.$http

获得 axios 对象，使用 axios 的相关API。
有关 axios，可参考 axios github

Vue极简快速入门手册