开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
博客专区 - 开源中国社区

精彩阅读

  • 最新推荐

  • 今日热门

  • 本周热门

  • 每日一博

  • 最新文章

ECMAScript6词法

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,它于2015 年 6 月正式发布。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。ECMAScript实现还有Jscript和ActionScript。
周胜 发布于 12小时前 阅读 46

入门到放弃node系列之网络模块(一)

### 前言 本文首发公众号【一名打字员】 上一次相信大家都基本了解node的用法了,有做功课的童鞋肯定回去温习了一下js的语法。这些年来js发展很快,出了很多类似许多vue、react、node等等众所周知的玩意儿,对应的社区配套也越来越完善。好的,接下来我们补充一下node的内置网络模块,顺带复习一下网络编程的相关知识,毕竟“技多不压身”。 ### API概览 其实nodejs一开始就是帮助编写高性能的web服务器,在这里简单介绍一下相关的API,好让大家知道什么情况下该使用哪个API,具体使用的方法还是去[官网][1]上瞄一下,毕竟官网已经解释的不能再详细了。我们将会介绍 - HTTP - HTTPS - URL - QUERY STRING - ZLIB - NET 今天我们先主要介绍一下HTTP与HTTPS。 - HTTP与HTTPS HTTP与HTTPS模块基本上都一样,唯一不同的地方就是HTTPS访问我们通常是需要证书的嘛,所以需要单独处理一下SSL证书。在这里先介绍一下HTTP模块,使用HTTP模块有两种用途,一是作为服务端,创建一个HTTP服务器,监听客户端并响应。二是作为客户端,进行HTTP请求,获取服务端信息。 说到HTTP请求,不得不插一句,相信很多人对其既陌生又熟悉。它大致上分为请求头和请求体,也就是我们常说的Request hea...
拯救世界的小安安 发布于 2天前 阅读 342 评论 1 点赞 1

LODOP!LODOP!!LODOP!!!(喊三遍啊喊三遍~)

公司买了一套LODOP的打印,没办法,那就用呗,开始还没理会,后面因为特殊原因一接触,才发现一入LODOP深似海,从此掉入“钱”眼里。(钱么,数的都是数字,咱也是数的数字,看下面的截图,你就知道此处应该要省略几万字~~) 上图第一张,出来的第一版打印的JS代码(部分): 完了,写完一个以后,眼睛看哪里晃来晃去的都是数字~  ***de,全是各种 TOP LEFT  WIDTH HEIGHT  必须的想想办法,吃了个中饭好好理了理思绪,想了想我要达到的目的: 摆脱数字,这么数来数去的计算位置,不行,效率太低下,应该要全部自动的生成,对于我么这种开发工(ma)程(nong)师来说不应该把时间浪费在这种事情上面(说白了,其实就是懒~) 对象化,上图那种代码,写位置不好算不说,写完了以后要维护,也是各种头大,包你一打开先要傻眼一会儿,咱也要面向对象编程的,是不?这才是咱工(ma)程(nong)师应该干的事 有对象那肯定就得有结构,于是乎根据一餐中饭想下来的思路,白板上画出来了一个版草稿 (请忽略左上角那块抹布,请忽略字写得有点丑~,请。。。) 后面事实证明,上面这张图确实只是一餐中饭拍脑袋临时拍出来的而已,不过大概的框架结构就出来了,回头拿笔细化梳理了一下...
Alfie 发布于 2天前 阅读 446 评论 7 点赞 1 打赏 1

04、Vue.js---自定义过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
秋季长青 发布于 2天前 阅读 138

03、Vue.js---自定义指令

除了核心功能默认内置的指令,Vue 也允许注册自定义指令。
秋季长青 发布于 3天前 阅读 164 点赞 1

Angular4自制一个市县二级联动组件

最近遇到了不少问题,真的是命运多舛。Angular真是让人又爱又恨的框架,恨的是资料太少,遇到问题无从下手。爱的是许多其他框架难以做到的功能,angular却可以轻松做到。 话不多说,最近遇到了一个旧项目改造的问题。拿到前同事做的页面效果: 第一眼就看到了这三个下拉框,按捺不住好奇心的我点了点。原来,第一个下拉框可以选择市属和省属,如果选择市属,那么后面就会出现市、县级两个下拉框,如果是省属,那就隐藏了,这个挺容易的。然后就是要选择市之后,区下拉框要有对应区县选项。emmmm,很典型的二级联动,不过既然分析完了思路,那就开始做吧!首先呢,数据肯定要从后端同事那里拿,调用他的接口把数据填充进去。看看数据是什么样子的: 数据略多,就不全部贴出来了。把实体bean创建一下, Typescript code // 市级实体类 export class City { // 市级id cityId: string; // 所属类型(0.市属 1.省属) cityType: number; // 市级名称(可选属性,若cityType为1时,可不填) cityName: string; // 所属区县 counties?: Array<Country>; } // 区县级实体类 export class Country { // 区县id countryId: string; ...
落青 发布于 4天前 阅读 313 评论 5 点赞 1

Vue.js---表单标签中的单选按钮、复选按钮和下拉列表的取值问题

表单标签取值问题中,单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。
秋季长青 发布于 4天前 阅读 232

nginx-http-concat资源文件合并模块

网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用nginx-http-concat nginx模块简单的把这个问题解决好。 安装模块
peachyy 发布于 4天前 阅读 116

02、Vue.js---指令

介绍Vue.js常用指令以及相关知识。
秋季长青 发布于 5天前 阅读 221

Angular4订阅(Subscribe)与取消

声明 以下内容仅仅为个人在自学过程中的理解,若有错误,麻烦您在评论区指出,我将及时更正,方便其他人,谢谢! 订阅(Subscribe) 写过js的都知道,subscribe在很多地方都能看到它的身影,并且起到了很重要的作用。侦听http请求的返回,页面间传递参数… …说起订阅,就不能不提Observable,说起Observable就不能不提Subscribable… …等等,扯太远了。回到正题,subscribe是Observable类下的一个函数。从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是在跨页面中,举个栗子: TypeScript code // 父页面 export class SupComponent { id: string; // 父组件构造器 constructor(private router: Router) { // 设置id this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP'; } // 进入详情页 detail(id: string) { // 携带id跳转至详细页 this.router.navigate(['sub', id]); } } // 子页面 export class SubComponent implements OnInit{ // 子组件构造器 constructor(private activated: ActivatedRoute) { } // 子组件初始化钩子 ng...
落青 发布于 6天前 阅读 137 评论 2

Vue.js---事件冒泡和默认事件处理

浅谈事件冒泡和默认事件在 js 和 vue.js 表现和处理方法。
秋季长青 发布于 7天前 阅读 258 评论 2 点赞 1

2017 热门开源自动化测试框架优缺点对比

时间一晃已来到 2017 年的最后一个季度,TestProject 对比了在今年比较热门的 7 款开源自动化测试框架的优缺点,以帮助你选择适合自己的测试框架。 1. Robot Framework Robot Framework(RF)是用于验收测试和验收测试驱动开发(ATDD)的自动化测试框架。 基于 Python 编写,但也可以在 Jython(Java)和 IronPython(.NET) 上运行,提供跨平台支持(Windows、Linux 或 MacOS )。 优点: 通过使用关键字驱动测试(KDT)方法简化了自动化测试过程,方便测试人员创建易读的测试。 测试数据语法简单易用。 生态系统丰富。由各种通用测试库和工具组成,这些工具都是作为独立项目开发的。 具有高度可扩展性。 可通过 pabot 或 Selenium Grid 执行并行测试。 缺点: 自定义 HTML 报告较为麻烦。 如果是针对大范围的库和扩展的 KDT 自动化测试,建议使用此跨平台框架。如果想要添加新的关键字(通过 RF 测试库 API ),需要具备 Java / Python / C 语言的基础知识。 2. JUnit JUnit 是一款针对 Java 应用的单元测试框架,用于编写和运行可重复的测试。 优点: 纯 Java 编写。 支持测试驱动开发(TDD)。 允许创建自己的单元测试用例套件。 能很好地与其他工具(如 Maven )和 ...
编辑部的故事 发布于 1周前 阅读 3771 评论 6 点赞 2

用koc-loader写类Vue的Knockout单文件组件

廉颇老矣,尚能饭否?
Zaaksam 发布于 1周前 阅读 109 评论 1

前端编年史

# 前言 ------   笔者学习一门知识有一个习惯,就是会先去了解这门知识的一个大致历史框架,而后再学习具体的知识内容。这样做有以下两个目的: 1.可以增添兴趣,对于越枯燥的知识越是有效。 2.可以知道这门知识的来龙去脉,可以知道依托于这门知识,自己将会去向何方。毕竟古人也说过,以史为镜可以知兴替嘛。   然而,查阅无数资料之后,笔者绝望地发现没有一篇完整地准确地描述前端历史的文章可以借鉴,因此萌生了自己动手写一篇一直持续维护的前端编年史以便查阅。 # 正文 ------ | 日期 | 事件 | | ---------- | ---------------------------------------- | | 1989 | html正式诞生,由物理学家蒂姆·伯纳斯·李为了方便学术文档的分享而创造,这也是前端的起始时间。 | | 1994.10.13 | Mosaic Netscape 0.9正式发布,一代浏览器霸主开始展露它的锋芒。 | | 1994.10 | Web技术领域最具权威和影响力的国际中立性技术标准机构正式成立,创立者就是html的创造者大神蒂姆·伯纳斯·李。 | | 1995.05 | 前端中最重要的成员JavaScript(原名LiveScript)诞生,创造者是网景的布兰登·艾奇。他仅仅用了10天的时间就完成了这项创举。 | | 1995.12.24 | html2.0标准由IETF正...
老司机带你撸代码 发布于 1周前 阅读 311 评论 7 点赞 3 打赏 1

