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组件开发分享的更多相关文章
- vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
- Vue组件开发实例(详细注释)
Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- vue组件开发练习--焦点图切换
1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- 三: vue组件开发及自动化工具vue-cli
一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...
- vue 开发系列(三) vue 组件开发
概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...
- Vue组件开发实践之scopedSlot的传递
收录待用,修改转载已取得腾讯云授权 导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效.在使用Vue开发我们的vhtm ...
- Vue 组件开发demo
1.代码地址 github:https://github.com/MengFangui/VueComponentDemo- 2.关键代码 (1)main.js //引入vue import Vue f ...
随机推荐
- CMD窗口恢复默认设置
CMD全称Command,是Windows系统下自带的类DOS系统,在日常工作中,有时候设置会损害CMD窗口的默认,导致浏览效果不佳,这时候需要有办法恢复到默认设置.在注册表中删除以下文件夹即可:HK ...
- KDiff3使用指南
http://kdiff3.sourceforge.net/ KDiff3 is a diff and merge program that compares or merges two or thr ...
- LRU Algorithm Gym - 102394L (HASH)
LRU Algorithm \[ Time Limit: 1000 ms\quad Memory Limit: 524288 kB \] 题意 给出 \(n\) 个数字和 \(m\) 次查询. 每次询 ...
- git crate&query&delete tag(九)
root@vmuer-VirtualBox:/opt/myProject# git log --pretty=oneline0169b7a1c4bccb47e76711f353fd8d3864bde9 ...
- EasyUI前后端分离
陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色.Vs前后端分离 美工 ...
- 使用mxnet实现卷积神经网络LeNet
1.LeNet模型 LeNet是一个早期用来识别手写数字的卷积神经网络,这个名字来源于LeNet论文的第一作者Yann LeCun.LeNet展示了通过梯度下降训练卷积神经网络可以达到手写数字识别在当 ...
- 使用Java将搜狗词库文件(文件后缀为.scel)转为.txt文件
要做一个根据词库进行筛选主要词汇的功能,去搜狗下载专业词汇词库时,发现是.scel文件,且通过转换工具(http://tools.bugscaner.com/sceltotxt/)转换为txt时报错如 ...
- odoo13 searchpanel tree
<record id="view_department_filter" model="ir.ui.view"> <field name=&qu ...
- Thinkphp中的系统变量
Action中使用的系统常量 THINK_PATH // ThinkPHP 系统目录 APP_PATH // 当前项目目录 APP_NAME // 当前项目名称 MODULE_NAME //当前模块名 ...
- Mysql 命令 load data infile 权限问题
[1]Mysql命令load data infile 执行权限问题 工作中,经常会遇到往线上环境mysql数据库批量导入源数据的场景. 针对这个场景问题,mysql有一个很高效的命令:load dat ...