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多次事件？最终的事件执行效率能高吗？
以上是 Vue组件开发分享 的全部内容， 来源链接： utcz.com/z/377822.html
