07 2019 档案
摘要：一、什么是 Mint UI 1、Mint UI 包含丰富的 CSS 和 JS 组件，可以提升移动端开发效率 2、Mint UI 按需加载组件 3、Mint UI 轻量化 二、Mint UI 的安装 1、在项目根目录终端引入： 2、在 main.js 中加入： 同时在 main.js 中通过全局方法
阅读全文
摘要：一、组件的创建 在 components 文件夹下新建一个组件 runoob.vue 二、组件的引用 1、通过 import 导入组件 runoob.vue 2、在 components 下注册该组件 3、在标签中引用 完整示例： 运行结果： 三、组件的自定义属性 1、Prop 传属性值 prop
阅读全文
摘要：一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 2、Vuex 采用集中式存储和管理应用中所有组件的状态 3、Vuex 应用的核心是 store（仓库）-- 包含 state（组件中的共享状态）和 mutations（改变状态的方法） 二、Vuex 的安装 1
阅读全文
摘要：一个简单的 Vue 计数应用： 该状态自管理应用包含以下几个部分： state：驱动应用的数据源 view：以声明方式将 state 映射到视图 actions：响应在 view 上的用户输入导致的状态变化 state：驱动应用的数据源 view：以声明方式将 state 映射到视图 actions
阅读全文
摘要：Vue.js 路由可以通过不同的 URL 访问不同的内容，实现多视图的单页 Web 应用 1、通过 <router-link> 实现 <router-link> 组件用于设置一个导航链接，切换不同 HTML 内容 使用方法： 简单写法 简单写法 使用 v-bind 的写法 使用 v-bind 的写法
阅读全文
摘要：1、Vue 过渡组件 Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果 语法格式： 2、过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换： v-enter：进入过渡的开始状态 v-enter：进入过渡的开始状态 v-enter-active：进入过渡生
阅读全文
摘要：1、在要获取的标签中添加 ref="xx" 示例： 2、在 mounted 钩子中使用 this.$refs.xx. 获取并操作 DOM 元素 示例： 3、vue 操作 DOM 完整示例： template 部分： script 部分：
阅读全文
摘要：1、编译环境不同 SASS 的安装需要 Ruby 环境，是在服务端处理的； LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器，也可以在开发环节使用 LESS，然后编译成 CSS 文件直接使用 2、变量符不同 SASS 变量符是 $ LESS 变量符是 @ 3、变量作用域不同 >
阅读全文
摘要：一、计算属性：computed 模板内的表达式非常便利，但放入太多的逻辑会让模板过重且难以维护，所以，对于复杂的逻辑，可以使用计算属性 computed。 1、基本用法 HTML 代码： JS 代码： 以上代码中声明了一个计算属性 rmsg，提供的函数将用作属性 vm.rmsg 的 getter，v
阅读全文
摘要：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数，结合相应系统，在应用状态改变时，Vue 可以智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 一、插值 1、文本 数据
阅读全文
摘要：一、什么是生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。 二、生命周期钩子 1、创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时还没初始化好 data 和 methods 属性 created：实例已在内存中创建，此时 data 和 methods 已经
阅读全文
摘要：一、querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二、与 getElementBy 的区别 这两个新添加的 API 与 getElementById() / getEle
阅读全文
摘要：一、类的定义 ES5 构造函数的写法： function Point(x, y) { this.x = x; this.y = y; } ES6 引入了 Class（类），通过class关键字，可以定义类。 class Point { constructor(x, y) { this.x = x;
阅读全文
摘要：一、什么是 Promise Promise 对象用于表示一个异步操作的最终状态（完成或失败）以及返回的值。 二、Promise 的状态 1、pending 进行中 2、fulfilled 已成功 3、rejected 已失败 Promise 的状态只有两种可能，从 pending 变为 fulfil
阅读全文
摘要：一、什么是同源？ 同源是指域名、协议和端口均相同。 二、什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源（只要域名、协议和端口有任一个不同，就被当作是跨域） JavaScript 出于安全方面的考虑，不允许跨域调用其它页面的对象 几种常见场景： 不同文件：www.abc.com/
阅读全文
摘要：$.ajax() 基本用法： $.ajax({ url: url, // 地址 data: data, // 参数 type: 'POST', // 提交方式 可以选择 post/get 推荐 post async: false, // 同步异步 dataType: 'json', // 返回数据类
阅读全文
摘要：一、什么是JSON? JSON（javascript object notation）全称是 javascript 对象表示法，是一种数据交换的文本格式，用于读取结构化数据，提出目的是取代繁琐笨重的 XML 格式。 二、JSON的语法规则 JSON的语法可以表示以下三种类型的值: 1、简单值 简单值
阅读全文
摘要：一、GET 一个简单的 GET 请求： xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send(); 在上面的例子中，可能得到的是缓存的结果。 为了避免这种情况，需要向 URL 添加一个唯一的 ID： xmlhttp.open("GET","dem
阅读全文
摘要：一、什么是Ajax Ajax 的全称是 Asynchronous JavaScript and XML（即异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 二、Ajax的优缺点 1、优点： 通过异步模式，提升了用户体验 优化了浏览器和服务器之间
阅读全文
摘要：1、Array.from() 用于将两类对象转为真正的数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5 的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b
阅读全文
摘要：一、数组的创建 1、使用 Array 构造函数 var arr1 = new Array(); // 创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy","Tom"); // 创建一
阅读全文
摘要：一、属性的简洁表示法 ES6 允许直接写入变量和函数，作为对象的属性和方法 let a = 1; let b = 2; let es5 = { a: a, b: b }; // 等同于 let es6 = { a, b }; 上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名,
阅读全文
摘要：一、函数参数的默认值 1、基本用法 ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China'
阅读全文
摘要：一、新增二进制和八进制的表示 ES6 提供了二进制和八进制数值的新写法，分别用前缀 0b/0B 和 0o/0O表示。 0b111110111 503 // true 0o767 503 // true 二、新增 Number.isFinite() 和 Number.isNaN() 与传统的全局方法
阅读全文
摘要：一、新增 flags 属性 ES6 为正则表达式新增了 flags 属性，会返回正则表达式的修饰符 1、ES5 的 source 属性 返回正则表达式的正文 /abc/ig.source // "abc" 2、ES6 的 flags 属性 返回正则表达式的修饰符 /abc/ig.flags // '
阅读全文
摘要：一、ES6 模板字符串 传统的 JavaScript 输出模板通常是这样写的： let firstName = 'Will'; let lastName = 'Smith'; let name = 'My firstName is：' + firstName + ',my lastName is：'
阅读全文
摘要：解构赋值是对赋值运算符的扩展，可以将属性/值从对象/数组中取出，赋值给其他变量 一、数组的解构赋值 1、基本用法 只要等号两边的模式相同，左边的变量就会被赋予对应的值 let [a, [[b], c]] = [1, [[2], 3]]; a // 1 b // 2 c // 3 let [a, ,
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
阅读全文
摘要：一、let 1、基本用法 ES6 新增了let命令，用来声明变量。 let 的用法类似于 var，但所声明的变量只在 let 命令所在的代码块内有效（一个“{}”相当于一个代码块） { let a = 123; var b = 123; } a // ReferenceError: a is not
阅读全文
摘要：一、普通的变量 1. 变量的定义方式：@ 2. 示例： less 文件： @blue:#5B83AD; #header{ color:@blue; } 编译后的 css 文件： #header { color: #5b83ad; } 二、作为选择器和属性名 1. 使用的时候将变量以“@{变量名}”的
阅读全文
摘要：less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 一、传统写法与 less 写法对比 1. 传统 css 写法： .content ul{ list-style:none; } .content li{ height:24
阅读全文
摘要：正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式，是用于匹配字符串中字符组合的模式。 一、JS 如何创建正则表达式 1、隐式创建 通过直接量定义 var str = 'I love js'; var pattern = /js/; /
阅读全文
摘要：一、什么是"非构造函数"的继承？ 比如，现在有一个对象，叫做"中国人"。 var Chinese = { nation:'中国' }; 还有一个对象，叫做"程序员"。 var Programmer ={ career:'程序员' } 要怎样才能让"程序员"去继承"中国人"？ 这里两个对象都是普通对象
阅读全文
摘要：现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫"
阅读全文
摘要：/*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select,
阅读全文
摘要：百度 CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> 新浪 CDN <head> <script src="https://lib.sinaapp.co
阅读全文
摘要：this 是 JavaScript 语言的一个关键字。 它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。 上面代码中，函数 test 运行时，内部会自动有一个 this 对象可以使用。 一、this 的值是什么 函数的不同使用场合，this 有不同的值。 总的来说，this 就
阅读全文
摘要：Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程语言，因为它的语法中没有 class（类）。 那么，如果我们要把"属性"和"方法"，封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？ 一、生成实例对象的原始模式 这里我们把
阅读全文
摘要：一、函数对象 所有引用类型（函数、数组、对象）都拥有__proto__属性（隐式原型） 所有函数拥有 prototype 属性（显式原型）（仅限函数） 原型对象：拥有 prototype 属性的对象，在定义函数时就被创建 关于 prototype 与__proto__ js中所有的函数都有一个 pr
阅读全文
摘要：一、对象的声明 1. 使用字面量（json格式）的方式构建对象 2. 使用 new Object() 的方式构建对象 3. 使用 Object.create(obj) 的方式构建对象 注意：使用此方式创建出来 obj.__proto__ = Foo 4. 使用构造函数的方式构建对象 5. 使用工厂方
阅读全文
摘要：一、变量的作用域 要理解闭包，首先需要理解JavaScript的变量作用域。 变量的作用域包括：全局变量和局部变量 函数内部可以直接读取全局变量 函数内部可以直接读取全局变量 函数外部无法读取函数内的局部变量 函数外部无法读取函数内的局部变量 注意：函数内部声明变量时，如果不用var命令的话，实际上
阅读全文
摘要：一、什么是数据类型 1、基本类型 值是不可改变的 var name = 'java'; name.toUpperCase(); // 输出 'JAVA' console.log(name); // 输出 'java' 占用空间固定，保存在栈中 原始数据类型直接存储在栈(stack)中的简单数据段，占
阅读全文
摘要：使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=”no”> /*参数说明： - width=dev
阅读全文
摘要：一、Flex 布局的由来 1、css 2.1 CSS2.1 定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法： 块布局：呈现文档的布局模式 行内布局：呈现文本的布局模式 表格布局：用表格呈现2D数据的布局模式 定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没
阅读全文
摘要：一、移动端布局计算 Flex： 采用Flex布局的元素，它的所有子元素自动成为容器成员，可以自动分配空间，适合做移动端开发 rem： 在不同的设备上显示不同的效果，因此适合做移动端开发 二、移动设备常见属性 physical pixel： 物理像素值（屏幕分辨率） device-independen
阅读全文
摘要：一、CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms
阅读全文
摘要：一、2D转换 translate(npx,npx) 相对当前元素位置移动 /* 实现div向左移动50个像素，并向下移动100个像素 */ div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /*
阅读全文
摘要：一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、
阅读全文
摘要：1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性，这个属性允许你为元素添加圆角边框！语法：border-radius: 1-4 length|% / 1-4 length|%;兼容性：IE9+、FireFox4+、Chrome
阅读全文
摘要：一、CSS3 换行 1、word-break（规定自动换行的处理方法） word-break: normal / break-all / keep-all; /* normal：使用浏览器默认的换行规则 break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行 */ 兼容
阅读全文
摘要：一、基本选择器 子元素选择器 概念：子元素选择器只能选择某元素的子元素语法格式：父元素 > 子元素 （Father > Children）兼容性：IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器 概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个
阅读全文
摘要：一、HTML5表单的特点： 二、HTML5新增的控件类型： 要求输入格式正确的 email 地址，否则浏览器不允许提交，同时会提示错误信息 要求输入格式正确的数字 显示一个可拖动的滑块条，通过设定 max/min/step 值限定拖动范围，拖动时会反馈给value一个值 输入一个搜索关键字，通过 r
阅读全文
摘要：一、关于DTD HTML5 不基于 SGML，所以不需要引用 DTD（HTML 4.01 基于 SGML） 二、HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <
阅读全文
浙公网安备 33010602011771号