前端
amberXu璇
这个作者很懒,什么都没留下…
展开
-
Vue:ElementUI怎么引入外部svg图标
推荐阿里巴巴图标库命令行运行npm install svg-sprite-loader创建icons/svg文件夹将svg文件放在该文件夹厦门在components文件夹中创建svgiconfont.vue文件文件内容:<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg><原创 2020-06-28 17:18:26 · 8865 阅读 · 0 评论 -
ES6-笔记1
Set和Map数据结构1.用法类似于数组,但是成员的值都是唯一的,没有重复的值。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4// 去除数组的重复成员[...new Set(array...原创 2019-06-02 22:49:41 · 169 阅读 · 0 评论 -
Webpack基础-2
webpack官网1.loadersvar path = require('path');module:{ loaders:[ { test:/\.js$/, //匹配条件,json文件 loader: 'babbel',//转换页面中的es6代码 include: path.resolve(__dirname, ' '...原创 2018-09-02 11:43:10 · 111 阅读 · 0 评论 -
CSS基础--居中
居中:定宽高适用absolute+负marginposition:absolute;top:50%;left:50%;margin-left:-50px;/*子元素宽度的一半的负值*/margin-top:-50px;/*子元素宽度的一半的负值*///缺点是需要知道子元素的宽度absolute+margin autoposition:absolute;top:0...原创 2018-09-18 21:54:54 · 90 阅读 · 0 评论 -
Vue基础笔记-2
指令v-bind:绑定,不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构v-for:绑定数组的数据,渲染一个项目列表v-if:条件v-on:指令添加一个事件监听器&amp;amp;amp;amp;amp;lt;button v-on:click=&amp;amp;amp;amp;quot;reverseMessage&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;逆转消息原创 2018-10-02 16:10:31 · 242 阅读 · 0 评论 -
前端布局笔记-01
水平居中父元素设置text-align:center;父元素position为relative;子元素position:absolute;left:50%;transform:translateX(-50%);弹性布局:父元素display:flex;子元素margin:o auto;或justify-content:center;子元素display:table;margin 0 au...原创 2018-10-17 22:44:57 · 159 阅读 · 0 评论 -
前端开发神器:Emmet插件
今天在逛CSDN时,发现了一个前端神器,IDEA内置了这个插件。所有操作按下“Tab”键完成生成HTML基本结构!或html:5或html:4s,按下Tab键嵌套操作使用“>”生成子元素使用“+”生成兄弟元素使用“^”生成父元素使用“”生成多个相同元素,例如div>ul>li5使用“()”将元素分组属性操作id:属性值之间用#隔开;class:用.隔开...原创 2018-10-22 12:28:40 · 260 阅读 · 0 评论 -
网站技术架构&Web前端性能优化笔记--01
考虑可用性、伸缩性、可扩展性、安全性应用服务与数据服务分离分类作用表头应用服务器处理业务逻辑内容文件服务器需快速进行磁盘检索和数据缓存内容数据服务器存储用户上传的文件资源80%的业务访问集中在20%的数据上,对一小部分数据进行缓存减轻数据库的访问压力缓存本地缓存:受应用服务器内存限制,缓存数据量有限,会出现内存争用远程分布式缓存:使用集...原创 2018-10-17 22:24:55 · 296 阅读 · 0 评论 -
Vue--使用Element
Element官网安装npm i element-ui -S运行时出现的错误Extra semicolon:不用分号Expected indentation of 0 spaces but found 2注意事项在 HTML 模板中始终使用 kebab-case当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (...原创 2018-10-22 16:16:31 · 201 阅读 · 0 评论 -
Angular异步请求
之前面试的时候,问我用Angular框架写的应用中有没有使用Ajax异步请求?我回答了没有。后来我发现应用中大部分的交互都是异步的,但并没有使用Ajax,这是应用Angular的Observable(可观察对象),可观察对象在应用的发布者和订阅者之间传递消息。可观察对象能进行事件处理、异步编程和处理多个值。调用subscribe() 方法,执行和创建可观察对象,接收通知 subscribe...原创 2018-11-07 13:44:01 · 1218 阅读 · 0 评论 -
JQuery&CSS3、HTML5新特性&struts2&
选择器ID选择器、class选择器、标签选择器、通用选择器(*)层次选择器(儿子选择器>,后代选择器 空格)、属性选择器(Tag[attrName=‘test’])eg: input[name=‘hahah’]JQuery的页面加载完毕时间$(document).ready(function(){});$(function(){});window.onload区别:JQuer...原创 2018-10-28 20:03:56 · 177 阅读 · 0 评论 -
My first Vue Project-01
创建一个empty工程安装vue-clinpm install -g @vue/cli创建vue projectnpm install -g @vue/cli-initvue init webpack vuedemonpm install 4. 运行npm run dev运行失败的原因是路径错误,找不到package.json解决方法:cd vuedemo...原创 2018-10-21 14:34:50 · 171 阅读 · 0 评论 -
前端构建工具Gulp
gulpGulp是构建工具,如今最流行的两个构建工具是Gulp和Grunt,主要区别是你如何使用他们构建自动化工作流。与Grunt相比,Gulp更加简洁,执行效率更高搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源,比如压缩CSS、JavaScript、压缩图片甚至可以搭建一个静态页面生成器安装npm install gulp -g####...原创 2018-10-23 22:47:45 · 239 阅读 · 0 评论 -
Juery----after、append、appendTo的区别
今天在面试的时候看到了这题,之前在本子上记过添加的区别,今天再来复习一遍,温故而知新。after定义:after() 方法在被选元素后插入指定的内容$(selector).after(content)append定义: append() 方法在被选元素的结尾(仍然在内部)插入指定内容。语法:$(selector).append(content)appendTo定义:appendTo...原创 2018-10-24 12:10:11 · 547 阅读 · 0 评论 -
ECMA
数据类型String、Number、undefine、Null、Symbol、Boolean、ObjectSymbolSymbol类型的值通过Symbol函数生成,相同的Symbol函数返回的值唯一。Symbol函数可接受字符串为参数。const(常量、必须初始化)、let、var、块作用域var:允许重复声明、支持变量声明解析、不支持块作用域let:不允许重复声明(暂存死区),必须...原创 2018-11-03 22:53:15 · 322 阅读 · 0 评论 -
Webpack基础-1
代码分割运行npm run webpack将css导入到js文件中require('style-loader!css-loader!./style.css')//css-loader使webpack能够处理css文件//style-loader将处理后的css添加到html代码中module.exports = { entry:'./src/main.js',/...原创 2018-09-01 22:37:27 · 100 阅读 · 0 评论 -
vuejs
挂载点:<div id="name"> vue会处理挂载点下的内容模板:挂载点下的内容 template实例:vue实例如下new Vue({ el:"#root", data:{ msg:"world", }, methods:{ handle: function(){ } }})v...原创 2018-08-29 22:34:16 · 96 阅读 · 0 评论 -
CSS的优先级
CSS优先级是如何工作????将优先级表示为用逗号隔开的四个数字就会相当简单,比如:1, 1, 1, 1 或0, 2, 0, 1第一个数字(a)通常就是0,除非在标签上使用style属性;第二个数字(b)是该选择器上的id的数量的总和;第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red]);...原创 2018-07-23 23:47:52 · 118 阅读 · 0 评论 -
HTML5知识补充
新特性:Indexed DB本地存储功能、脱离Flash 和Silverlight直接在浏览器中显示图形或动画、一个HTML5文档到另一个文档间的拖放功能设置 CSS 的 display 属性值为 blockheader, section, footer, aside, nav, main, article, figure { display: block;}HTML5新元素...原创 2018-07-25 16:32:22 · 168 阅读 · 0 评论 -
Flex 布局
Flex 布局弹性布局:采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。容器默认存在两根轴 1.水平的主轴(main axis),主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end ...原创 2018-07-25 18:35:53 · 97 阅读 · 0 评论 -
ANGULAR框架
1.设置开发环境安装Node.js和npm,全局安装Angular CLInpm install -g @angular/cli 2.创建新项目打开终端窗口,使用 ng add 命令往新项目中添加一些预先打包好的功能, Angular Material 就为一些典型布局提供了图纸ng new my-app3.启动开发服务器监听文件变化,并在修改这些文件时重新构建此应...原创 2018-07-26 01:06:40 · 1290 阅读 · 0 评论 -
TypeScript语法
安装:npm install -g typescript编译:tsc greeter.ts类型注解:person:string接口: interface Person{ firstName:string; lastName:string } 调用: person:Person ...原创 2018-07-29 01:12:57 · 593 阅读 · 0 评论 -
对于Angular的新理解
由于过去在设计页面的习惯,拿到一个任务时想的最多的可能是先将设计好页面,然后再通过DOM操作去修改它。但是运用Angular框架时应该先设计好框架,而不是想着怎么让一个DOM元素去完成某一件事。以架构为中心思考在指令(directive)之外不应该做DOM操作,不应该设计好再去修改而是有了架构再去设计。运用数据绑定更新视图,不用写操作DOM的代码...原创 2018-07-30 02:40:09 · 330 阅读 · 0 评论 -
Angular框架入门——路由
Angular需要知道应用程序的各个部分怎么组合在一起,应用程序需要哪些其他文件和库,这些就是元数据。元数据在装饰器中,@Component@NgModule注释顶级AppModule类添加 AppRoutingModule一个独立的顶级模块中加载和配置路由器,位于 src/app 下的 app-routing.module.ts 文件中由根模块 AppModule 导入它n...原创 2018-07-26 21:28:46 · 295 阅读 · 0 评论 -
Angular--模拟数据服务器
HttpClient 打开根模块 AppModule, 从 @angular/common/http 中导入 HttpClientModule 符号, 把它加入 @NgModule.imports 数组。 模拟数据服务器内存Web API(In-momory Web API),通过HttpClient发起请求和接收响应npm install angular-...原创 2018-07-26 23:13:27 · 910 阅读 · 0 评论 -
Angular6的核心概念详解
Angular 2迁移组件式开发渲染更快、变化监测效率更高Angular Mobile Toolkit可用ES6/7、WebComponent UpgradeAdapter两个版本代码进行适配 组件及组件树(Component) 核心分为Header、ContactList、Footer父子组件:Contact什么是生命周期钩子? ...原创 2018-07-27 14:31:26 · 1348 阅读 · 0 评论 -
Angular架构
Angular 的基本构造块是 NgModule 至少会有一个用于引导应用的根模块(AppModule),和很多特性模块,提供上下文环境组件定义视图 组件使用服务宿主视图、内嵌视图、@angular 前缀模块模块化系统,称作 NgModule,一个容器,用于存放一些内聚的代码块@NgModule 装饰器 declarations(可声明对象表) —— 那...原创 2018-07-27 20:37:43 · 874 阅读 · 0 评论 -
Angular语法
插值表达式{{}}模板表达式:具有新的模板表达式运算符,比如 |、?. 和 !。如[property]="expression"。表达式的上下文可以包括组件之外的对象。 比如模板输入变量 (let hero)和模板引用变量(#heroInput)就是备选的上下文对象之一。表达式中的上下文变量是由模板变量、指令的上下文变量(如果有)和组件的成员叠加而成的模板变量是最优先的,其次是指令...原创 2018-07-27 21:58:59 · 533 阅读 · 0 评论 -
ES5、ES6、ES7、ES8特性
1.JavaScriptECMAScript、DOM(文档对象模型)、BOM(浏览器对象模型) JavaScript语言的执行环境是“单线程”2.ES5strict模式 不允许使用未声明的变量 不允许删除变量或对象、函数 不允许变量重名 不允许使用八进制 不允许使用转义字符 不允许对只读属性赋值 不允许对一个使用getter方法读取的属性进行赋值 不允许删...原创 2018-08-29 22:33:41 · 5803 阅读 · 0 评论 -
TypeScript与Date类型
js的继承方式 /** * 经典的js寄生组合式继承 */function MyDate() { Date.apply(this, arguments); this.abc = 1;}function inherits(subClass, superClass) { function Inner() {} Inner.prototype ...原创 2018-08-24 19:23:45 · 25407 阅读 · 1 评论