◆前端框架
文章平均质量分 79
菜腿1994
这个作者很懒,什么都没留下…
展开
-
XML——网页语言的又一次飞跃
【前言】 在学习xml的网页语言的过程中对比着过去学习的html的语法,感觉到xml非常的好用。记得在学习asp.net的过程中我始终搞不明白为什么要使用的标记一定是等,这些还需要记忆的标记,但是xml好像完美的解决了这种问题,给网页设计带来了方便。【内容】 一: Xml,可拓展标记语言,它与html一样,都出自于SGML标准 通用标记语言,但是xml是internet环境原创 2016-05-27 13:19:18 · 1213 阅读 · 51 评论 -
vue.js入门(五)——如何操作底层DOM
前言:其实在没有学习前端框架之前使用dom操作非常的普遍,但是前端框架的一个好处就是避免使用dom底层操作,安全并且高效,但是有时候我们又不可避免的使用它,所以vue给dom操作留了一个后门,让我们在不得以的情况下使用它完成我们的功能!内容:在指定元素上,添加ref=“名称A”;在获取的地方加入this.$refs.名称A: 1. 如果ref放在了原生dom元素上,获取的诗句就是原生的dom对原创 2017-10-29 23:35:56 · 4861 阅读 · 0 评论 -
Vue.js入门(一)——创建第一个vue.js项目
前言 前端工程化愈演愈热,熟悉几个前端的框架非常的有必要,在接触了angular2的项目之后,再来熟悉一款轻便型的前端框架-Vue,也是目前热门的前端框架之一。 内容 一.vue是什么? Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架(Angular2)不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有原创 2017-10-16 10:53:23 · 8998 阅读 · 18 评论 -
Node.js入门(二)——调用函数方式小结
前言nodejs调用函数主要是调用本js内部的函数,还有就是外部的函数,而调用外部函数主要的方式就是调用的函数开放可以让主函数调用,废话不说,下面开始详细讲解node.js的调用函数的具体使用。内容环境下载node-v8.9.0-x64.msi使用nodepad++,或者其他的文本编辑器 测试node.js安装成功使用命令,出现node的版本号即安装成功 node原创 2017-12-10 19:04:34 · 876 阅读 · 14 评论 -
Node.js入门(三)——简单读写文件
前言本篇小编主要介绍node.js读取html,并且想html文件写入的方式。内容目录结构 file文件下存放了login.html,module文件下存放optfile.js 1.optfile.jsvar fs=require('fs');module.exports={ readfileSync:function(path){//同步读取原创 2017-12-17 22:43:44 · 362 阅读 · 16 评论 -
【js实践篇】——echart.gl.js实现动态3D柱状图
前言本公司的项目需求主要是根据各个省的信用度的高低情况做一个动态的3D动态,能够展示省的信用高低值!内容1.准备工作jquery.min.js最新的echart.min.js,官网在此自行下载echart-gl.min.js2.代码实现html>head>title>echartstitle>meta charset="UTF-8">head>原创 2018-01-31 23:17:10 · 15469 阅读 · 23 评论 -
css进阶(二)——float使用详解
前言其实在做前端页面的时候我们都或多或少的使用过float这个css属性,但是说实话之前我一旦遇到元素要放在左边或者右边的时候就会用这个属性,但是使用float会出现一些意想不到的效果,由于他的特殊性,脱离文档流的控制,会打乱布局,所以对于float的使用有相关的解决方案。内容float的主要应用的两种情况:一.文字的环绕1.图片和标签包含在一个 section=元素中,而 s...原创 2018-03-01 22:46:32 · 818 阅读 · 9 评论 -
JavaScript进阶实例——小小贪吃蛇游戏
前言最近接触的JavaScript的代码比较多,而且发现自己也越来越喜欢这门语言,闲来无事就从网上敲JavaScript的小小实例,用自己学到的语言给自己带来快乐!内容贪吃蛇游戏整体思路:游戏刚开始的设定初始蛇位置,通过键盘的上,下,左,右事件,控制蛇移动的方面;再设置食物,将两条蛇坐标靠近组合成一条蛇一:放置画布,设定样式:<!doctype html>...原创 2018-03-11 19:03:46 · 598 阅读 · 14 评论 -
css进阶(一)——css选择符
前言 在介绍css选择符之前,先科普一下css选择符的意义,它是用于指出规则所要选择的元素,换句话就是定位特定元素,例如p,li,定位到p元素或者li元素上面,而选择符分为上下文选择符,ID和类选择符,属性选择符。 内容上下文选择符 ——基于祖先和同胞中选择一个元素html代码:<html> <head> <m...原创 2018-02-25 22:52:18 · 474 阅读 · 31 评论 -
【CSS实践】——div和table中容纳长文本设置省略值...
前言积累一下css代码,关于html中文本过多,不想全部展示,多余部分被省略号替代内容关于table中td中文本超过td大小设置省略值<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></ti..原创 2018-04-26 23:03:46 · 355 阅读 · 15 评论 -
【CSS实践】——如何将一个div打造成一条仿颜色渐变线
前言我们公司最近在设计首页的时候美工标题下方有一条颜色渐变的线,我尝试了很多种方法但都没有达到预想的效果,最终通过了div设计出来了!内容 其实设计的效果就是像hbuilder中文字下方区域效果 .div-line{ margin:0 auto; height: 2px; width: 20rem; background: radial-gradi...原创 2018-04-26 23:23:11 · 2920 阅读 · 21 评论 -
Angular进阶(二)——通过实例深入理解组件通信
springmvc的参数绑定采用方法形参来接收原创 2018-05-20 22:52:54 · 962 阅读 · 51 评论 -
vue.js入门(四)——自定义过滤器
前言虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。但是Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,使用管道|来完成过滤,小编本篇使用过滤器简单实现字符串反转!即下面这种效果: 内容自定义过滤器函数格式: Vue.filter() Constructor Parameters: 1.filterId: 过滤器ID,用来做为你的过滤器的唯一标识;原创 2017-10-22 21:09:29 · 529 阅读 · 17 评论 -
Vue.js入门(三)——关于组件以及组件通信
前言 学习过angular2都知道angular的核心是组件,通过组件之间可以通信,同样Vue.js组件也可以进行通信,只是和angular2有一些不一样!内容vue的每一个组件包括三个部分template,scripte,style。真正要用到组件包括两部:创建组件和注册组件。 1.创建组件:在vue环境下创建一个组件非常容易,只需要在components文件夹下面创建一个带有后缀名的.vue的原创 2017-10-19 20:09:49 · 507 阅读 · 17 评论 -
Vue.js入门(二)——常用指令
前言前面我们已经讲过vue.js基本的搭建环境,现在学习一下vue.js的常用的指令。真正编写vue代码之前,小编强烈建议在vscode中添加插件vetur,可以自动补全代码,而且可以更快的查找错误。内容App.vue的页面包含了template,JavaScript,style三个部分,将在这个页面实现讲述常用的Vue八种指令: v-text v-html v-if v-sh原创 2017-10-19 12:24:46 · 504 阅读 · 15 评论 -
《angular2入门系列基础》——路由Route详解
路由基本对象: 名称 功能介绍 Routes 路由配置,保存着url对应展示哪一个组件,及RouterOutlet展示组件 RouterOutlet Html中标记路由内容呈现位置的占位符指令 Router 负责运行时执行路由的对象,调用navigate()和navigateByUrl()方法导航到一个指定的路由 RouterLink 在Html中声明由导航用的指原创 2017-09-05 17:52:14 · 4097 阅读 · 11 评论 -
《Angular2入门系列实践》——如何实现路由传值
背景 Angular项目下一个路由如何接收到上一个路由url中的参数id?解决方案1.父路由routes配置方式:export const EvaluationQuestionnaireRoute=[ { path:':edit/:id', //必须是路径名:/id component:EditQuestionnaireComponent },2.跳转传原创 2017-09-05 21:15:23 · 2918 阅读 · 9 评论 -
《angular2入门系列实践》——表单验证详解
背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!!1.创建表单组件:ng g c login2.1单规则验证:<label>用户名:</label> <input type="text" #userNameRef=ngModel [(ngModel)]=userName required> <span [s原创 2017-09-02 20:16:28 · 5187 阅读 · 8 评论 -
《Angular2入门系列实践》——如何添加ng-bootstrap插件
配置环境 1.cnpm安装ng-bootstrap模块cnpm install @ng-bootstrap/ng-bootstrap --save 随后package.json中显示依赖: 2.引入bootstrap样式,js代码 在index.html中直接引入cdn服务器上bootstrap样式<!-- 新 Bootstrap 核心 CSS 文件 --><link rel=原创 2017-09-02 17:13:16 · 4586 阅读 · 7 评论 -
《Angular2入门系列基础》——angular2组件入门(一)
【前言】 从angular2架构方面看包括8个部分:模块(modules),组件(Components)模板(Templates)元数据(Metadata)数据绑定(Data Binding)指令(Directives)服务(Services)依赖注入(Dependency Injection);稍稍讲解一下组件!【内容】 Angular应用是由组件组成的。组件是由html和组原创 2017-07-02 22:07:01 · 609 阅读 · 20 评论 -
《Angular2入门系列基础》——pipe管道数据类型
【前言】 angular2数据类型校验可以使用管道,管道有内置管道(DatePipe,UpperCasePipe,LowerCasePipe和PercentPipe),它们可以用于全部的模板中;链式管道(指多种管道组合在一起,以完成潜在的有用功能);自定义管道可以定义一些特定的类型为自己所用。【内容】1.内置管道使用:import { Component } from '@a原创 2017-08-06 22:03:58 · 1024 阅读 · 14 评论 -
《Angular2进阶系列实践》——(阅读理解)题型组件开发
【前言】 最近做前端工程话的时候【内容】 1.题型组件:阅读理解; 2.实现效果:【总结】原创 2017-07-30 21:30:36 · 531 阅读 · 20 评论 -
《Angular2入门系列实践》——实现页面动画效果
angular2前端工程化原创 2017-07-23 22:04:44 · 2163 阅读 · 17 评论 -
《Angular2入门系列实践》——适应手机实现触屏滑动
【前言】 最近在ITOO的随堂小练中有一个滑屏的效果,为了实现效果,我在页面中引进了swiper.js插件,但是在这个过程中还是学习了一些东西! 【内容】 1.首先下载swiper.js和swiper.css放置到项目的assets文件下 2.然后将js的代码放置到angular的index.html的页面,这个是项目的起始页,只要项目加载,就会加载swiper的js原创 2017-08-20 22:11:12 · 2361 阅读 · 19 评论 -
《Angular2入门系列基础》——常见angular-cli命令
angular-cli提供的常用命令 ng generate class my-new-class // 新建 class ng generate component my-new-component // 新建组件 ng generate directive my-new-directive // 新建指令 ng gener原创 2017-08-27 22:30:07 · 1886 阅读 · 19 评论 -
Angular2进阶(一)——如何避免Dom误区
Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试和重构。为了支持跨平台,Angular还通过抽象封装了不同平台的差异。原创 2017-09-17 22:08:30 · 3519 阅读 · 11 评论 -
《Angular2入门系列基础》——ActivatedRoute路由
前言 ActivatedRoute,当前激活路由对象,主要用于保存路由,获取路由传递的参数。 内容 一:传递参数的三种方式,以及ActivatedRoute获取他们的方式:1.在查询参数中传递数据:/product?id=1&name=2/**获取参数*/=>ActivatedRoute.queryParams[id]2.在路由路径中传递数据://路由配置{path:'/原创 2017-09-05 21:31:13 · 13629 阅读 · 15 评论