饮泣的你-CSDN博客

原创 css属性 object-fit 和 object-position

object-fitCSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。您可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。object-fit 属性由下列的值中的单独一个关键字来指定。取值contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元...

2020-07-14 17:53:47 449

转载 Flex 布局教程：语法篇

作者：阮一峰日期：2015年7月10日转自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。...

2020-07-14 16:31:43 152

原创 ES6入门：Generator 函数

语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator 函数是一个普通函数，但是有两个特征。特点：1.函数名前面带一个*，和普通函数做区分2.内部使用yield表达式，定义不同的内部状态。function* show(){ yield 'Hello'; yield 'World'; yield '...

2019-02-21 10:21:52 183

原创 ES6入门：Promise 对象

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。const promise=new Promise(function(resolve,reject){ if (/* 异步操作成功 */){ resolve(value); } else { reject(error); ...

2019-02-19 15:44:26 132

原创 ES6入门：Module

export 命令模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。// profile.j...

2019-01-22 16:53:06 225

原创 ES6入门：Class 的继承

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 //传统面向对象写法function Person(name,age){ // 类、构造函数 ...

2019-01-22 16:12:29 240

原创 ES6入门：对象的扩展

1. 对象的简洁语法//传统对象_单体模式写法 key-value模式 var person = { name:'pp', age:24, showName:function(){ return this.name; }, showAge:function(){ return this.age; ...

2019-01-16 16:20:08 264

原创 ES6入门：箭头函数

ES6 允许使用“箭头”（=>）定义函数。var f = v => v;// 等同于var f = function (v) { return v;};如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () => 5;// 等同于var f = function () { return 5 };var s...

2019-01-16 14:07:07 415

转载 ES6入门：数组的扩展运算符

1.扩展运算符扩展运算符（spread）是三个点（...）。将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3])// 1 2 3console.log(1,...[2,3,4],5)// 1 2 3 4 5 6[...document.querySelectorAll('div')]// [div,div,div...]该运算符主要用于函数调用...

2019-01-16 11:50:09 138

转载 ES6入门：模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '&lt...

2019-01-16 10:14:18 129

原创 ES6入门：变量的解构赋值

1.数组的解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。let a = 1;let b = 2;let c = 3;ES6 允许写成下面这样。let [a, b, c] = [1, 2, 3];只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用...

2019-01-15 17:16:08 136

原创 vue组件（三）—自定义事件

事件名跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件： this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的： <my-component v-on:my-event="doS...

2018-09-29 17:54:30 6581

原创 vue组件（二）--prop传递数据

组件组合组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。在 Vue 中，父子组件的关系可以...

2018-09-28 16:35:08 1080 1

原创 vue组件（一）——组件介绍

定义组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象例如 data、computed、watch、meth...

2018-09-28 10:12:34 265

转载 css3 Filter 的十种特效

css3中的filter属性可以说是简单易用且强大，这些效果作用在图片上实现一些特效（也可以作用在vidio上，此处只讨论图片特效）。浏览器兼容性　　目前各大浏览器对于css3的兼容已经非常好了，最新版本都可以支持css3，老版本的ie9以下的还是不支持，不过这不是重点，微软都准备放弃这些老古董了。另外ie的滤镜也是可以做到的，会另加讨论。语法filter: none | blu...

2018-09-26 16:35:29 1664

原创 ES6 入门：let 和 const 命令

1. let 命令 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。作用域规则{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1let声明的变量只在它所在的代码块有效。这一点，与var相似。二者之间最...

2018-08-20 14:33:00 167

原创 contenteditable型的编辑框，实现placeholder

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>contenteditable</title><style>.content{width:380px;height:100px

2018-08-08 10:20:50 1398

转载 this绑定机制

为什么要用this： function identify() { console.log("Hello,I'm " + this.name);}let me = { name: "Kyle"};let you = { name: "Reader"};identify.call(me); // Hello,I'm Kyleidentify.call(you); // Hel...

2018-07-04 14:09:10 171

转载 vue-router 基本使用

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。　　点击之后，怎么做到正确的对应，比如，...

2018-07-03 18:58:56 2201

转载十分钟入门Less ———转自简书，作者ghwaphon

这篇文章来自 Danny Markov，是我最喜欢的博主之一，实际上我最近翻译的一些文章全是出自他手。在查看本文之前你也可以查看原文。我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。很幸运，网站开发社区已经解...

2018-06-13 18:10:00 205

原创学习 CSS3 backface-visibility

定义和用法backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。浏览器支持Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。语法ba...

2018-06-01 10:19:29 390