方式一：live-serverlive-server是一款npm工具，可以在项目目录启动一个node服务，然后直接在浏览器中预览，并且自动全局监听实时更新。两种安装方式： {代码...} 直接使用live-server首先在项目下npm初始化:npm init -y;然后可以选择全局安装或者本地安装live-server，然后在package.json的scripts属性中添加如下代码：...

ES6介绍ES6， 全称 ECMAScript 6.0 ，2015.06 发版。let 和 const命令let命令let 命令，用来声明变量。它的用法类似于var，区别在于var声明的变量全局有效，let 声明的变量只在它所在的代码块内有效。使用var声明： {代码...} 使用闭包解决： {代码...} 使用let： {代码...} let 不存在变量提升，必须先声明后使用，否则...

1.推荐团队博客推荐团队w3cplusw3school前端观察腾讯Web前端Alloy团队qq前端月报淘宝前端团队fed推荐博客汤姆大叔博客张鑫旭博客阮一峰博客廖雪峰官网牧云云博客前端小智小胡子哥的个人网站Jerry Qufouber github木易杨 github（前端进阶系列）xiaozhi github（小智GitHub博客）境枫博客（语雀）2.推荐文章教程资源清单...

babel介绍babel总共分为3个阶段: 解析、转换和生成babel本身不具有任何转换功能， 如果没有plugin,那么经过babel的代码和输入的是相同的。babel插件分为两种语法插件：在解析的过程中，能使babel能够解析更多的语法转译插件: 在转换的过程中将代码输出。比如将箭头函数转译成正常的函数其中preset就是babel常用的转译插...

为什么需要构建工具？ 转换 ES6 语法 转换 JSX CSS 前缀补全/预处理器 压缩混淆 图片压缩 前端构建演变之路 ant + YUI Tool grunt gulp、fis3 webpack、rollup、parcel 为什么选择 webpack? 社区态丰富 配置灵活和插件化扩展 官方更新迭代速度快 初识webpack，简单的例子入手 安装 先确保你已经安装了 Node 其中检查node...

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。

background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。

准备工作 在本地用vue-cli新建一个项目，首先安装vue-cil，命令： {代码...} 新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo： {代码...} 这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加一个依赖,后面会用到。 修改webpack配置 项目目录 {代码...} 在这一步里我们需要改动...

运行”npm run dev”：执行build/dev-server.js文件运行”npm run build”：执行build/build.js文件

一般使用 {代码...} 使用正则： {代码...} 循环替换 如下这种情况，表情标签的替换，我们需要正常的字符串替换，例如结合 while + indexOf 实现。 {代码...} 这样，基本功能实现，不过这是有问题的，如果有一个键值相同的，就会死循环例如: {代码...} 修改为如下代码解决死循环问题： {代码...} 再进行简单封装一下： {...

sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

jquery的绿色拖动验证功能 在网上看到了一个这样的问题：那种像拖动滑块匹配图形的验证方式是怎么实现的？。 突然想到实现一个简单绿色拖动验证码的功能，在网上搜了下，有一个用jquery实现的该功能代码。 体验地址：[链接]。 其CSS代码： {代码...} HTML代码结构： {代码...} JS调用方式： {代码...} JS实现代码： {代...

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

基本使用 html: {代码...} JavaScript: {代码...} 通过注入路由，我们可以用 this.$router 来访问它，就像在任何组件里用 this.$router 访问当前路有一样。 {代码...} 路由的命名 {代码...} 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象： {代码...} 这跟代码调用 router.push() 是一回事： {代码......

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

绑定 HTML Class 对象语法 ①.添加单个class: {代码...} 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive为真还是假。 ②.添加多个class： {代码...} 和如下 data： {代码...} 结果渲染为： {代码...} ③.绑定的数据对象不必内联定义在模板里： {代码...} ④.绑定一个返回对象的计算属性： {代码...} ...

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

首先，Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。下面总结的内容是在2.x的版本。

在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》.这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框： 大致的html代码都如下所示： {代码...} 那么对应的css代码： {代码...} 第一种实现如图所示： html代码： {代码...} css代码： {代码...} 第二种实现如图所示： html代码：...

checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。

在项目中可能需要随机生成字母数字组成的字符，如生成3-32位长度的字母数字组合的随机字符串（位数不固定）或者生成43位随机字符串（位数固定）

1.Canvas 实现圆形进度条并显示数字百分比 实现效果 1.首先创建html代码 {代码...} 2.创建canvas环境 {代码...} 3.绘制5像素宽的运动外圈 {代码...} 4.绘制红色运动圈 {代码...} 5.百分比文字绘制 {代码...} 6.让它运动起来 {代码...} 完整代码 {代码...} 2.H5实现树叶飘落 实现如图所示的东西效果（落叶下落）： html代...

jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。如图，当然可以根据自己的需要修改其颜色，滚动条的宽度

为了判断一个对象是否包含自定义属性而不是原型链上的属性，我们需要使用继承自 Object.prototype 的 hasOwnProperty方法。hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

NO1.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用css3中的功能实现它们的布局。