Vue组件开发分享
2016-07-25 17:28
495 查看
在开始本文之前,你可能需要先了解以下相关内容:
Vue.js 一款高性能轻量化的MVVM框架
Webpack 前端模块化代码构建工具
忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上:
1、定义需要使用的数据及类型
2、在合适的时机更新数据
3、在模板上绑定数据与视图的映射关系
4、开放对外调用接口
这里引入weui样式作为组件全局默认样式。
name:组件名称,默认作为使用组件的标签名
props:组件需要使用的数据定义,包括数据类型与默认值。这些数据可以在使用组件时由父级传入。
也就是说,props里面的这些属性,外部在使用的时候都是可以自行进行定义。
data:组件内部私有数据,也就是不需要对外暴露的值。比如这里的用户搜索时输入的关键字。
methods:事件响应方法。这里主要实现当用户选择对应子项时,将选择的数据进行事件派发,交由父级进行逻辑处理。
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中的方法,用户选择对应子项后,组件进行事件派发,将选择的数据上报给父级进行处理。
另外一个是公用样式,外部可以覆盖修改。主要是为了外部在使用时自定义过渡动画时,需要额外定义动画css。
![](/download/attachments/16582200/QQ20160706-0@2x.png?version=1&modificationDate=1467793401000&api=v2)
JS
引入并使用vue-search组件
events中定义对使用的组件进行响应的事件,这里事件名与组件内定义的派发事件名称保持一致。如果当前模块有自己的方法,请在methods中实现。
HTML模板
引入组件,并定义相关需要传入的数据项。
感谢 vue-loader 让上述变成可能。
因此我们只需要在webpack中为vue文件配置对应的加载器即可:
{test: /\.vue/, loader: "vue" }
这样一方面可以让开发更高效,另外一方面让开发调试过程变成相对简单。
其二,使用MVVM框架并不代表原生JS操作DOM,以及事件模型等这些基础知识就不重要。
其实不然,所有框架都是使用原生JS开发的,只有对原生JS有足够深的了解,才能更好的掌握MVVM框架。
最后请大家思考一个问题:
刚才组件的实现中(第14行),我们将点击事件绑定在了每一个item上,那如果我们的item足够多的话,是不是等于也要绑定N多次事件?最终的事件执行效率能高吗?
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。
使用方法
![](/download/attachments/16582200/QQ20160706-0@2x.png?version=1&modificationDate=1467793401000&api=v2)
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多次事件?最终的事件执行效率能高吗?
相关文章推荐
- 跟我学Android UI高级之十五碎片Fragment
- 跟我学Android UI高级之十五碎片Fragment
- 跟我学Android UI高级之十五碎片Fragment
- c# 根据枚举Value 获得名称
- Wiggle Subsequence
- 使用EasyUI,关于日期格式的文本框按照正常方式获取不到值的问题
- textAligment、contentVerticalAlignment、contentHorizontalAlignment 和 contentMode 的对比
- 精确获取时间(QueryPerformanceCounter)
- 如何在MenuItem中添加icon图标
- 【maven 报错】maven项目执行maven install时报错Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode)
- poj 2299 Ultra-QuickSort (树状数组求逆序数)
- Request获取项目决定路径
- POJ 3071 Football—概率DP-conquer sea博客
- ServletActionContext.getRequest().getSession() 和 ActionContext.getContext().getSession()
- HBuilder标题栏如何穿标题呢
- 修改UITextfield的Placeholder字体的颜色
- HDU 5749 Colmerauer
- poj 2127 Greatest Common Increasing Subsequence
- 【IOS】UITableView固定headerView的方案
- Volley学习(三)ImageRequest、ImageLoader、NetworkImageView源码简读