自动化测试平台前端开发-Vue组件 / 开普饭

时间主题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 根实例中，把这个组件作为自定义元素来使用。可以将组件进行任意次数的复用，各个组件相互独立，每用一次组件，就会有一个它的新实例被创建。我们先来看一个简单的示例： <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给组件传递数据，在组件上注册一些自定义的属性。还是一个简单的示例： <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 方法并传入事件名称来触发一个事件。继续上面的示例进行扩展： <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的实例、事件监听、组件注册、单文件组件等内容。

自动化测试平台前端开发-Vue组件

相关推荐