Vue组件开发分享

在开始本文以前，你可能须要先了解如下相关内容：

Vue.js  一款高性能轻量化的MVVM框架

Webpack  前端模块化代码构建工具

 

Vue组件介绍

基于vue.js高效的双向数据绑定特性，让咱们在开发高可用组件时能够更加专一于数据逻辑开发；

忘记DOM操做，忘记事件绑定，让开发的专一力集中于数据上：

一、定义须要使用的数据及类型

二、在合适的时机更新数据

三、在模板上绑定数据与视图的映射关系

四、开放对外调用接口

 

代码

https://github.com/xiaoyunchen/vue-search 

 

 

代码详解

script

组件逻辑脚本实现。详细配置属性含义请参考：http://cn.vuejs.org/guide/components.html

这里引入weui样式做为组件全局默认样式。

name：组件名称，默认做为使用组件的标签名

props：组件须要使用的数据定义，包括数据类型与默认值。这些数据能够在使用组件时由父级传入。

也就是说，props里面的这些属性，外部在使用的时候都是能够自行进行定义。

data：组件内部私有数据，也就是不须要对外暴露的值。好比这里的用户搜索时输入的关键字。

methods：事件响应方法。这里主要实现当用户选择对应子项时，将选择的数据进行事件派发，交由父级进行逻辑处理。

 

template

组件模板定义，除了DOM结构定义之外，还包括模板与数据的绑定方式。

v-show：绑定组件的show值，当show为true时，组件才会显示（display:block);

transition：组件过渡切换动画模式，这里请参考 http://cn.vuejs.org/guide/transitions.html 这里定义的过渡动画，须要在css中自行实现。组件内部已经默认实现了slide切换动画。

第3行：v-on:click="show=false"  这里为组件遮罩层绑定了响应事件，简单的将show的值改成false，vue会自动根据双向数据绑定特性将组件隐藏，无需咱们进行操做。

第9行：绑定输入框对应的model：query，以及placeholder值。

第10行：v-show定义这个清除按钮的显示条件：当输入的值长度大于0时。

另外也定义了清除按钮的功能，将query值设置为空，一样的，咱们无需进行DOM操做。

第13-16行：v-for：根据传入的数组数据生成选项列表，同时使用了vuejs的过滤器，根据query字段进行数据过滤。

另外，这里还定义了最大显示条数limit。

v-text：定义了咱们须要显示的对象属性值

v-on:click="chooseItem(item)"：对应script中的方法，用户选择对应子项后，组件进行事件派发，将选择的数据上报给父级进行处理。

 

style

这里有两个style标签，一个带有scoped属性，表明这些样式为组件内部单独使用，避免因重名的问题致使与外部样式重叠。

另一个是公用样式，外部能够覆盖修改。主要是为了外部在使用时自定义过渡动画时，须要额外定义动画css。

 

使用方法

JS

• 引入并使用vue-search组件
• events中定义对使用的组件进行响应的事件，这里事件名与组件内定义的派发事件名称保持一致。若是当前模块有本身的方法，请在methods中实现。

HTML模板
引入组件，并定义相关须要传入的数据项。

 

代码构建

咱们的vue文件格式进行自定义组件开发，因此在代码构建时须要对vue格式的文件进行解析，而后交由webpack进行模块化打包。

感谢 vue-loader 让上述变成可能。

所以咱们只须要在webpack中为vue文件配置对应的加载器便可：

{test: /\.vue/, loader: "vue" }

 

再说两句

MVVM的魅力就在于屏蔽了DOM操做，解放前端开发创造力，将开发专一力集中在数据的变化过程上来。

这样一方面可让开发更高效，另一方面让开发调试过程变成相对简单。

 

其二，使用MVVM框架并不表明原生JS操做DOM，以及事件模型等这些基础知识就不重要。

其实否则，全部框架都是使用原生JS开发的，只有对原生JS有足够深的了解，才能更好的掌握MVVM框架。

最后请你们思考一个问题：

刚才组件的实现中（第14行），咱们将点击事件绑定在了每个item上，那若是咱们的item足够多的话，是否是等于也要绑定N屡次事件？最终的事件执行效率能高吗？