好久未见的测试运维试听课总结：
在这周三的测试运维试听课程中，芒果给大家介绍了自动化测试平台开发之前端开发——Vue，这里我们来做个小总结。
前后端分离
互联网高速发展，各种前端平台层出不穷，Jsp搞定所有的时代一去不复返，前后端分离是大驱之势，芒果想原因大概是因为这么几种：
第一，迭代速度越来越快，并行开发必不可少，加上Mock和Swagger等的加持，双方互不影响，双赢；
第二，某些开发表示：前端的JS没准还好，html的元素也好搞定，CSS是什么鬼，为什么有那么多属性，我又不是美工，只想好好写我的数据处理、逻辑判读好么？
第三，毕竟前端还是便宜点，一个贵点的后台开发，加上一个便宜点的前端开发，好歹能平衡一下呢~
所以，在我们的自动化测试平台中，也越来越多的人选择使用前后端分离的，让擅长的人做擅长的事吧，让我们擅长数据、逻辑之类的测试去写个后台，前端页面交给审美能力、布局能力更好的测试去做吧~
Vue介绍
谈到前端的后，除了三剑客——Html、CSS和JS这些基础，为了更高效的编码使用优秀的前端框架是必不可少的了，这里芒果给大家推荐我们华人前端大神尤雨溪的——Vue。
Vue 是一套用于构建用户界面的渐进式前端开发框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，既能搞定简单的html页面，也能轻松搞定单页面应用，大型的应用也不在话下。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
关于Vue的基础，芒果在前面的文章中已经给大家做了个大概的介绍，今天总结的内容是关于Vue的组件
关于Vue的基础介绍请查看：
进阶的JavaScript-Vue
后端开发：
Python web 开发之初识Django
Vue组件-基本使用
在前面的文章中，我们用到的都是关于Vue的实例，但是光靠这些实例来搞定我们的整个前端显然是重复度太高的工作，所以使用可复用的Vue实例肯定是必不可少的——组件就是可复用的Vue实例了。
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。可以将组件进行任意次数的复用，各个组件相互独立，每用一次组件，就会有一个它的新实例被创建。
我们先来看一个简单的示例：
代码语言：javascript复制 <!-- 实现一个带计算点击次数的button组件 -->
<div id="app">
<h1>Vue 组件基本使用：</h1>
<button-counter title="button 1:"></button-counter><br/><br/>
<button-counter title="button 2:"></button-counter><br/>
</div>
<br/>
<script type="text/javascript">
// 定义一个名为 button-counter 的新组件
Vue.component("button-counter",{
props: ["title"],
data: function(){
return {
count: 0
}
},
template: "<button v-on:click='count '>{{ title }}点击了 {{ count }} 次!</button>",
})
var app = new Vue({
el: '#app',
data: {}
});
</script>在上面的示例中，我们可以使用定义好的button-counter实现多个带计数器的按钮实例。
Vue组件-数据传递
在上面利用实现多个实例的过程中，似乎没有考虑到各个组件中，如果有各自不同的属性值，或者数据的情况，所以我们需要能传递数据给组件，这个时候我们可以通过prop给组件传递数据，在组件上注册一些自定义的属性。
还是一个简单的示例：
代码语言：javascript复制<!-- 传递一组name给组件，给button命名 -->
<div id="app-1">
<h1>Vue 组件使用-prop:</h1>
<div-component v-for="name in names" v-bind:key="name.id" v-bind:name="name.name"></div-component>
</div>
<br/>
<script type="text/javascript">
// 定义一个名为 div-component 的新组件
Vue.component("div-component",{
props: ["id","name"],
data: function(){
return {
count: 0
}
},
template: "<div><button v-on:click='count '>点击</button><p>[{{name}}]被点击了{{count}}次！</p></div>",
})
var app1 = new Vue({
el: '#app-1',
data: {
names: [
{ id: 1, name: 'ButtonA' },
{ id: 2, name: 'ButtonB' },
{ id: 3, name: 'ButtonC' }
],
}
});
</script>在上面的示例中，我们使用v-for指令实现了三个div组件的实例，并且使用了prop和v-bind指定传递了按钮的名称给组件。
Vue组件-事件监听
在我们开发组件时，它的一些功能可能要求我们和父级组件进行沟通。
Vue 实例提供了一个自定义事件的系统来解决这个问题：
父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件；
同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件。
继续上面的示例进行扩展：
代码语言：javascript复制 <!-- 使用$emit方法传入事件名称来触发父组件的事件log-count -->
<div id="app-2" >
<h1>Vue 组件使用-事件监听:</h1>
<div-counter @log-count='logCount'></div-counter>
</div>
<script type="text/javascript">
Vue.component("div-counter",{
data: function() {
return {
count: 0
}
},
template: `
<div>
<h3>请点击按钮:</h3>
<button v-on:click='clickBtn'>点击</button>
<p>你点击按钮 {{ count }} 次！</p>
</div>
`,
methods:{
clickBtn: function(){
this.count ;
this.$emit("log-count",this.count);
}
}
})
var app2 = new Vue({
el: '#app-2',
data: {
},
methods:{
logCount:function(count){
console.log(count);
}
}
});
</script>在上面的示例中，我们在子组件中使用clickBtn函数来响应点击事件，在clickBtn函数中调用$emit方法触发一个log-count事件，并在父组件中使用v-on指令来绑定logCount函数。
