Dear_Mr-CSDN博客

原创 Vue的组件

组件，也就是一个标签，只不过这个标签是自定义的而已，它的注册方式分为全局和局部两种组件注册方式全局组件注册方式这种方式利用的Vue.component <h3>全局组件：</h3> <div id="app"> <panda></panda> </div> <script type="text/javascript"> Vue.comp

2017-05-22 22:53:21 424

原创 template

1.写在构造器里的template比如说向下面这样： <div id="app">{{message}}</div> <script type="text/javascript"> new Vue({ el : "#app", data : { message : "Template的使用"

2017-05-22 22:03:25 508

原创 Vue生命周期

Vue2.0的生命周期/钩子函数在之前的博文中，简单的介绍了一下Vue的生命周期，今天看一下它们的运行时机，需要注意的点如下：所有的生命周期钩子自动绑定this上下文到实例中，因此可以访问数据，对属性和方法进行运算，也就是说，不能通过箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())，这是因为箭头函数绑定了父上下文，因此this 与期待的

2017-05-22 17:20:38 696

1.简单介绍Vue.extend(options)参数：对象用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来

2017-05-22 16:01:02 35423 1

原创自定义指令

简单来说就是根据自己的需要定义一些自己的指令，比如v-color, v-focus<div id="app"> <p v-color="color">{{num}}</p> <button v-on:click="addNum">add</button></div><script type="text/javascript"> Vue.directive('color',

2017-05-21 20:51:18 1340

原创数组排序与对象排序

数组排序在使用JavaScript的时候，我们都发现了sort这个函数其实是按照字典顺序进行排序的，比如下面的这个例子：var ary = [2, 98, 34, 45, 78, 7, 10, 100, 99];ary.sort();console.log(ary);控制台输出结果：Array [ 10, 100, 2, 34, 45, 7, 78, 98, 99 ]这个也很显然验证了我之前所写

2017-05-21 16:35:04 688

原创 browserify的介绍

Browserify 的介绍browserify 是一个编译工具，是目前比较流行的模块打包工具之一(另外一个是webpack)，browserify 是基于流式思想设计；可以通过命令行，也可以通过API来使用，是模块化的逆过程，但是推动模块化的快速发展，它可以使用类似于node的require()的方式来组织浏览器端的JavaScript代码，通过预编译可以让前端的JavaScript直接使用npm

2017-05-20 22:41:38 1293

转载 AST 抽象语法树学习

阅读原文Abstract Syntax Tree 抽象语法树简介在使用前端许多工具插件的时候，我们大多知道每个工具库、每个插件能做什么，不过很多同学其实并不清楚背后用到的技术，如webpack、rollup、UglifyJS、Lint等很多的工具和库的核心都是通过Abstract Syntax Tree 抽象语法树这个概念来实现对代码的检查、分析等操作的。通过了解抽象语法树这个概念，你也可以随手编写

2017-05-20 21:01:09 20182 2

原创虚拟DOM分析学习篇

昨天分享了一篇关于“虚拟DOM”的文章，但是今天感觉自己还是放不下它，决定细细探究一下整体结构分析创建的目录结构如下：首先初始化package.json文件: npm init然后全局安装Browserify ：npm install -g browserify最后使用browserify编译：browserify main.js > compiled.js各个文件之间的关系：各个文件的作用的分

2017-05-20 17:21:10 587

原创算法笔记（一）

题目一题目说明：对一个数做若干次交换，直到这个数只剩下一个数字，交换的规则是，将这个数变为所有位数上的数字的乘积，比如285经过一次变换之后转换成2*8*5=80，问题是，要做多少次变换，使得这个数变成个位数输入描述：输入一个正整数，小于等于2,000,000,000输出描述：输出一个整数，表示变换次数输入例子：285输出例子：2代码如下：#include<stdio.h>#include<std

2017-05-20 11:56:52 1446

转载初识虚拟DOM

在学习Vue的过程中，碰到了“虚拟DOM”这个词汇，觉得比较有意思，觉得下面的文章写的很好，分享给大家原文链接最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出，其本身有很多先进的设计思路，比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱，不仅要理解其原理，而且要实现一个基本可用的虚拟DOM。1.为什么需要

2017-05-19 22:54:25 643

原创组件之间的通信

准备阶段先写子组件componentA.vue：<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script> export default { name : 'componentA', data : function() { return { m

2017-05-18 22:53:39 472

原创 Vue的过渡效果

Vue在插入、更新或者移除DOM的时候，提供多种方式的应用过渡效果包括以下工具：在CSS过渡和动画中自动应用class可以配合第三方css动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js单元素/组件的过滤Vue提供了transition的封装组件，在下面的情况中，可以给任何元素和组件

2017-05-17 21:31:49 8370

原创 FLIP 动画实现多维网格的过渡

FLIP 动画实现多维网格的过渡Demo地址：https://jsfiddle.net/chrzmzxv/<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script>

2017-05-17 21:26:29 1896

转载从输入URL到页面加载显示完成的过程

原文地址对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对“在地址栏输入URL，按enter(回车)键加载资源”此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。1.浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此

2017-05-16 22:41:24 858

原创 Vue的响应式原理

下面的是一张来自Vue官网的图片：如何追踪变化？？当把一个普通的JavaScript对象传递给Vue实例的data选项，Vue将遍历这个对象的所有属性，并且利用Object.defineProperty这些属性全部转换为getter/setter，当然由于兼容性问题，所以Vue不支持IE8及更低版本的浏览器从上面的图可以看出，对于数据Data来说，它里面的getter与setter是对于外部是不可见

2017-05-15 23:09:10 1982

原创 JavaScript中的Object.defineProperty 函数

JavaScript中的Object.defineProperty 函数Object.defineProperty的语法介绍语法：Object.defineProperty(object, propertyname, descriptor)参数：object: 必需。要在其上添加或修改属性的对象。这可能是 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。pro

2017-05-15 21:05:03 676

转载学习Vue的资源汇总

阅读原文一. 资源教程综合类vuejs 英文资料 Vue中文资料总汇 Vue.js 的一些资源索引 vue资料入门类vue 快速入门 Vue.js 中文系列视频教程 on Laravist英文教程Learning Vue 1.0: Step By Step社区sf - vue标签知乎 - vue标签 Vue.js专业中文社区 vue - issues二. 文档API Vue.js

2017-05-15 17:01:17 1520

原创响应式的实例

响应式的实例两个在线展示响应式的链接：https://vamouszj.github.io/ResponsiveWeb/https://vamouszj.github.io/responseTimeLine/相应的知识点的总结：响应式图片gulp入门CSS Sprite高度塌陷关于li之间存在空白字符的问题CSS的px,em,rem响应式网站

2017-05-15 16:43:18 504

转载 jQuery源码-jQuery.extend

原文链接从jQuery的源码中可以看到，jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用jQuery.extend = jQuery.fn.extend = function() {瞄了下它的代码，其实不复杂，但是在jQuery中扮演了极其重要的作用jQuery.extend 对jQuery本身的属性和方法进行了扩展jQuery.fn.extend 对jQu

2017-05-14 22:02:40 400

原创 Vue入门

Vue实例构造器每个Vue.js应用都是通过构造函数vue创建一个Vue的根实例启动的：var vm = new Vue({ //选项});Vue.js没有完全遵循MVVM模式，Vue的设计无疑是收到了它的启发。因为在文档中经常会使用vm（viewModel的简称）这个变量名表示Vue实例在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项可以扩展

2017-05-14 00:54:59 3632

原创 Vue关于数据绑定出错

Vue关于数据绑定出错错误提示：相对应的代码： <input id="input-check" type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <label for="input-check">check</label> <script type="text/javas

2017-05-12 13:29:15 1301

原创使用Vue.js完成一个todo-list

使用Vue.js完成一个todo-list首先分析一下页面的组成，要与一个供输入的用户输入框，然后下面应该是个列表，这个列表是用户的输入的内容的展示页面结构： <div id="todo-list-emp"> <input type="text" placeholder="Add a todo" v-model="newTodoText" v-on:keyup.enter="add

2017-05-11 16:52:38 2868

原创使用v-if v-else发现没有执行

使用v-if v-else发现没有执行最近在学习Vue，因为刚开始学习，所以总会遇到这样那样的问题，今天要说的一个错误就是在看Vue的官方文档的时候，发现在使用v-if和v-else指令的时候，相应的内容都出现了初始代码：<div v-if="Math.random > 0.5"> " Math.random > 0.5 "</div><div v-else> " Math.random

2017-05-10 22:09:10 8976

原创 Vue.js的简介

声明式渲染：vue.js的核心是一个允许简介的模板语法来声明式的将数据渲染进DOM <div id="app"> {{ message }} </div> <script> // 这是我们的Model new Vue({ el: '#app', data: {

2017-05-10 19:25:27 695

转载 gulp的简介

原文地址本文是gulp的入门级介绍，主要内容包括什么是gulp，gulp与grunt有什么区别，gulp可以解决grunt存在的哪些问题，以及一个简单的说明例子。什么是gulpgulp的官方定义非常简洁：基于文件流的构建系统。这里强调了 streaming，也就是gulp与grunt的在构建流程上的主要区别。具体区别在哪里，后面会简单介绍。 The streaming build syste

2017-05-09 12:19:39 562

原创 gulp入门

1. 安装gulp全局安装gulp: npm install -g gulp在项目中安装：npm install --save-dev gulp在项目下创建一个gulpfile.js的文件，基本样子如下：var gulp = require('gulp');gulp.task('default', function() { //代码});运行：gulp因为前面的任务名称是“default”

2017-05-09 11:40:53 771

原创 npm的使用

npm的官网：https://docs.npmjs.com/1.npm是什么npm（node package manager），通常称为node包管理工具，主要功能就是管理Node的包，包括：安装、卸载、更新、查看、搜索、发布等摘自别人博客的一段话：“npm的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包

2017-05-08 16:06:45 689

原创响应式图片

响应式图片响应式图片通过js或者服务器srcsetsrcset配合sizespicture元素svg加载与用户设备相匹配的图片，既快速，又不会影响用户的体验关于响应式图片有以下几种方式：1. 通过js或者服务器通过js代码来确定视口的宽度，然后根据结果加载不同大小的图片$(document).ready(function() { function makeImageResponsiv

2017-05-08 14:37:15 592

原创 CSS Sprite

CSS SpriteCSS Sprite也被称为CSS雪碧图，就是把网页上的一些背景图片整合到一张图片上，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位优点：将图片拼接起来可以减少请求次数，提高网页的性能，合并后的图片相对于原图片的字节数较小缺点：在合并图片的时候，需要合理的合并并且留好足够的空

2017-05-07 21:25:47 1231

原创关于li之间存在空白字符的问题

关于li之间存在空白字符的问题出现的问题如下图所示，可以很容易的看出来，就是在相邻的li之间是存在空的字符的一、出现该问题的原因当我们使用JS的children和childNodes这个属性的时候，是否发现了她们在FF浏览器下的结果并不相同，那么原因是什么呢？就是对于文本节点的处理的不同，上面的图也就很容易解释了9这个结果那么对于就今天的问题，li之间出现距离的原因，就是因为空白字符的出现，也就

2017-05-07 19:57:11 2189

原创高度塌陷

高度塌陷高度塌陷一什么是高度塌陷二解决办法父元素结束之前添加一个标签父元素设置overflow auto或者浮动元素设置overflow hidden让父元素本身也浮动使用CSS的after伪元素三BFCBlock formating context一、什么是高度塌陷？简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去<!DOCTYPE html><html>

2017-05-07 13:54:41 4738

原创 CSS的伪类和伪元素

下面的CSS代码是修改浏览器选中文字的默认样式：::select { background-color: #b3d4fc; text-shadow: none;}看到上面的 “::” ，你是否会有一定疑问呢？希望下面的解释可以解答你心中的疑问 ^_^伪类与伪元素W3C对于两者的定义：CSS伪类用于向某些选择器添加特殊的效果CSS伪元素用于将特殊的效果添加到某些选择器从定义中也可以很容

2017-05-06 22:54:16 555

原创 CSS的px,em,rem

一、px,em,rem是什么？px：像素，它是长度的相对单位，它是相对于与屏幕的分辨率而言的em：是相对长度单位，相对参照物为父元素的font-size，em具有继承的特点，当没有设置font-size时，则会继承浏览器的默认设置1em = 16pxrem: 相对参照物是根元素html，且是不变的，由于参照物的不变，所以比较好计算，当没有设置font-size时，浏览器会采用默认的16px

2017-05-06 17:18:43 562

原创响应式网站

一、响应式网站概念响应式网站是一个设计理念，它是多项技术的综合体flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询二、响应式网站的优点与缺点优点（1）减少工作量网站、设计、代码、内容都只需要一份多出来的工作量只是JS、CSS样式的修改（2）节省时间（3）每个设备都能得到正确的设计（4）搜索优化缺点（1）会加载

2017-05-06 16:27:46 1987

原创前端开发工具—WebStorm

前端开发工具—WebStorm一、基本的操作快速查找、代码补全、版本控制、本地历史、即时模板、光标、代码格式化等二、一些小功能Ctrl +N：新建一个文件设置字体和主题等File->setting->editor设置相应的字体和主题：不同类型文件的模板：查看历史即使在没有版本控制工具的情况下，也可以看到历史的记录，查看方法在面板上的文件中单击右键，选择Local History展示

2017-05-06 15:42:04 1413

原创 Sass入门（二）

1.@if@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块，在Sass中除了@if之外，还可以配合@else if和@else一起使用示例：@mixin blockHidden($boolean : true) { @if $boolean { @debug "boolean is ${bool

2017-04-27 23:24:42 847

原创 Web安全-XSS

Web安全-XSSDDos（分布式防御攻击）防御攻击，DOS攻击占用合理的客户端请求，占用过多的服务器资源，使合法用户无法得到服务器的响应。DDos在传统的DOS攻击基础上产生的攻击方式，还有Server Limit DOS，当httpRequest过长时，Web Server就会产生400或者4XX的错误，如果这些超长的数据保存在cookie中，用户每次请求时，就会导致http请求超长，使得一些用

2017-04-25 17:41:02 938

原创查找

概念：根据给定的值，在某个集合中确定该值所处的位置查找算法（比较式查找算法分为）：（1）基于线性表的查找。例如：顺序查找、折半查找、分块查找（2）基于树的查找。例如二叉排序树、B树、AVL树平均查找长度：为确定某元素在查找表中的位置需要和给定值进行比较的关键字个数的期望值，称为该查找算法查找成功的平均查找长度。对于长度为n的查找表，查找成功的平均查找长度如下所示： ASL=∑i=1nPiCiAS

2017-04-24 23:25:03 613

原创广度优先搜索算法—BFS

广度优先搜索算法—BFS图的广度优先搜索遍历类似于树的按层次遍历，其基本思想是从图中的某个顶点V0V_0出发，在访问此顶点之后依次访问V0V_0的所有未被访问的临接点，之后按这些邻接点被访问的先后顺序依次访问到它们的邻接点，直到图中所有和V0V_0有路径相通的顶点都被访问到。若此时图中尚有顶点未被访问，则另选图中一个未被访问的顶点作为新的出发点，重复此过程，直至图中所有顶点都被访问到。邻接表的建立过

2017-04-24 19:01:26 592