Vue组件开发分享

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

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

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

 

Vue组件介绍

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

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

1、定义需要使用的数据及类型

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

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

4、开放对外调用接口

 

代码

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多次事件？最终的事件执行效率能高吗？