Vue之父子兄弟组件间通信

##Vue之父子兄弟组件间通信 @(JavaScript)[学习笔记] ------ [TOC] ------ ### 导言 最近在写个人简历网页版遇到一个问题,想要将一个组件的dom结构传递给其他兄弟组件,然后进行dom操作,不知怎么在其间传递数据,查阅资料,找到解决方法,现记录如下,整理思路加强学习,同时便于他人参考 **创建一个App.vue作为父组件** ```javascript ``` **创建字组件A** ```javascript ``` **创建子组件B** ```javascript ``` ### 1. 父组件向子组件传递消息 父组件向子组件传数据较为简单,子组件用props接收 **父组件App** ```javascript ``` **子组件A** ``` 我是组件A,接收到消息:{{msgApp}} ``` 运行结果如图 ![enter image description here](http://oqhziw7jv.bkt.clouddn.com/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A11.jpg) ### 2. 子组件向父组件传递数据 子组件向父组件传递数据用`this,$emit()` **子组件B** ```javascript ``` **父组件App** ```javascript ``` 结果如下 ![enter image description here](http://oqhziw7jv.bkt.clouddn.com/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A12.jpg) **还有另一种方法与兄弟组件通信方式相同用e...
阿浩yohann 发布于 1周前 阅读 126

基于HTML5的WebGL经典3D虚拟机房漫游动画

3D动画宣传片将 3D 动画、特效镜头、企业视频、照片、未来前景等内容通过后期合成、配音、解说形成一部直观、生动、喜闻乐见的高品位的企业广告宣传片,让社会不同层面的人士对企业产生正面的、积极的、良好的印象,从而建立对企业的好感与信任,并信赖该企业的产品或服务。 现在 3D 发展地如此迅速也要感谢人类对于“现实”的追求,所以学好用好 3D 是未来成功必不可少的一部分。 本文例子的思路是进入一个机房参观,打开门的动作是再生动不过了, 再加上适当地转弯,基本上完全模拟了人在机房中参观的效果。还有一个好处就是,如果要演示给领导看而又不用操作,这种炫酷的效果领导一定会很满意!
xhload3d 发布于 1周前 阅读 301 点赞 2

vue2 子组件校验未通过如何通知父组件

vue2 子组件校验未通过如何通知父组件
黄威 发布于 1周前 阅读 108 评论 1

用vue做一个酷炫的menu

写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示   pic_1   pic2   pic_3      在线演示live demo 2.使用介绍         项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a. 首先在单文件组件里引入menu组件,导入common文件夹stylus里的menuConfig.stylus.        b.配置相应的参数             可选参数             * radius:default为100px,item距离menu的button的距离。             *  startAngle:defaut为0,item开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。            *  endAngle:default为315,最后一个item的角度。            *  itemNum:default为8             *  animationDuration:default为0.5s,每个item动画的执行时间             *  itemAnimationDelay:d...
MingSeng-W 发布于 2周前 阅读 5585 评论 18 点赞 17

聊聊keep-alive组件的使用及其实现原理

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue)。 在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](https://github.com/answershuto/learnVue/tree/master/vue-src)以及Vuex的注释[https://github.com/answershuto/learnVue/tree/master/vuex-src](https://github.com/answershuto/learnVue/tree/master/vuex-src),希望可以对其他想学习源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## keep-alive keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。 它提供了include与exclude两个属性,允许组件有条件地进行缓存。 具体内容可以参考[官网](https://cn.vuejs.org/v2/api/#keep-alive)。 ## 使用 ### 用法 ```html ``` 这里的component组件会被缓存起来。 ##...
染陌同学 发布于 2周前 阅读 40

React异常处理

在React 0.15版本及之前版本中,组件内的UI异常将中断组件内部状态,导致下一次渲染时触发隐藏异常。React并未提供友好的异常捕获和处理方式,一旦发生异常,应用将不能很好的运行。而React 16版本有所改进。本文主旨就是探寻React异常捕获的现状,问题及解决方案。
熊建刚 发布于 2周前 阅读 23

Node.js---05、node.js的三方模块之MySQL

本文简单介绍类第三方模块的使用步骤和数据库访问步骤,并且介绍了占位符和数据库连接池等技术,最后封装了一个连接数据的工具模块。
思儒编程 发布于 2周前 阅读 3

前端那些事之mongodb

前端那些事之mongodb
上官清偌 发布于 2周前 阅读 13

npm install -g @angular/cli 报error Unexpected end of input at 1:68552

错误信息如下: 179 silly pacote range manifest for autoprefixer@^6.5.3 fetched in 3075ms 180 silly resolveWithNewModule autoprefixer@6.7.7 checking installable status 181 http fetch GET 304 https://registry.npmjs.org/@schematics%2fangular 13568ms (from cache) 182 silly pacote range manifest for @schematics/angular@~0.0.30 fetched in 13571ms 183 silly resolveWithNewModule @schematics/angular@0.0.36 checking installable status 184 verbose stack SyntaxError: Unexpected end of input at 1:68552 184 verbose stack v-server.js"},"directories":{},"dist":{"shasum":"cbb6a0d3e7c8eb5453b3 184 verbose stack                                                                      ^ 184 verbose stack     at Object.parseJSON (/usr/lib/node_modules/npm/node_modules/pacote/node_modules/make-fetch-happen/node_modules/node-fetch-npm/node_modules/json-parse-helpfulerror/node_modules/jju/lib/parse.js:745:13) 184 verbose stack     at...
JennerLuo 发布于 2个月前 阅读 8

react学习笔记7:组件常用方法

react
透笔度 发布于 2个月前 阅读 7

WebStorm的下载与安装

百度搜索: 链接:http://www.jetbrains.com/webstorm/ 链接:http://www.jetbrains.com/student/ 学生免费授权计划 请从正规来源下载软件  WebStormIDE跟普通的代码编辑器的区别在于:   不仅可以编写代码,还提供编译打包、版本控制、自动构建以及调试等功能。 下载 1、在官网,点击Download下载 2、正在下载 3、下载完成 安装 1、双击 2、运行 3、Next 4、选择自己的安装路径,注意:安装路径不要有中文 5、选择创建桌面快捷方式, 6、Install 7、安装中,耐心等待,可能需要几分钟 8、Finish安装完成 启动 1、双击刚刚安装完成的WebStorm立即启动 2、选择Do not 3、点击Accept 4、选择“License server”,然后在输入框中输入 License server address 为: http://idea.iteblog.com/key.php,点击”Activate”按钮 有博友反馈该地址不行了。但本人亲测还是可以用的。可能是不太稳定了。 增加博友推荐的另外一个License Server地址。 http://idea.imsxm.com/ 5、启动页面 6、各种设置,根据自己爱好来   7、可创建项目了或者打开存在的 8、选择项目存放的位置 9、打开后画面 10、打印一个HelloWorld    ...
Jokeny 发布于 5小时前 阅读 1

LODOP!LODOP!!LODOP!!!(喊三遍啊喊三遍~)

公司买了一套LODOP的打印,没办法,那就用呗,开始还没理会,后面因为特殊原因一接触,才发现一入LODOP深似海,从此掉入“钱”眼里。(钱么,数的都是数字,咱也是数的数字,看下面的截图,你就知道此处应该要省略几万字~~) 上图第一张,出来的第一版打印的JS代码(部分): 完了,写完一个以后,眼睛看哪里晃来晃去的都是数字~  ***de,全是各种 TOP LEFT  WIDTH HEIGHT  必须的想想办法,吃了个中饭好好理了理思绪,想了想我要达到的目的: 摆脱数字,这么数来数去的计算位置,不行,效率太低下,应该要全部自动的生成,对于我么这种开发工(ma)程(nong)师来说不应该把时间浪费在这种事情上面(说白了,其实就是懒~) 对象化,上图那种代码,写位置不好算不说,写完了以后要维护,也是各种头大,包你一打开先要傻眼一会儿,咱也要面向对象编程的,是不?这才是咱工(ma)程(nong)师应该干的事 有对象那肯定就得有结构,于是乎根据一餐中饭想下来的思路,白板上画出来了一个版草稿 (请忽略左上角那块抹布,请忽略字写得有点丑~,请。。。) 后面事实证明,上面这张图确实只是一餐中饭拍脑袋临时拍出来的而已,不过大概的框架结构就出来了,回头拿笔细化梳理了一下...
Alfie 发布于 2天前 阅读 446 评论 7 点赞 1 打赏 1

入门到放弃node系列之网络模块(一)

### 前言 本文首发公众号【一名打字员】 上一次相信大家都基本了解node的用法了,有做功课的童鞋肯定回去温习了一下js的语法。这些年来js发展很快,出了很多类似许多vue、react、node等等众所周知的玩意儿,对应的社区配套也越来越完善。好的,接下来我们补充一下node的内置网络模块,顺带复习一下网络编程的相关知识,毕竟“技多不压身”。 ### API概览 其实nodejs一开始就是帮助编写高性能的web服务器,在这里简单介绍一下相关的API,好让大家知道什么情况下该使用哪个API,具体使用的方法还是去[官网][1]上瞄一下,毕竟官网已经解释的不能再详细了。我们将会介绍 - HTTP - HTTPS - URL - QUERY STRING - ZLIB - NET 今天我们先主要介绍一下HTTP与HTTPS。 - HTTP与HTTPS HTTP与HTTPS模块基本上都一样,唯一不同的地方就是HTTPS访问我们通常是需要证书的嘛,所以需要单独处理一下SSL证书。在这里先介绍一下HTTP模块,使用HTTP模块有两种用途,一是作为服务端,创建一个HTTP服务器,监听客户端并响应。二是作为客户端,进行HTTP请求,获取服务端信息。 说到HTTP请求,不得不插一句,相信很多人对其既陌生又熟悉。它大致上分为请求头和请求体,也就是我们常说的Request hea...
拯救世界的小安安 发布于 2天前 阅读 342 评论 1 点赞 1

2017 热门开源自动化测试框架优缺点对比

时间一晃已来到 2017 年的最后一个季度,TestProject 对比了在今年比较热门的 7 款开源自动化测试框架的优缺点,以帮助你选择适合自己的测试框架。 1. Robot Framework Robot Framework(RF)是用于验收测试和验收测试驱动开发(ATDD)的自动化测试框架。 基于 Python 编写,但也可以在 Jython(Java)和 IronPython(.NET) 上运行,提供跨平台支持(Windows、Linux 或 MacOS )。 优点: 通过使用关键字驱动测试(KDT)方法简化了自动化测试过程,方便测试人员创建易读的测试。 测试数据语法简单易用。 生态系统丰富。由各种通用测试库和工具组成,这些工具都是作为独立项目开发的。 具有高度可扩展性。 可通过 pabot 或 Selenium Grid 执行并行测试。 缺点: 自定义 HTML 报告较为麻烦。 如果是针对大范围的库和扩展的 KDT 自动化测试,建议使用此跨平台框架。如果想要添加新的关键字(通过 RF 测试库 API ),需要具备 Java / Python / C 语言的基础知识。 2. JUnit JUnit 是一款针对 Java 应用的单元测试框架,用于编写和运行可重复的测试。 优点: 纯 Java 编写。 支持测试驱动开发(TDD)。 允许创建自己的单元测试用例套件。 能很好地与其他工具(如 Maven )和 ...
编辑部的故事 发布于 1周前 阅读 3771 评论 6 点赞 2

04、Vue.js---自定义过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
秋季长青 发布于 2天前 阅读 138

ECMAScript6词法

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,它于2015 年 6 月正式发布。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。ECMAScript实现还有Jscript和ActionScript。
周胜 发布于 12小时前 阅读 46

用vue做一个酷炫的menu

写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示   pic_1   pic2   pic_3      在线演示live demo 2.使用介绍         项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a. 首先在单文件组件里引入menu组件,导入common文件夹stylus里的menuConfig.stylus.        b.配置相应的参数             可选参数             * radius:default为100px,item距离menu的button的距离。             *  startAngle:defaut为0,item开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。            *  endAngle:default为315,最后一个item的角度。            *  itemNum:default为8             *  animationDuration:default为0.5s,每个item动画的执行时间             *  itemAnimationDelay:d...
MingSeng-W 发布于 2周前 阅读 5585 评论 18 点赞 17

在Windows下安装Node.js及环境配置

1.简介:简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。 2.下载安装: Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 看自己操作系统选择下载32位还是64位,下载好后双击安装包,出现如下图所示: 点击【Next】按钮 勾选复选框,点击【Next】按钮 修改好目录后,点击【Next】按钮 安装完后点击【Finish】按钮完成安装 至此Node.js已经安装完成,检测PATH环境变量是否配置了Node.js,默认已自动配置,如下图: 然后进行简单的测试安装是否成功了,后面还要进行环境配置,在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口,如下图: 安装完后的目录如下图所示: 此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西。 3.环境配置 说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行...
Jokeny 发布于 12小时前 阅读 16

JavaScript 开发人员需要知道的简写技巧

本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和高级篇两部分,分别进行介绍。   初级篇 1、三目运算符 下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。 const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } else { answer = 'less than 10'; } 简写为: const answer = x > 10 ? 'greater than 10' : 'less than 10';   2、循环语句 当使用纯 JavaScript(不依赖外部库,如 jQuery 或 lodash)时,下面的简写会非常有用。 for (let i = 0; i < allImgs.length; i++) 简写为: for (let index of allImgs) 下面是遍历数组 forEach 的简写示例: function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9   3、声明变量 在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时: let x; let y; let z = 3; 可以简写为: let x, y, ...
葡萄城控件技术团队 发布于 1个月前 阅读 1826 评论 6 点赞 15

