时间主题
3.25(周三)20:00自动化测试平台前端开发-Vue组件
好久未见的测试运维试听课总结:
在这周三的测试运维试听课程中,芒果给大家介绍了自动化测试平台开发之前端开发——Vue,这里我们来做个小总结。
前后端分离
互联网高速发展,各种前端平台层出不穷,Jsp搞定所有的时代一去不复返,前后端分离是大驱之势,芒果想原因大概是因为这么几种:
第一,迭代速度越来越快,并行开发必不可少,加上Mock和Swagger等的加持,双方互不影响,双赢;
第二,某些开发表示:前端的JS没准还好,html的元素也好搞定,CSS是什么鬼,为什么有那么多属性,我又不是美工,只想好好写我的数据处理、逻辑判读好么?
第三,毕竟前端还是便宜点,一个贵点的后台开发,加上一个便宜点的前端开发,好歹能平衡一下呢~
所以,在我们的自动化测试平台中,也越来越多的人选择使用前后端分离的,让擅长的人做擅长的事吧,让我们擅长数据、逻辑之类的测试去写个后台,前端页面交给审美能力、布局能力更好的测试去做吧~
Vue介绍
谈到前端的后,除了三剑客——Html、CSS和JS这些基础,为了更高效的编码使用优秀的前端框架是必不可少的了,这里芒果给大家推荐我们华人前端大神尤雨溪的——Vue。
Vue 是一套用于构建用户界面的渐进式前端开发框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,既能搞定简单的html页面,也能轻松搞定单页面应用,大型的应用也不在话下。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
关于Vue的基础,芒果在前面的文章中已经给大家做了个大概的介绍,今天总结的内容是关于Vue的组件
关于Vue的基础介绍请查看:
进阶的JavaScript-Vue后端开发:
Python web 开发之初识DjangoVue组件-基本使用
在前面的文章中,我们用到的都是关于Vue的实例,但是光靠这些实例来搞定我们的整个前端显然是重复度太高的工作,所以使用可复用的Vue实例肯定是必不可少的——组件就是可复用的Vue实例了。
我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。可以将组件进行任意次数的复用,各个组件相互独立,每用一次组件,就会有一个它的新实例被创建。
我们先来看一个简单的示例:
<!-- 实现一个带计算点击次数的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给组件传递数据,在组件上注册一些自定义的属性。
还是一个简单的示例:
<!-- 传递一组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 方法 并传入事件名称来触发一个事件。
继续上面的示例进行扩展:
<!-- 使用$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函数。
后续的啰啰嗦嗦
当然除了课程内容除了这些基本的介绍,芒果还给大家介绍了Vue的实例、事件监听、组件注册、单文件组件等内容。