随笔分类 - 前端
摘要：一、concat() concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。 var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1);
阅读全文
摘要：vue学习系列 vue.js入门学习 ， vue.js组件快速入门(上) ， vue.js组件快速入门 ， vue.js使用ajax操作 ， 如何用vue-resource实现ajax实现的功能 用ajax和resource分别实现OAuth的注册，登录，注销， API调用 ， vue的browse
阅读全文
摘要：概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。 传统的页面应用，是用一些超链接来实现页面切换和跳转的。 在vue-router单页面应用中，则是路径之
阅读全文
摘要：概述 rowserify是一个 CommonJS风格的模块管理和打包工具，上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板。 webpack提供了和browserify类似的功能，在前端资源管理这方面，它提供了更加出色的功能。官方基于webpack提供了两种项目模板，
阅读全文
摘要：概述 在之前的一系列vue.js文章，我们都是用传统模式引用vue.js以及其他的js文件的，这在开发时会产生一些问题。 首先，这限定了我们的开发模式是基于页面的，而不是基于组件的，组件的所有代码都直接写在页面中，这对于一些复杂的页面来说，不是好事情，代码的可读性会较差，也不便于管理。 其次，定义在
阅读全文
摘要：概述 之前的Web App在访问REST API时，没有经过任何认证，这使得服务端的REST API是不安全的，只要有人知道api地址，就可以调用API对服务端的资源进行修改和删除。 今天我们就来探讨一下如何结合Web API来限制资源的访问。 本文的主要内容如下： 介绍传统的Web应用和基于RES
阅读全文
摘要：上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用，并实现了一个简单的跨域CURD示例。 Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。 vue-resource是Vue.js的一款插件，它可以通过X
阅读全文
摘要：概述 之前的开发中示例数据都是local的，实际都是服务端的数据。 前端和服务端之间的数据交互一般是通过ajax请求来完成的。 说起ajax请求，大家第一时间会想到jQuery。除了拥有强大的DOM处理能力，jQuery提供了较丰富的ajax处理方法，它不仅支持基于XMLHttpRequest的aj
阅读全文
摘要：概述 上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。 今天我们将着重介绍slot和父子组件之间的访问和通信， slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。 Vue的事件系统独立于原生的DOM事件，它用于组件之间的通信。 本文的主要内
阅读全文
摘要：组件简介 组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树： 那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。 组件的创建和注册 基本步骤
阅读全文
摘要：Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。 相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作
阅读全文
摘要：鼠标的拖拽事件 拖拽的流程： （1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽； （2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动； （3）onmouseup：当鼠标松开时，被拖拽元素固定在当前位置。 鼠标的滚轮事件 onmousewheel：鼠标滚轮滚动的事件，会
阅读全文
摘要：事件委托 事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。 比如说有一个列表 ul，列表之中有大量的列表项 <a>标签： <ul id="parent-list"> <li><a href="javascript:;" class="my
阅读全文
摘要：DOM事件流 事件传播的三个阶段是：事件捕获、事件冒泡和目标。 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函
阅读全文
摘要：绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。 DOM1的写法：onclick element.onclick = function ()
阅读全文
摘要：JS动画的主要内容如下： 1、三大家族和一个事件对象： 三大家族：offset/scroll/client。也叫三大系列。 事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。 2、动画(闪现/匀速/缓动) 3、冒泡/兼容/封装 offset 家族的组成 今天来讲一下offset
阅读全文
摘要：style属性的获取和修改 在DOM当中，如果想设置样式，有两种形式： className（针对内嵌样式） style（针对行内样式） 这篇文章，我们就来讲一下style。 需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如： <!DOCTYPE html>
阅读全文
摘要：JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播
阅读全文
摘要：事件简介 事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。 JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。 事件的三要素
阅读全文