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 ...
随机推荐
- 搭建代理服务器时的笔记,request使用笔记
request 请求笔记: 1.opation中使用form字段传参 对应 content-type': 'application/x-www-form-urlencoded',如果想要content ...
- KITTI数据集
目的 使用雷达点云提供的深度信息 如何实现 将雷达的三维点云投影到相机的二维图像上 kitti数据集简介 kitti的数据采集平台,配置有四个摄像机和一个激光雷达,四个摄像机中有两个灰度摄像机,两个彩 ...
- VS 编译总是出现错误: "LC.EXE 已退出,代码为-1"
最近在开发CS的一个项目时,编译总是出现错误: "LC.EXE 已退出,代码为-1" 解决方法一:用记事本打开*.licx,里面写的全是第三方插件的指定DLL,删除错误信息,保存, ...
- docker的简单操作和端口映射
一:简介 Docker镜像 在Docker中容器是基于镜像启动的 镜像是启动容器的核心 镜像采用分层设计,最顶层为读写层 使用快照COW技术,确保底层不丢失 通过ifconfig(ip a)来查看d ...
- Chrome DevTools的使用
一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手 ...
- css3有哪些新特性?
新选择器,属性选择器.伪类选择器.层次选择器... 圆角属性border-radius font-face加载服务器端的字体 多列布局column 阴影shadow 弹性盒flex 过渡transit ...
- Linux下进程间通信方式——pipe(管道)
每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程A把数据从用户空间拷到内核缓冲区,进程B再从内核缓冲区把 ...
- PATB1009说反话
这里有一点需要注意的就是,PAT里面是禁用gets函数的,所以要换成一个替代函数 那就是下面这个: //这个是定义一个字符串数组 char str[90]; //需要被替代的函数 gets(str) ...
- Android 10 终于来了!增加了不少新特性
前言 Android 10 正式发布了,根据官网的介绍,聚焦于隐私可控.手机自定义与使用效率,此版本主要带来了十大新特性: image 智能回复 使用机器学习来预测你在回复信息时可能会说些什么,这 ...
- vue本地静态图片的路径问题解决方案
不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...