AntV G2 分组柱状图和折线图混合画法

/** * Created by lqt on 2017/11/17. */ import React from 'react'; import createG2 from 'g2-react'; import {Stat,Frame} from 'g2'; class BarGraph extends React.Component { render() { const data = [ {"date":"2017-6","value":22.75,"type":"应收金额","rate":23.335}, {"date":"2017-6","value":23.44,"type":"已收金额","rate":23.335}, {"date":"2017-6","value":22.69,"type":"欠收金额","rate":23.335}, {"date":"2017-7","value":21.75,"type":"应收金额","rate":43.335}, {"date":"2017-7","value":33.44,"type":"已收金额","rate":43.335}, {"date":"2017-7","value":42.69,"type":"欠收金额","rate":43.335}, {"date":"2017-8","value":31.75,"type":"应收金额","rate":25.335}, {"date":"2017-8","value":35.44,"type":"已收金额","rate":25.335}, {"date":"2017-8","value":12.69,"type":"欠收金额","rate":25.335}, {"date":"2017-9","value":36.75,"type":"应收金额","rate":45.335}, ...
蜻蜓QT 发布于 6天前 阅读 18

nginx部署vue项目

使用nginx部署vue
上官胡闹 发布于 5天前 阅读 17

VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

前言 我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们可能在测试接口和真实接口之间频繁切换,让人十分恶心。 因此,我们有必要想办法解决这个问题。 本文是 Vue2+VueRouter2+webpack 构建项目实战  的后续文章。理解本文内容,需要VUE相关技术基础。 第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下: var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"' }) 好,我们在NODE_ENV下面增加一项,代码如下: var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"//192.168.1.8/api"' }) 然后,我们编辑prod.env.js文件, module.exports = { NODE_ENV: '"p...
JamesView 发布于 2天前 阅读 50

Angular 5 快速入门与提高

**一、概述** 尽管被称为`Angular5`,实际上它只是这个诞生于2012年的前端框架的的第四个版本: ![angular history](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/angular-history.png) 看起来差不多半年就发布一个新版本,不过实际上从重写的版本`2`开始,开发 接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。 在`5`这个新的版本中,`Angular`团队将改进重点放在以下特性方面: - 更易于构建渐进式`Web`应用 —— __P__rogressive __W__eb __A__pp - 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间 - 使物化设计组件兼容服务端渲染 `PWA`是`Google`提出的一个标准,旨在让Web应用在移动终端上获得媲美原生 应用的用户体验。一个`PWA`应用主要利用`Service Worker`和浏览器缓存来 提省交互体验,它不仅可以直接部署在手机桌面,而且可以离线应用: ![pwa](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/pwa.png) **二、引入angular环境** `Angular`推荐使用`TypeScript`来开发应用,这要求使用一个在线 编译器(`JIT`)实时编译代码,或者在开发期采用预编译器(`AOT`)提前编译代码。 为了避免这个繁琐的过程影...
笔阁 发布于 3周前 阅读 2398 评论 11 点赞 4

iView 发布后台管理系统 iview-admin,没错,它就是你想要的

![](https://user-gold-cdn.xitu.io/2017/10/18/2af80d0cae6cad353f62554c02d34c7c?imageView2/1/w/1304/h/734/q/85/interlace/1) ## 简介 iView Admin 是基于 Vue.js,搭配使用 [iView UI](https://github.com/iview/iview) 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。 没错,这就是大家期待已久的 admin 了,这么漂亮好用的系统,是不是可以给个 Star 鼓励一下开发者呢: **iView 码云:[https://gitee.com/icarusion/iview](https://gitee.com/icarusion/iview)** **iView Admin 码云:[https://gitee.com/icarusion/iview-admin](https://gitee.com/icarusion/iview-admin)** **iView GitHub:[https://github.com/iview/iview](https://github.com/iview/iview)** **iView Admin GitHub:[https://github.com/iview/iview-admin](https://github.com/iview/iview-admin)** ## 在线预览 [在线访问地址 https://iview.github.io/iview-admin](https://iview.github.io/iview-admin) 密码随意填,但要记住哦(不然使用锁屏功能时你就懵逼...
aresn 发布于 1个月前 阅读 1525 评论 3 点赞 4

用 Electron 打造 Win/Mac 应用,从「代码」到可下载的「安装包」,可能比你想得麻烦一点

我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地发行一款 Electron 产品」这一目标,还有很多工作需要做... 这是 Electron 系列文章的第二篇,这一篇文章将和大家分享我是怎么去构建**自动化的 Electron 开发构建工程**的,说白了,就是**怎么把敲的代码变成一个用户可以下载安装的包**,当然随着之后应用复杂度的提升和技术再选型,工程体系可能随时会重构或演进,但至少可以给大家一些参考,欢迎留言交流。
Stinson_Zhao 发布于 2周前 阅读 3014 评论 9 点赞 13

vue 指令基本使用大全

## 指令 - 解释:指令 (Directives) 是带有 `v-` 前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM ### 常用指令 - v-text - v-html - v-bind ### v-text - 解释:更新元素的 textContent ```html ``` ### v-html - 解释:更新元素的 innerHTML ```html ``` ### v-bind - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM - 语法:`v-bind:title="msg"` - 简写:`:title="msg"` ```html ``` ### v-on - 作用:绑定事件 - 语法:`v-on:click="say"` or `v-on:click="say('参数', $event)"` - 简写:`@click="say"` - 说明:绑定的事件从`methods`中获取 ```html ``` ### 事件修饰符 - `.stop` 阻止冒泡,调用 event.stopPropagation() - `.prevent` 阻止默认事件,调用 event.preventDefault() - `.capture` 添加事件侦听器时使用事件`捕获`模式 - `.self` 只当事件在该元素本身(比如不是子元素)触发时触发回调 - `.once` 事件只触发一次 ### v-model - 作用:在表单元素上创建双向数据绑定 - 说明:监听用户的输入事件以更新数据 ```html Message is: {{ message }} ``` ### v-for - 作用:基于源数据多次渲染元素...
不负好时光 发布于 1个月前 阅读 4171 评论 9 点赞 11

快速了解人工智能结晶之语音转换文字

科技解放生产力,人工智能的应用如今是大热,那么今天就来给各位介绍一下IBM在这方面的一个小的尝试,语音转换文字。咱们来看一看相较于传统的转换,结合Watson的IBM是如何做到让识别率飙升的。
IBM Bluemix

2017 热门开源自动化测试框架优缺点对比

时间一晃已来到 2017 年的最后一个季度,TestProject 对比了在今年比较热门的 7 款开源自动化测试框架的优缺点,以帮助你选择适合自己的测试框架。 1. Robot Framework Robot Framework(RF)是用于验收测试和验收测试驱动开发(ATDD)的自动化测试框架。 基于 Python 编写,但也可以在 Jython(Java)和 IronPython(.NET) 上运行,提供跨平台支持(Windows、Linux 或 MacOS )。 优点: 通过使用关键字驱动测试(KDT)方法简化了自动化测试过程,方便测试人员创建易读的测试。 测试数据语法简单易用。 生态系统丰富。由各种通用测试库和工具组成,这些工具都是作为独立项目开发的。 具有高度可扩展性。 可通过 pabot 或 Selenium Grid 执行并行测试。 缺点: 自定义 HTML 报告较为麻烦。 如果是针对大范围的库和扩展的 KDT 自动化测试,建议使用此跨平台框架。如果想要添加新的关键字(通过 RF 测试库 API ),需要具备 Java / Python / C 语言的基础知识。 2. JUnit JUnit 是一款针对 Java 应用的单元测试框架,用于编写和运行可重复的测试。 优点: 纯 Java 编写。 支持测试驱动开发(TDD)。 允许创建自己的单元测试用例套件。 能很好地与其他工具(如 Maven )和 ...
编辑部的故事 发布于 1周前 阅读 3771 评论 6 点赞 2

Angular4自制一个市县二级联动组件

最近遇到了不少问题,真的是命运多舛。Angular真是让人又爱又恨的框架,恨的是资料太少,遇到问题无从下手。爱的是许多其他框架难以做到的功能,angular却可以轻松做到。 话不多说,最近遇到了一个旧项目改造的问题。拿到前同事做的页面效果: 第一眼就看到了这三个下拉框,按捺不住好奇心的我点了点。原来,第一个下拉框可以选择市属和省属,如果选择市属,那么后面就会出现市、县级两个下拉框,如果是省属,那就隐藏了,这个挺容易的。然后就是要选择市之后,区下拉框要有对应区县选项。emmmm,很典型的二级联动,不过既然分析完了思路,那就开始做吧!首先呢,数据肯定要从后端同事那里拿,调用他的接口把数据填充进去。看看数据是什么样子的: 数据略多,就不全部贴出来了。把实体bean创建一下, Typescript code // 市级实体类 export class City { // 市级id cityId: string; // 所属类型(0.市属 1.省属) cityType: number; // 市级名称(可选属性,若cityType为1时,可不填) cityName: string; // 所属区县 counties?: Array<Country>; } // 区县级实体类 export class Country { // 区县id countryId: string; ...
落青 发布于 4天前 阅读 313 评论 5 点赞 1

用vue做一个酷炫的menu

写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示   pic_1   pic2   pic_3      在线演示live demo 2.使用介绍         项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a. 首先在单文件组件里引入menu组件,导入common文件夹stylus里的menuConfig.stylus.        b.配置相应的参数             可选参数             * radius:default为100px,item距离menu的button的距离。             *  startAngle:defaut为0,item开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。            *  endAngle:default为315,最后一个item的角度。            *  itemNum:default为8             *  animationDuration:default为0.5s,每个item动画的执行时间             *  itemAnimationDelay:d...
MingSeng-W 发布于 2周前 阅读 5585 评论 18 点赞 17

Vue.js---表单标签中的单选按钮、复选按钮和下拉列表的取值问题

表单标签取值问题中,单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。
秋季长青 发布于 4天前 阅读 232

02、Vue.js---指令

介绍Vue.js常用指令以及相关知识。
秋季长青 发布于 5天前 阅读 221

Vue.js---事件冒泡和默认事件处理

浅谈事件冒泡和默认事件在 js 和 vue.js 表现和处理方法。
秋季长青 发布于 7天前 阅读 258 评论 2 点赞 1

nginx-http-concat资源文件合并模块

网页中引入多个CSS和JS的时候,浏览器会发出很多(css个数+js个数)次网络请求,甚至有的网页中有数十个以上的CSS或JS文件,用户体验特别不好,正好可以利用nginx-http-concat nginx模块简单的把这个问题解决好。 安装模块
peachyy 发布于 4天前 阅读 116

03、Vue.js---自定义指令

除了核心功能默认内置的指令,Vue 也允许注册自定义指令。
秋季长青 发布于 3天前 阅读 164 点赞 1

Angular4订阅(Subscribe)与取消

声明 以下内容仅仅为个人在自学过程中的理解,若有错误,麻烦您在评论区指出,我将及时更正,方便其他人,谢谢! 订阅(Subscribe) 写过js的都知道,subscribe在很多地方都能看到它的身影,并且起到了很重要的作用。侦听http请求的返回,页面间传递参数… …说起订阅,就不能不提Observable,说起Observable就不能不提Subscribable… …等等,扯太远了。回到正题,subscribe是Observable类下的一个函数。从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是在跨页面中,举个栗子: TypeScript code // 父页面 export class SupComponent { id: string; // 父组件构造器 constructor(private router: Router) { // 设置id this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP'; } // 进入详情页 detail(id: string) { // 携带id跳转至详细页 this.router.navigate(['sub', id]); } } // 子页面 export class SubComponent implements OnInit{ // 子组件构造器 constructor(private activated: ActivatedRoute) { } // 子组件初始化钩子 ng...
落青 发布于 6天前 阅读 137 评论 2

JavaScript 开发人员需要知道的简写技巧

本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和高级篇两部分,分别进行介绍。   初级篇 1、三目运算符 下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。 const x = 20; let answer; if (x > 10) { answer = 'greater than 10'; } else { answer = 'less than 10'; } 简写为: const answer = x > 10 ? 'greater than 10' : 'less than 10';   2、循环语句 当使用纯 JavaScript(不依赖外部库,如 jQuery 或 lodash)时,下面的简写会非常有用。 for (let i = 0; i < allImgs.length; i++) 简写为: for (let index of allImgs) 下面是遍历数组 forEach 的简写示例: function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9   3、声明变量 在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时: let x; let y; let z = 3; 可以简写为: let x, y, ...
葡萄城控件技术团队 发布于 1个月前 阅读 1826 评论 6 点赞 15

前端编年史

# 前言 ------   笔者学习一门知识有一个习惯,就是会先去了解这门知识的一个大致历史框架,而后再学习具体的知识内容。这样做有以下两个目的: 1.可以增添兴趣,对于越枯燥的知识越是有效。 2.可以知道这门知识的来龙去脉,可以知道依托于这门知识,自己将会去向何方。毕竟古人也说过,以史为镜可以知兴替嘛。   然而,查阅无数资料之后,笔者绝望地发现没有一篇完整地准确地描述前端历史的文章可以借鉴,因此萌生了自己动手写一篇一直持续维护的前端编年史以便查阅。 # 正文 ------ | 日期 | 事件 | | ---------- | ---------------------------------------- | | 1989 | html正式诞生,由物理学家蒂姆·伯纳斯·李为了方便学术文档的分享而创造,这也是前端的起始时间。 | | 1994.10.13 | Mosaic Netscape 0.9正式发布,一代浏览器霸主开始展露它的锋芒。 | | 1994.10 | Web技术领域最具权威和影响力的国际中立性技术标准机构正式成立,创立者就是html的创造者大神蒂姆·伯纳斯·李。 | | 1995.05 | 前端中最重要的成员JavaScript(原名LiveScript)诞生,创造者是网景的布兰登·艾奇。他仅仅用了10天的时间就完成了这项创举。 | | 1995.12.24 | html2.0标准由IETF正...
老司机带你撸代码 发布于 1周前 阅读 311 评论 7 点赞 3 打赏 1

iView 发布后台管理系统 iview-admin,没错,它就是你想要的

![](https://user-gold-cdn.xitu.io/2017/10/18/2af80d0cae6cad353f62554c02d34c7c?imageView2/1/w/1304/h/734/q/85/interlace/1) ## 简介 iView Admin 是基于 Vue.js,搭配使用 [iView UI](https://github.com/iview/iview) 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。 没错,这就是大家期待已久的 admin 了,这么漂亮好用的系统,是不是可以给个 Star 鼓励一下开发者呢: **iView 码云:[https://gitee.com/icarusion/iview](https://gitee.com/icarusion/iview)** **iView Admin 码云:[https://gitee.com/icarusion/iview-admin](https://gitee.com/icarusion/iview-admin)** **iView GitHub:[https://github.com/iview/iview](https://github.com/iview/iview)** **iView Admin GitHub:[https://github.com/iview/iview-admin](https://github.com/iview/iview-admin)** ## 在线预览 [在线访问地址 https://iview.github.io/iview-admin](https://iview.github.io/iview-admin) 密码随意填,但要记住哦(不然使用锁屏功能时你就懵逼...
aresn 发布于 1个月前 阅读 1525 评论 3 点赞 4

Angular 5 快速入门与提高

**一、概述** 尽管被称为`Angular5`,实际上它只是这个诞生于2012年的前端框架的的第四个版本: ![angular history](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/angular-history.png) 看起来差不多半年就发布一个新版本,不过实际上从重写的版本`2`开始,开发 接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。 在`5`这个新的版本中,`Angular`团队将改进重点放在以下特性方面: - 更易于构建渐进式`Web`应用 —— __P__rogressive __W__eb __A__pp - 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间 - 使物化设计组件兼容服务端渲染 `PWA`是`Google`提出的一个标准,旨在让Web应用在移动终端上获得媲美原生 应用的用户体验。一个`PWA`应用主要利用`Service Worker`和浏览器缓存来 提省交互体验,它不仅可以直接部署在手机桌面,而且可以离线应用: ![pwa](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/pwa.png) **二、引入angular环境** `Angular`推荐使用`TypeScript`来开发应用,这要求使用一个在线 编译器(`JIT`)实时编译代码,或者在开发期采用预编译器(`AOT`)提前编译代码。 为了避免这个繁琐的过程影...
笔阁 发布于 3周前 阅读 2398 评论 11 点赞 4

如何扒视频

作者:汪娇娇 时间:2017年11月8日 说到前端开发,免不了在网页里放视频,放视频的话,有时候又免不了扒视频,下面就是我扒视频的辛酸历程,大家且看且珍惜吧。 一、直接扒代码 像pandakill的视频,直接扒代码就可以。 至于什么格式,自己下载下来后,用格式工厂直接转换就ok了。 二、看network 比如说触手的视频,看network就能找到视频,一开始我还是硬生生慢慢的找,后来有网友提示,可以先按size排序,因为视频会比一般的文件都大很多==,这样就简单啦,哈哈哈。 三、改域名 这个适用于B站(bilibili)的视频。 比如说某网站地址是https://www.bilibili.com/video/av13088471/index_4.html 怎么扒视频嘞,把bilibili改成kanbilibili就可以了,也就是 https://www.kanbilibili.com/video/av13088471/index_4.html 打开后,页面顶部是下图这个样子: 点击“下载地址”后, 它分为2部分,下载地址和弹幕下载地址,我们只需要选择下载地址(第一部分)那一块的就可以。 而下载地址部分又有3种形式的下载方式,P2、P3和P4,一般下P3就可以,P4类的我下载过,但中途会有几个分片下载失败,P3的可以完全下载下来,下载下来的是很多个ts文件,然后我们可以用B站本身提供的代码合...
娇娇jojojo 发布于 2周前 阅读 696 评论 14 点赞 6

用 Electron 打造 Win/Mac 应用,从「代码」到可下载的「安装包」,可能比你想得麻烦一点

我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地发行一款 Electron 产品」这一目标,还有很多工作需要做... 这是 Electron 系列文章的第二篇,这一篇文章将和大家分享我是怎么去构建**自动化的 Electron 开发构建工程**的,说白了,就是**怎么把敲的代码变成一个用户可以下载安装的包**,当然随着之后应用复杂度的提升和技术再选型,工程体系可能随时会重构或演进,但至少可以给大家一些参考,欢迎留言交流。
Stinson_Zhao 发布于 2周前 阅读 3014 评论 9 点赞 13

Vue之父子兄弟组件间通信

##Vue之父子兄弟组件间通信 @(JavaScript)[学习笔记] ------ [TOC] ------ ### 导言 最近在写个人简历网页版遇到一个问题,想要将一个组件的dom结构传递给其他兄弟组件,然后进行dom操作,不知怎么在其间传递数据,查阅资料,找到解决方法,现记录如下,整理思路加强学习,同时便于他人参考 **创建一个App.vue作为父组件** ```javascript ``` **创建字组件A** ```javascript ``` **创建子组件B** ```javascript ``` ### 1. 父组件向子组件传递消息 父组件向子组件传数据较为简单,子组件用props接收 **父组件App** ```javascript ``` **子组件A** ``` 我是组件A,接收到消息:{{msgApp}} ``` 运行结果如图 ![enter image description here](http://oqhziw7jv.bkt.clouddn.com/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A11.jpg) ### 2. 子组件向父组件传递数据 子组件向父组件传递数据用`this,$emit()` **子组件B** ```javascript ``` **父组件App** ```javascript ``` 结果如下 ![enter image description here](http://oqhziw7jv.bkt.clouddn.com/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A12.jpg) **还有另一种方法与兄弟组件通信方式相同用e...
阿浩yohann 发布于 1周前 阅读 126

基于HTML5的WebGL经典3D虚拟机房漫游动画

3D动画宣传片将 3D 动画、特效镜头、企业视频、照片、未来前景等内容通过后期合成、配音、解说形成一部直观、生动、喜闻乐见的高品位的企业广告宣传片,让社会不同层面的人士对企业产生正面的、积极的、良好的印象,从而建立对企业的好感与信任,并信赖该企业的产品或服务。 现在 3D 发展地如此迅速也要感谢人类对于“现实”的追求,所以学好用好 3D 是未来成功必不可少的一部分。 本文例子的思路是进入一个机房参观,打开门的动作是再生动不过了, 再加上适当地转弯,基本上完全模拟了人在机房中参观的效果。还有一个好处就是,如果要演示给领导看而又不用操作,这种炫酷的效果领导一定会很满意!
xhload3d 发布于 1周前 阅读 301 点赞 2

用koc-loader写类Vue的Knockout单文件组件

廉颇老矣,尚能饭否?
Zaaksam 发布于 1周前 阅读 109 评论 1

JavaScript 开发者的 10 款必备工具

JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注。自然地,框架和库的生态系统自然而然地围绕着 JavaScript 而努力,以简化和增强 JavaScript 应用程序的开发。 这些工具提供从事件处理到代码缩减和数据渲染的功能。以下是开发基于浏览器的 Web 应用程序的 JavaScript 开发人员工具包中最必要的技术汇总。 Angular Angular,之前是由Google开发的被称为AngularJS,是用于移动和桌面Web开发的单框架。为了创建类原生渐进式web应用程序,Angular提供用于汇编应用程序的数据服务的依赖注入,以及用于复合组件的HTML模板。 何处下载Angular? Angular项目快速入门页面使得开发者可以轻松开始使用Angular。 Angular的功能 2016年9月的Angular第2版的特色是基于TypeScript(Microsoft的JavaScript类型化超集)的重写,以处理在Angular初始版本中架构上存在的性能限制。 2017年3月的Angular第4版的特色是: 速度更快、体积更小,还对内置指令NgFor和NgIf以及模板的source map等功能进行了优化。 同时,该版本向后兼容大多数应用中的2.x.x系列。 新版本还优化了View引擎,改进后AoT生成的代码将减少约...
爱敲代码的程序员 发布于 3周前 阅读 920 评论 5 点赞 1

【Jquery】如何判断网页是否已经滚动到浏览器底部了

有些需求中,需要当用户滚动到浏览器底部的时候,再加载新的内容。笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。 在了解下面的知识点之前,笔者这里先介绍几个概念。 $(window).height(); //用于获取浏览器显示区域的高度 $(window).width(); //用于获取浏览器显示区域的宽度 $(document.body).height(); //获取页面文档的高度 $(document.body).width(); //获取页面文档的宽度 $(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离 $(document).scrollLeft(); //获取水平滚动条到左边的水平距离 通过上面的知识点,可以知道:浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。 有了这个结论,那么实现起来就容易了。下面的代码实现了,判断用户是否浏览到了网页的底部。 $(window).scroll(function(){ var h=$(document.body).height();//网页文档的高度 var c = $(document).scrollTop();//滚动条距离网页顶部的高度 var wh = $(window).height(); //页面可视化区域高度 if (Math.ceil(wh+c)>=h){ alert("我已经到底部啦"); } }) 如果需要判断用户是否已经浏览到某个元素的话,那么只需要把上...
我的光明 发布于 1个月前 阅读 402 评论 9

WebStorm的下载与安装

百度搜索: 链接:http://www.jetbrains.com/webstorm/ 链接:http://www.jetbrains.com/student/ 学生免费授权计划 请从正规来源下载软件  WebStormIDE跟普通的代码编辑器的区别在于:   不仅可以编写代码,还提供编译打包、版本控制、自动构建以及调试等功能。 下载 1、在官网,点击Download下载 2、正在下载 3、下载完成 安装 1、双击 2、运行 3、Next 4、选择自己的安装路径,注意:安装路径不要有中文 5、选择创建桌面快捷方式, 6、Install 7、安装中,耐心等待,可能需要几分钟 8、Finish安装完成 启动 1、双击刚刚安装完成的WebStorm立即启动 2、选择Do not 3、点击Accept 4、选择“License server”,然后在输入框中输入 License server address 为: http://idea.iteblog.com/key.php,点击”Activate”按钮 有博友反馈该地址不行了。但本人亲测还是可以用的。可能是不太稳定了。 增加博友推荐的另外一个License Server地址。 http://idea.imsxm.com/ 5、启动页面 6、各种设置,根据自己爱好来   7、可创建项目了或者打开存在的 8、选择项目存放的位置 9、打开后画面 10、打印一个HelloWorld    ...
Jokeny 发布于 5小时前 阅读 1

jQuery-基础篇

jQuery是一个快速、简洁的JavaScript框架 jQuery设计的宗旨是“write Less,Do More”
anlve 发布于 8小时前 阅读 3

扒视频

一、直接扒代码 像pandakill的视频,直接扒代码就可以。 至于什么格式,自己下载下来后,用格式工厂直接转换就ok了。 二、看network 比如说触手的视频,看network就能找到视频,一开始我还是硬生生慢慢的找,后来有网友提示,可以先按size排序,因为视频会比一般的文件都大很多==,这样就简单啦,哈哈哈。 三、改域名 这个适用于B站(bilibili)的视频。 比如说某网站地址是https://www.bilibili.com/video/av13088471/index_4.html 怎么扒视频嘞,把bilibili改成kanbilibili就可以了,也就是 https://www.kanbilibili.com/video/av13088471/index_4.html 打开后,页面顶部是下图这个样子: 点击“下载地址”后, 它分为2部分,下载地址和弹幕下载地址,我们只需要选择下载地址(第一部分)那一块的就可以。 而下载地址部分又有3种形式的下载方式,P2、P3和P4,一般下P3就可以,P4类的我下载过,但中途会有几个分片下载失败,P3的可以完全下载下来,下载下来的是很多个ts文件,然后我们可以用B站本身提供的代码合并工具将多个ts文件合并成一个ts文件。合并地址:https://www.kanbilibili.com/tools/flvjoin。 先添加已经下载好的多个文件,需要排序的可以点一下“自动排序”...
罪名丶 发布于 10小时前 阅读 2

eclipse maven 将servlet2.3变成servlet3.0

http://blog.csdn.net/lunatic_xian/article/details/68068547  
木之下 发布于 11小时前 阅读 3

hexo博客评论新神器——Valine

接着前文的hexo博客继续优化。其实也没什么大动作,这回主要是对评论系统做些整理。本文如题目所示:介绍一个神器,Valine。 本来hexo博客用的是gitment,我也非常喜欢,看着逼格就超高呀。无奈我用着bug略多,而且毕竟有github账户的小伙伴似乎并不多。于是我就忍痛准备换评论系统。然后在最近刚刚加入的hexo博客群里,看见了一个神器。也就是本篇主人公——Valine.js。 具体配置就见如下的文章吧。它的定义—— 一款极简的无后端评论系统。 在多说和网易云跟帖相继倒闭的情况下,这个简直是救人一命胜造七级浮屠呀。 [Valine -- 一款极简的评论系统](https://ioliu.cn/2017/add-valine-comments-to-your-blog/) [Valine官网](https://valine.js.org) 这个评论系统是基于LeanCloud的,大家应该对这个很熟悉,对,Hexo的博客阅读量统计也是它。官网网址如下,需要注册一个账户。 [LeanCloud官网](https://leancloud.cn) 另外多提一句,最近为了更好更快升级,我重新在本地部署了下我的hexo博客,就是把NexT主题利用Git方式克隆到本地,以后升级就比较快了。这个内容可以参见官网。也因为克隆了最新版本,发现已经集成了gitment和valinejs(神速)。所以配置起来就很方便了。...
胖胖雕 发布于 11小时前 阅读 2

node.js安装

本来是不用重新写了,结果自己笔记整理不知道哪里去了,以前的博客也图片没有保存恶心人啊,再简单的写一下
anlve 发布于 12小时前 阅读 3

ECMAScript6词法

ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,它于2015 年 6 月正式发布。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。ECMAScript实现还有Jscript和ActionScript。
周胜 发布于 12小时前 阅读 46

dedecms

比如动态调用时:http://www.xxx.com/plus/list.php?xxx=123   模板里就可以用类似以下这样的写法来获取URL里的参数 复制代码 {dede:field name='keywords' runphp='yes'}             @me=$_GET['xxx']; {/dede:field} 这样得到的输出值就是123
GIFCOOL 发布于 12小时前 阅读 2

layer-弹出框

      layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。layer 兼容了包括 IE6 在内的所有主流浏览器。 官方网址:http://layer.layui.com/ 图片在线预览 layer.photos(options) - 相册层 引入需要的js文件 <script type="text/javascript" src="${ctxStatic}/layer/layer.js"></script>      2. 调用layer.photos方法展示图片 layer.photos({ closeBtn:true,//关闭按钮 photos:{ "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "alt": "图片名", "pid": 666, //图片id "src": "", //原图地址 "thumb": "" //缩略图地址 可省略 },{   } ] } }); 3.效果 其他 //弹出一个页面层 $('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //点击遮罩关闭 content: '\<\div style="padding:20px;">自...
lianyilxm 发布于 12小时前 阅读 3

在Windows下安装Node.js及环境配置

1.简介:简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。 2.下载安装: Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 看自己操作系统选择下载32位还是64位,下载好后双击安装包,出现如下图所示: 点击【Next】按钮 勾选复选框,点击【Next】按钮 修改好目录后,点击【Next】按钮 安装完后点击【Finish】按钮完成安装 至此Node.js已经安装完成,检测PATH环境变量是否配置了Node.js,默认已自动配置,如下图: 然后进行简单的测试安装是否成功了,后面还要进行环境配置,在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口,如下图: 安装完后的目录如下图所示: 此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西。 3.环境配置 说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行...
Jokeny 发布于 12小时前 阅读 16

巧用ES6的Set和延展操作符来给数组去重

在ES5时代,如果我们要给某个数组去重可能需要很多步骤,比如利用对象属性,使用临时数组等等,而今天,我们将利用ES6的Set不能重复,以及...延展操作符,解析字符串 我们直接来看一个实例: // 1.定义一个重复数据数组 let arr = ["张三","李四",1,2,3,9,3,2,1,"李四"]; // 2.将数组转成Set let arrSet = new Set(arr); // 3.使用延展操作符将Set解析成数组 let result = [...arrSet]; // 4.测试输出 console.log(arr); // 结果:["张三", "李四", 1, 2, 3, 9, 3, 2, 1, "李四"] console.log(result); // 结果: ["张三", "李四", 1, 2, 3, 9]  
AIU_weijue 发布于 12小时前 阅读 4

新型好玩的前端技术汇总

H5技术
SubinY 发布于 12小时前 阅读 6

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

1、什么是 InfiniteScroll?  无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中,用来在滚动网页到页面底部的时候自动加载下一页的内容。  这种形式最早由推特(twitter)使用,后来必应图片搜索、谷歌图片搜 索、google reader等纷纷采用了这一项技术,于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。该技术非常适合移动端的数据自动加载。 2、什么是ngInfiniteScroll?  ngInfiniteScroll 是用于 AngularJS的无限滚动控件,特点是简单易用,是AngularJS社区里应用最为广泛的”触底加载”控件。 3、如何使用ngInfiniteScroll?  只要以下4步就可以搞定ngInfiniteScroll : <1>引用javascript文件(注意把js加载顺序) <script type='text/javascript' src='path/jquery.min.js'></script> <script type='text/javascript' src='path/angular.min.js'></script> <script type='text/javascript' src='path/ng-infinite-scroll.min.js'></script> <2>声明对 ***infinite-scroll***的依赖 angular.module('myApplication', ['infinite-scroll']);   <3>在html页面使用 infinite-scroll 元素...
前端热爱者 发布于 13小时前 阅读 1

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法 【1】锚点   使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置   [注意]关于锚点的详细信息移步至此 1 2 3 4 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a> </body> 【2】scrollTop   scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度   由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能   [注意]关于页面的scrollTop的兼容问题详细内容移步至此 1 2 3 4 5 6 7 8 <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script> </body> 【3】scrollTo()   scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由...
前端热爱者 发布于 13小时前

window.performance

在chrome控制台执行window.performance,会出现下面结果:   [javascript] view plain copy 简单介绍performance中的属性:   memory:{       jsHeapSizeLimit: 1136000000 // 内存大小限制       totalJSHeapSize: 16100000 // 可使用的内存       usedJSHeapSize: 10000000 //JS 对象占用的内存,一定小于 totalJSHeapSize   }   navigation:{       redirectCount:0 // 如果有重定向的话,页面通过几次重定向跳转而来       type:0 //页面来源类型:               // 0   即 TYPE_NAVIGATENEXT 正常进入的页面(非刷新、非重定向等)               // 1   即 TYPE_RELOAD       通过 window.location.reload() 刷新的页面               // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面(历史记录)               // 255 即 TYPE_UNDEFINED    非以上方式进入的页面   }   timing:{       connectEnd:1494406626724    // HTTP(TCP) 完成建立连接的时间(完成握手),如果是持...
agenyun 发布于 13小时前 阅读 3

beejson优化日志[beejson原创]

对于长篇大论的日志解析这里面我收集了一些实用的工具 json在线视图 http://www.beejson.com/tool/jsonedit.html json格式化 http://www.beejson.com/tool/jsonview.html json解析 http://www.beejson.com/json/json.html 还有各种 json对比  http://www.beejson.com/tool/jsontools.html
上山的人 发布于 14小时前

js实时在服务器强制更新[beejson原创]

我目前用的是freemaker标签 后台直接定义两个key,使用静态的常量 static final String JS_VERSION = "jsVersion";//JS版本key static final long JS_VERSION_VALUE = System.currentTimeMillis();//JS版本值 然后把这两个key并put到freemaker默认启动工具类中   最后引入js文件时  如下 <script type="text/javascript" src="${contextPath}/js/back/adjustratio/adjustratio.js?version=${jsVersion}"></script> 最后加上javascript在线格式化工具,很使用的工具 javascript压缩/解压 http://www.beejson.com/tool/jsformat.html html格式化 压缩工具 http://www.beejson.com/tool/html.html
上山的人 发布于 14小时前

idea 更换编辑器背景图片

插件名称是:BackgroundImage, 安装后效果图
今天来找bug 发布于 15小时前 阅读 3

程序员的压力[beejson原创]

每天都在代码中度过,不是完善新需求就是来回的修改各种bug,因为职业而喜欢职业,选择了没有退路,选择职业就爱职业,每天都很枯燥,beejson提供了冯提莫的翻唱去《刚好遇见你》, 网址是 http://www.beejson.com/data/yujian.html  希望能给程序员来心灵上的安慰和愉悦的心情
上山的人 发布于 16小时前 阅读 3

Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)

一步一步往上爬, 就像是感情一样, 建力的时候费劲千辛万苦, 失去的时候只是一瞬间。 加油---------------------------------------------------------------------------------------------------------------------------路过的都是风景,我们会遇到很多人,也会路过很多人
YJ_ 发布于 17小时前 阅读 1

用vue做一个酷炫的menu

写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱😔。😆开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示   pic_1   pic2   pic_3      在线演示live demo 2.使用介绍         项目地址:github.com/MingSeng-W/vue-bloom-menu,clone项目到本地        a. 首先在单文件组件里引入menu组件,导入common文件夹stylus里的menuConfig.stylus.        b.配置相应的参数             可选参数             * radius:default为100px,item距离menu的button的距离。             *  startAngle:defaut为0,item开始的角度,以时钟3点钟方向记为0,然后顺时针方向为递增方向。            *  endAngle:default为315,最后一个item的角度。            *  itemNum:default为8             *  animationDuration:default为0.5s,每个item动画的执行时间             *  itemAnimationDelay:d...
MingSeng-W 发布于 2周前 阅读 5585 评论 18 点赞 17

用 Electron 打造 Win/Mac 应用,从「代码」到可下载的「安装包」,可能比你想得麻烦一点

我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地发行一款 Electron 产品」这一目标,还有很多工作需要做... 这是 Electron 系列文章的第二篇,这一篇文章将和大家分享我是怎么去构建**自动化的 Electron 开发构建工程**的,说白了,就是**怎么把敲的代码变成一个用户可以下载安装的包**,当然随着之后应用复杂度的提升和技术再选型,工程体系可能随时会重构或演进,但至少可以给大家一些参考,欢迎留言交流。
Stinson_Zhao 发布于 2周前 阅读 3014 评论 9 点赞 13

Angular 5 快速入门与提高

**一、概述** 尽管被称为`Angular5`,实际上它只是这个诞生于2012年的前端框架的的第四个版本: ![angular history](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/angular-history.png) 看起来差不多半年就发布一个新版本,不过实际上从重写的版本`2`开始,开发 接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。 在`5`这个新的版本中,`Angular`团队将改进重点放在以下特性方面: - 更易于构建渐进式`Web`应用 —— __P__rogressive __W__eb __A__pp - 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间 - 使物化设计组件兼容服务端渲染 `PWA`是`Google`提出的一个标准,旨在让Web应用在移动终端上获得媲美原生 应用的用户体验。一个`PWA`应用主要利用`Service Worker`和浏览器缓存来 提省交互体验,它不仅可以直接部署在手机桌面,而且可以离线应用: ![pwa](http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/pwa.png) **二、引入angular环境** `Angular`推荐使用`TypeScript`来开发应用,这要求使用一个在线 编译器(`JIT`)实时编译代码,或者在开发期采用预编译器(`AOT`)提前编译代码。 为了避免这个繁琐的过程影...
笔阁 发布于 3周前 阅读 2398 评论 11 点赞 4

Vuex源码解析

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue)。 在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](https://github.com/answershuto/learnVue/tree/master/vue-src)以及Vuex的注释[https://github.com/answershuto/learnVue/tree/master/vuex-src](https://github.com/answershuto/learnVue/tree/master/vuex-src),希望可以对其他想学习源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## Vuex 我们在使用Vue.js开发复杂的应用时,经常会遇到多个组件共享同一个状态,亦或是多个组件会去更新同一个状态,在应用代码量较少的时候,我们可以组件间通信去维护修改数据,或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后,代码就会变得难以维护,从父组件开始通过prop传递多层嵌套的数据由于层级过深而显得异常脆弱,而事件总线也会因为组件的增多、代码量的增...
染陌同学 发布于 4周前 阅读 1672 评论 1 点赞 4

Electron,从玩玩具的心态开始,到打造出一款越来越优秀的桌面客户端产品 —— 一份不是「Hello Word」的吊胃口的Quick Start

标题是我以第一视角基于 Electron 开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Electron 到去开发客户端产品,最后随着业务和功能的复杂度提升再不断地优化客户端。
Stinson_Zhao 发布于 1个月前 阅读 4907 评论 35 点赞 17

vue 指令基本使用大全

## 指令 - 解释:指令 (Directives) 是带有 `v-` 前缀的特殊属性 - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM ### 常用指令 - v-text - v-html - v-bind ### v-text - 解释:更新元素的 textContent ```html ``` ### v-html - 解释:更新元素的 innerHTML ```html ``` ### v-bind - 作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM - 语法:`v-bind:title="msg"` - 简写:`:title="msg"` ```html ``` ### v-on - 作用:绑定事件 - 语法:`v-on:click="say"` or `v-on:click="say('参数', $event)"` - 简写:`@click="say"` - 说明:绑定的事件从`methods`中获取 ```html ``` ### 事件修饰符 - `.stop` 阻止冒泡,调用 event.stopPropagation() - `.prevent` 阻止默认事件,调用 event.preventDefault() - `.capture` 添加事件侦听器时使用事件`捕获`模式 - `.self` 只当事件在该元素本身(比如不是子元素)触发时触发回调 - `.once` 事件只触发一次 ### v-model - 作用:在表单元素上创建双向数据绑定 - 说明:监听用户的输入事件以更新数据 ```html Message is: {{ message }} ``` ### v-for - 作用:基于源数据多次渲染元素...
不负好时光 发布于 1个月前 阅读 4171 评论 9 点赞 11

JavaScript中错误正确处理方式,你用对了吗?

JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化。如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出。理论上可以认为这些发生的错误只是JavaScript中的简单事件。 本文将会讨论客户端JavaScript中的错误处理。主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。 下面就让我们一起看看如何正确处理JavaScript中的错误。   Demo演示 本文中使用的demo可以在GitHub上找到,运行之后会是这样的页面: 每个按钮都会引发一个“错误(Exception)”,同时这个错误会模拟出一个被抛出的异常TypeError。下面是模块的定义: // scripts/error.js function error() { var foo = {}; return foo.bar(); } 首先,这个函数声明了一个空对象foo。需要注意的是,bar( )未在任何地方定义。接下来验证这个单元测试是否会引发“错误”: // tests/scripts/errorTest.js it('throws a TypeError', function () { should.throws(error, TypeError); }); 这个单元测试在Mocha中,同时在 Should.js中有测试声明。Mocha是测试运行工具,而Should.js是断言库。这个单元测试运行在Node上,不需要使用浏览...
葡萄城控件技术团队 发布于 2个月前 阅读 2956 评论 7 点赞 3

golang 标准库间依赖的可视化展示

国庆看完 << Go 语言圣经 >>,总想做点什么,来加深下印象.以可视化的方式展示 golang 标准库之间的依赖,可能是一个比较好的切入点.做之前,简单搜了下相关的内容,网上也要讨论,但是没有发现直接能拿过来用的.标准库之间,是必然存在依赖关系的,不同库被依赖的程度必然是不一样的.但究竟有多大差别呢?
ios122 发布于 2个月前 阅读 2702 评论 5 点赞 3

jQuery实现放大镜效果

相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。 在接下来的博文中,将向大家介绍通过jQuery实现放大镜效果。
爱敲代码的程序员 发布于 2个月前 阅读 1969 评论 6 点赞 5

常见JS动画效果

作为一名前端开发人员,想要的大多都是,在开发过程中,看着自己制作的动画的炫酷以及困难的解决;开发结束后,自己的项目、成果可以被他人认可接受。人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果。
爱敲代码的程序员 发布于 2个月前 阅读 1812 评论 3 点赞 11

JavaScript 闭包

JavaScript 的闭包原理和详解
唯情 发布于 2个月前 阅读 2105 评论 12 点赞 9

VirtualDOM与diff(Vue实现)

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue)。 在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](https://github.com/answershuto/learnVue/tree/master/vue-src),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 ## VNode 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的JavaScript操作DOM进行重绘整个视图层是相当消耗性能的,我们是不是可以每次只更新它的修改呢?所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟...
染陌同学 发布于 2个月前 阅读 1729 点赞 4

前端对图片进行本地压缩预览并上传实践

正好项目碰到这个需求,花了一下午基本搞定,记录一下实现步骤以及一些需要注意的坑,本实例后端使用node express,Multer作为处理multipart/form-data的中间件,完整代码:https://gitee.com/gaisama/codes/xwus19y6crjnm0vf25dza10
GaiSama 发布于 2个月前 阅读 1345 评论 10 点赞 13

vue组件开发

## 什么是vue组件 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式。 ## 组件使用步骤 ### 1. 定义组件 var myComponent = Vue.extend({ template:" this is my first component" }); ### 2. 注册组件 全局注册组件 Vue.component('myComponent',myComponent) 局部注册组件 var apk = new Vue({ el:"#apk", components:{ "myComponent":myComponent } }) ### 3. 使用组件 ### 4. 上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法: // 在一个步骤中扩展与注册 Vue.component('my-component', { template: ' A custom component!' }) // 局部注册也可以这么做 var Parent = Vue.extend({ components: { 'my-component': { template: ' A custom component!' } } }) ## 组件常用方法使用 ### 1. 嵌套组件 组件本身也可以包含组件,下面的parent组件就包含了一个命名为child-component组件,但这个组件只能被parent组件使用: var myComponent = Vue.extend({ template:" this is my first component" }...
wshining 发布于 2个月前 阅读 2364 评论 8 点赞 4

从Vue.js源码角度再看数据绑定

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue)。 在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](https://github.com/answershuto/learnVue/tree/master/vue-src),希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。 阅读数据绑定源码之前建议先了解一下[《响应式原理》](https://github.com/answershuto/learnVue/blob/master/docs/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86.MarkDown)以及[《依赖收集》](https://github.com/answershuto/learnVue/blob/master/docs/%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86.MarkDown),可以更好地理解Vue.js数据双向绑定的整个过程。 ## 数据绑定原理 前面已经讲过Vue数据绑定的原理了,现在从源码来看一下数据绑定在Vue中是如何实现的。 首先看一下Vue.js官网介绍响应式原理的这张图。 ![img](https://user-gold...
染陌同学 发布于 3个月前 阅读 2699 评论 4 点赞 5

Angular为什么选择TypeScript?

原文地址:https://vsavkin.com/writing-angular-2-in-typescript-1fa77c78d8e8 同步发布在我的个人网站:[http://www.codebe.org](http://www.codebe.org) 我的开源项目:[http://git.oschina.net/zt_zhong/CodeBe](http://git.oschina.net/zt_zhong/CodeBe) Angular是用TypeScript编写的。在这篇文章中,我将讨论为什么我们作出决定。我还将分享我使用TypeScript的经验:它如何影响我写和重构我的代码的方式。 ## TypeScript有很好的工具 TypeScript的最大的卖点就是工具。它提供高级自动完成,导航和重构。拥有这样的工具几乎是大型项目的必备要求。没有他们,改变代码的恐惧使代码库处于半只读状态,并使大规模重构非常危险且昂贵。 TypeScript不是编译为JavaScript的唯一类型语言。还有其他语言具有更强的类型系统,在理论上可以提供绝对强大的工具。但在实践中大多数人除了编译器之外没有其他的东西。这是因为构建丰富的开发工具必须是第一天就明确的目标,它是针对TypeScript团队的。这就是为什么他们构建语言服务,可以由使用的编辑器提供类型检查和自动完成。如果您想知道为什么有这么多编辑器具有很好的TypeScript支持,答案就是语言服务。 智能感知和重构提示(...
我是钟钟 发布于 3个月前 阅读 3574 评论 31 点赞 2

ES2017异步函数现已正式可用

ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数。如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的。 异步函数或多或少会让你编写一些顺序的 JavaScript 代码,但是却不需要在 callbacks、generators 或 promise 中包含你的逻辑。 如下代码: function logger() { let data = fetch('http://sampleapi.com/posts') console.log(data) } logger() 这段代码并未实现你的预期。如果你是在JS中编写的,那么你可能会知道为什么。 下面这段代码,却实现了你的预期。 async function logger() { let data = await fetch('http:sampleapi.com/posts') console.log(data) } logger() 这段代码起作用了,从直观上看,仅仅只是多了 async 和 await 两个词。   ES6 标准之前的 JavaScript 异步函数 在深入学习 async 和 await 之前,我们需要先理解 Promise。为了领会 Promise,我们需要回到普通回调函数中进一步学习。 Promise 是在 ES6 中引入的,并促使在编写 JavaScript 的异步代码方面,实现了巨大的提升。从此编写回调函数不再那么痛苦。 回调是一个函数,可以将结果传递给函数并在该函数内进行调用,以便作为事件的响...
葡萄城控件技术团队 发布于 3个月前 阅读 2458 评论 16 点赞 5

AntV - 我认为这是一个不严谨的错误

AntV 钟表是一个Bug吧,我咋不是很肯定,因为不同角度不同结果吧
andotorg 发布于 3个月前 阅读 1592 评论 23 点赞 4

捋一捋JavaScript对象的继承

文章针对不理解继承的程序员朋友去剖析和理解继承.
Jill1231 发布于 4个月前 阅读 2598 评论 6 点赞 7

你可能不知道的前端知识点之:IntersectionObserver

本文是我的 [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know) 系列的第 5 个知识点。 ## 简介 - 你想跟踪 DOM 树里的一个元素,当它进入可视区域时得到通知。 - 你想实现延迟加载图片功能 - 你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 `scroll` 事件或者用一个周期性的定时器,然后在回调函数中调用元素的 [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 获取元素位置实现这个功能。但是,这种实现方式性能极差,因为每次调用 `getBoundingClientRect()` 都会强制浏览器 [重新计算整个页面的布局](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) ,可能给你的网站造成相当大的闪烁。 `IntersectionObserver` 就是为此而生的,它可以检测一个元素是否可见,`IntersectionObserver` 能让你知道一个被观测的元素什么时候进入或离开浏览器的视口。 ## 兼容性 - Chrome 51+(发布于 2016-05-25) - Android 5+ (Chrome 56 发布于 2017-02-06) - Edge 15 (2017-04-11) - iOS **不支持** ## Polyfill WICG 提供了一个 [p...
justjavac 发布于 4个月前 阅读 1152 点赞 5
顶部