下午班
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
