- 博客(32)
- 收藏
- 关注
原创 使用插值表达式出现闪烁的效果
使用 插值表达式 时,有一个问题:就是当网速很慢时,当vue.js还没有加载出来的时候,中间的插值表达式就会在页面上显示,当vue.js加载完之后才会显示插入的内容,出现闪烁的效果(在Chrome浏览器开发者工具中的Network修改Online为slow 3G,可以模拟网速很慢的效果)解决方法:使用v-cloak解决,这个指令会保存在 元素上 直到关联实例编译结束。v-cloak指令(属性)...
2019-05-23 09:16:21
1092
原创 Vue自定义指令
自定义全局指令注意:在Vue中,所有的指令在调用的时候,都以 v- 开头自定义全局指令,Vue.directive("指令的名称", 对象)和定义过滤器一样:全局的是不用加s的,私有的是要加s的第一个参数是 指令的名称,注意,在定义的时候 指令的名称前面 不需要加 v- 前缀但是,在调用的时候,必须在 指令的名称前面加上 v- 前缀进行调用第二个参数是一个对象,这个对象身上有一些...
2019-05-18 14:57:14
188
原创 Vue实例的生命周期
什么是生命周期从Vue实例创建、运行、到销毁期间总是伴随着各种各样的事件,这些事件统称为生命周期函数,由这些事件组成vue实例的生命周期生命周期钩子=生命周期函数=声明周期事件主要的生命周期函数创建期间的生命周期函数运行期间的生命周期函数销毁期间的声明周期函数...
2019-05-18 14:44:37
202
原创 后端的MVC和前端的MVVM的区别
MVC是后端的分层开发的概念M是Model层,主要处理数据的CRUDV是视图层,一般就是前端的页面C是业务逻辑层MVVM是前端视图层的概念
2019-05-18 14:34:14
1147
1
原创 JavaScript正则表达式
也叫规则表达式,按照一定规则组成的一个表达式,主要的作用是匹配字符串正则表达式在大多数编程语言中都可以使用正则表达式的组成:是由元字符或者限定符组成的式子元字符. 表示除\n之外的任意一个字符[] 表示的是范围[0-9] 表示由0到9之间的任意一个数字[a-z] 表示的是所有小写字母中的任意一个[A-Z] 表示的是所有大写字母中的任意一个...
2019-05-18 13:41:33
90
原创 JavaScript浅拷贝和深拷贝
浅拷贝指的是把一个对象中的所有内容复制一份给另外一个对象,当复制的属性是对象时,是把一个对象的地址复制给了另外一个对象,他们的指向相同//浅拷贝var obj1={ age:10, sex:"男", sayHi:function () { console.log("您好哇"); }};var obj2={};for (var key ...
2019-05-18 12:35:08
89
原创 JavaScript闭包
闭包的概念:函数A中有一个函数B,函数B可以访问在A内定义的变量或者数据,此时形成了闭包(暂时不严谨)闭包的模式函数模式的闭包:在一个函数中有一个函数,内部的函数访问了外部函数中定义的变量对象模式的闭包:一个函数中有一个对象,对象的属性或者方法访问了外部定义的变量闭包的作用:缓存数据,延长作用域链闭包的优点和缺点:优缺点都是缓存数据(变量没有及时地释放)函数模式的闭包:fu...
2019-05-18 12:28:55
92
原创 JavaScript高阶函数
函数声明和函数表达式的区别函数声明如果是放在if-else语句中,在IE8浏览器中可能会出现问题,因为IE8浏览器中在预解析的时候会把函数声明提前,如果有同名的函数,那么后面的函数声明会把前面的函数声明覆盖掉以后可以用函数表达式的尽量用函数表达式函数的调用普通函数====》直接调用构造函数====》通过new的方式调用对象方法====》通过对象调用函数中的this指向问题...
2019-05-18 11:37:51
287
原创 JavaScript继承
面向对象编程思想:根据需求,分析对象,找出对象有什么特征和行为,通过代码的方式实现需求,要想实现需求,就要创建对象,要想创建对象,就应该先有构造函数,然后通过构造函数来创建对象,通过对象调用相应的属性和方法实现相应的功能和需求。首先JS不是一门面向对象的语言,JS是一门基于对象的语言,学习JS还要学习面向对象的思想,是因为面向对象的思想适合于人的想法,编程起来更加方便,利于后期的维护…(面向对象...
2019-05-18 10:57:41
74
原创 JavaScript原型及原型链
原型什么是原型?实例对象中有一个属性:__ proto__,是对象,叫原型,但不是标准的属性,是浏览器使用的,有的浏览器如谷歌和火狐支持,但是IE8不支持构造函数中有一个属性:prototype,也是对象,也叫原型,是标准的属性,是程序员使用过的,所有的浏览器都支持原型:__ proto__或者prototype(两者指向的是同一个对象),都是原型对象原型的作用通过原型来添加方法(...
2019-05-18 10:11:47
125
原创 js创建对象的三种模式(工厂模式,构造函数模式,原型模式)
// js 中创建对象有三种模式:工厂模式,构造函数模式,原型模式// 工厂模式创建对象function createPerson(name, age) { var obj = new Objext(); obj.name = name; obj.age = age; obj.sayHi = function() { console.log('h...
2019-05-18 09:07:49
161
原创 JavaScript基本包装类型
普通变量不能直接调用属性和方法对象可以直接调用属性和方法基本包装类型:本身是基本类型,但是在执行代码的过程中,如果这种类型的变量调用了属性或方法,那么这种类型就不再是基本类型了,而是基本包装类型,这个变量也不是普通的变量了,而是基本包装类型对象基本包装类型的问题:对象&&true的结果是truetrue&&对象的结果是对象var flag = n...
2019-05-16 08:12:25
94
原创 JavaScript内置对象
指的是JavaScript系统自带的对象实例对象、静态对象实例对象:通过构造函数创建出来,也叫实例化的对象静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象的名字调用实例方法:必须通过实例对象调用静态方法:必须通过大写的对象调用Math对象常用API:Math.PI -------- πMath.E -------- 是一个常数,指的是自然对数的底数...
2019-05-15 18:24:50
110
原创 JavaScript数组和函数及作用域
数组一组有序的数据可以一次性存储多个数据数组通过构造函数创建数组var 数组名 = new Array( );给定参数时,如果只有一个数字参数那么指的是数组的 长度(数组中的元素没有给定那么每个元素是undefined),如果给定 多个参数 那么给定的是数组中的元素没有给定参数时创建的是空数组通过 字面量 创建数组var 数组名 = […];可以通过索引(...
2019-05-15 17:58:08
202
原创 JavaScript的6种原始数据类型和运算符
JavaScript中的六种原始数据类型number:整数或小数boolean:布尔类型(true,false)null:空类型,值只有一个即null (但是使用typeof获取值为null的变量的类型得到的结果是object,因为是空对象)string:单引号或者双引号object:对象类型undefined:未定义,值只有一个即undefined什么情况下的结果是undefin...
2019-05-15 17:44:18
357
原创 JavaScript基本介绍
JavaScript(JS)分为三个部分ECMAScript标准:JS基本的语法DOM(Document Object Model,文档对象模型)BOM(Browser Object Model,浏览器对象模型)JavaScript是什么?是一门脚本语言:不需要编译直接运行是一门解释型语言:遇到一行代码就解释一行代码是一门动态类型的语言:代码(变量)只有执行到这个位置时,才...
2019-05-15 13:55:05
172
原创 网站优化三大标签
SEO(search engine optimization),即搜索引擎优化,分为站内优化和站外优化,目的是为了提高网站关键词排名和公司产品曝光度。站内优化使用三大标签:titletitle标签具有不可替代性,是内页第一个重要标签,是搜索引擎了解网页的入口title有自己的语法规范标题长度:Google(70kB)35个中文;百度(56KB)28个中文(基本上所有网站的titl...
2019-05-15 13:39:55
329
原创 CSS字体图标
web字体为自己的网页指定特殊的字体,无须考虑用户电脑上是否安装了此字体。可以在 阿里妈妈webfont 平台上输入想要使用指定字体的文字内容,然后下载下来用法和web字体图标一样声明自定义字体:@font-face(直接复制)定义应用字体的样式为元素应用样式注意使用web字体时,只有输入的内容中的文字才会应用下载下来的字体,因为下载下来的文件里面是输入的内容的文字的编码...
2019-05-15 13:16:11
1493
原创 CSS精灵技术(sprite)
一个网页中经常会应用很多很小的图片进行装饰,当网页中图片过多时,服务器会频繁地接收和发送请求,这将大大地降低页面的加载速度。为有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术。精灵技术的本质是处理网页背景图像的一种方式,是将一个页面中涉及到的所有零星的背景图像集中到一张图片中去,不是背景图像的图片不应该放到一张大图上作为精灵图。精灵技术的使用各个网页元素通常只...
2019-05-15 13:06:34
406
原创 CSS设置文字溢出部分显示省略号
white-space属性white-space: normal; 即默认的显示方式,当文字内容超出文本框时会自动换行全部显示white-space: nowrap; 文本不会自动换行,而是强制一行全部显示,直到文本结束或者遇到br元素才换行overflow: hidden; 溢出隐藏,超出盒子大小的文本隐藏不显示text-overflow文字溢出text-overflow: ...
2019-05-15 13:02:33
470
原创 vertical-align垂直居中
块级元素 没有这个属性,是不能让盒子垂直居中的vertical-align: baseline; 基线对齐 (默认 图片与文字的对齐方式是 基线对齐)vertical-align: top; 顶线对齐vertical-align: middle; 垂直居中,中线对齐vertical-align: bottom; 底线对齐用于控制图片、表单和文字的垂直关系行内块元素都有一个默认...
2019-05-15 12:56:50
437
原创 CSS元素显示与隐藏
display显示display: none; 隐藏某个元素特点:隐藏之后,不保留位置display: block; 显示某个元素visibility可见性visibility: hidden; 隐藏某个元素特点:隐藏之后,位置仍然保留visibility: visible; 显示某个元素overflow溢出隐藏overflow: visible; 当文...
2019-05-15 12:46:33
5282
原创 CSS清除浮动
本质为什么清除浮动:是为了解决 父级元素因为子级元素浮动 引起内部高度为0 的问题(父亲不方便给高度因而一开始没有指定高度,当子级元素没有浮动时子级元素的大小会撑开父级元素,但当子级元素浮动时子级元素脱标,不再占用位置导致父级元素高度为0)清除浮动的方法CSS样式属性 使用 clear:right或left或both(多数为both)额外标签法:W3C推荐的方法,通过在最后一个浮动元...
2019-05-14 18:56:23
1042
原创 CSS的三种定位机制
普通流(标准流)页面内元素按正常情况,从上到下,从左到右排序显示,块级元素占一行,一行内可以有多个行内元素浮动最主要的作用是可以使多个div在一行内显示(使用模式转换为inline-block有一些缺点,如盒子中间会出现缝隙,很难解决)使元素脱离标准流(脱标),元素不占位置float:left或right或none;浮动有 隐藏模式转换 的作用,会使 块级元素 默认转换为 行内块元素...
2019-05-14 18:34:01
414
原创 CSS3圆角边框
(CSS3,需要考虑兼容性的问题)border-radius: 像素或者百分比;(盒子为正方形时:一半像素或者50% 时成为一个标准的圆)border-radius: 左上 右上 右下 左下; -—— 给定四个值时,可以控制四个角的圆形程度不同border-radius: 左上右下 右上左下; (即对角线) —— 只给定两个值时border-radius: 左上 ...
2019-05-14 18:29:28
1013
原创 CSS盒子模型
盒子边框border-width:边框粗细border-colorborder-style:none(没有边框),solid(实线边框),dashed(虚线),dotted(点线)连写:border: 1px solid red; —— 像素 样式 颜色border-top, border-bottom, border-left, border-right表格合并相邻边框:给表格...
2019-05-14 18:22:56
111
原创 CSS背景
backgroundbackground-colorbackground-image: url(图片路径,不需要使用双引号)background-repeat:背景是否平铺,可能的值有 repeat(默认)和 no-repeat(不平铺)和 repeat-x(水平方向平铺)和 repeat-y(垂直方向平铺)background-position:后面跟两个参数,第一个表示x轴,第二个表...
2019-05-14 18:09:17
81
原创 CSS三大特性
层叠性浏览器处理冲突的一种能力,有冲突的样式按CSS的书写顺序 以最后书写的CSS样式为准,只有冲突的样式会被层叠继承性子标签可以从其父标签继承部分样式(一般情况下与文本相关的会继承)优先级类选择器的优先级比标签选择器的优先级(权重)高不同的选择器有给定的权重,权重越大的越先执行标签选择器的贡献值为0,0,0,1,类选择器的贡献值为0,0,1,0,两个贡献值的比较是从右到左比较,高...
2019-05-14 17:56:41
63
原创 CSS行高的测量
一般默认的字体大小为16px行高是相邻行“基线”之间的距离,是包含行间距的使用line-height设置行高时,除去字体大小剩下的距离会在行的上边和下边平分,即:行高=字体大小+上边距+下边距(同时上边距等于下边距)所以当设置行高为盒子大小的时候可以使文字在垂直方向居中,如果行高小于盒子大小那么文字偏上,如果行高大于盒子大小那么文字偏下...
2019-05-14 17:50:39
1106
原创 CSS显示模式(display)
块级元素:占据独立的区域,可以设置高度宽度 即可以设置区域的大小(div是典型的块级元素)行内元素:不占据独立的区域,只能依靠元素内容 支撑其大小,不能设置其高度和宽度(如span);行内元素只能放行内元素,不能放块级元素行内块元素:很少,有img,input,td;既有块级元素的特点:可以设置宽高,又有行内元素的特点:一行可以放很多个显示模式的转换display:inline; ...
2019-05-14 17:46:53
139
原创 CSS字体样式
font-size指定字体大小,常用单位有em和pxfont-family指定使用的字体常用的中文字体有微软雅黑和宋体,英文字体有Arial可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用...
2019-05-14 17:34:17
19387
原创 CSS选择器
CSS选择器标签选择器:把某类标签全部选择出来类选择器使用点(.)号调用id选择器使用#号调用,与class不同,只能是唯一的,一个id只能为一个标签使用多类名选择器可以为标签定义多个类名,使用空格分隔,可以有多个标签定义相同的类名,使用点号.调用注意样式显示效果 与类名在HTML标签中定义的顺序没有关系,与类名对应样式 在CSS样式表中 的先后顺序有关系(后来居上...
2019-05-14 17:13:32
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人