下午班

1.Vue.js 是什么

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

2.入门手册

2.1 使用Vue

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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：动态绑定属性。
下面是一个例子：

<div id="root">
    <ul>
        <li v-for="task in tasks"> {{ task.name }} </li>
    </ul>
    <input v-model="message"></input>
    <button v-if="message == 'Hello'">v-if</button>
    <button v-show="message != 'Hello'">v-show</button>
    <button v-on:click="reverseMessage">reverse</button>
    <button v-bind:class="{ active: message == 'Hello' }">v-bind</button>
</div>

结果如下：

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

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

<button @click="reverseMessage">reverse</button>
<button :class="{ active: message == 'Hello' }">v-bind</button>

2.5 组件

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

下面是一个组件的例子：

<tabs v-on:listenRe="reverseMessage">
  <tab name="About Us" :selected="true">
      <h1>Here is the content for the about us tab.</h1>
  </tab>
</tabs>

Vue.component('tab', {
    template: `
        <div v-show="isActive"><slot></slot></div>
    `,
    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 文件中所有模板标签替换为这里定义的内容。
如 <tab></tab> 会被替换为这里的模板内容
可以用 ' ' 包含单行的模板，也可以用 ` ` 包含块级模板。
slot：模板中的<slot></slot>会将模板标签中的内容插入模板中，如上面例子中的 <h1> 标签
props：包含了从父亲传下来的数据。required 表示这个数据是必须存在的（父亲必须传下来这个数据）， default则定义了没接受到这个数据时的默认值。
可以看到上面例子中 <tab> 标签中的 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