2018年01月_nicexibeidage

转载 Vue单文件组件

前面的话　　本文将详细介绍Vue单文件组件概述　　在很多 Vue 项目中，使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。　　这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者前

2018-01-24 11:24:22 1126

转载 Vue组件实例间的直接访问

前面的话　　有时候需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问 $parent　　$parent表示父组件的实例，该属性只读　　下面是一个简易实例

2018-01-24 11:12:20 289

转载 Vue动态组件

前面的话　　让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件概述　　通过使用保留的元素，动态地绑定到它的 is 特性，可以实现动态组件div id="example"> button @click="change">切换页面button> component :is="currentView">compo

2018-01-24 10:53:10 2157

转载理解javascript中的浏览器窗口——窗口基本操作

前面的话　　BOM全称brower object model(浏览器对象模型)，用于管理窗口及窗口间的通讯，其核心对象是window。称其为窗口，可能并不准确。因为，有的浏览器窗口可能包含多个标签页，每个标签页都有自己的window对象。本文将详细该内容窗口位置【1】获取　　浏览器(firefox不支持)提供了screenLeft和screenTop属

2018-01-23 18:20:14 333

转载理解javascript中的对话框

前面的话　　通常我们调试程序时，如果需要阻塞效果，则要用到alert()。但除了alert()以外，window对象还提供了其他3种对话框。本文将详细介绍window对象中的对话框定义　　系统对话框与在浏览器中显示的网页没有关系，也不包含HTML。它们的外观由操作系统及浏览器设置决定，而不是由CSS决定。window对象下的常用对话框有alert()、conf

2018-01-23 18:19:17 127

转载 Vue自定义指令

前面的话　　除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。本文将详细介绍Vue自定义指令指令注册　　以一个input元素自动获得焦点为例，当页面加载时，使用autofocus可以让元素将

2018-01-22 16:11:07 580

转载 Vue内容分发slot

前面的话　　为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot 编译作用域　　在深入内容分发 API 之前，先明确内容在哪个作用域里编译

2018-01-22 16:01:04 215

转载 Vue组件选项props

前面的话　　组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props 父子级组件　　在介绍props之前，先介绍父子

2018-01-22 15:24:45 388

转载 Vue组件基础用法

前面的话　　组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法概述　　在 Vue 里，

2018-01-22 14:53:33 586

转载 Vue表单控件绑定

前面的话　　本文将详细介绍Vue表单控件绑定基础用法　　可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据　　[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue

2018-01-22 14:18:28 273

转载 Vue事件处理

前面的话　　Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难。使用v-on有以下好处：　　1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法　　2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯

2018-01-22 14:04:02 1520

转载 Vue数组更新及过滤排序

前面的话　　Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序变异方法　　Vue 包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度pop() 从数组末尾移除最后一项，减

2018-01-22 13:34:29 3789

转载 Vue模板逻辑

前面的话　　上一篇介绍了Vue的模板内容，而对于一般的模板引擎来说，除了模板内容，还包括模板逻辑。常用的模板逻辑包括条件和循环。本文将详细介绍Vue模板逻辑条件渲染　　在Vue中，实现条件逻辑依靠条件指令，包括v-if、v-else、v-else-if这三个【v-if】　　根据表达式的值的真假条件渲染元素。赋值为true时，将元素插入DOM中，

2018-01-22 11:44:14 555

转载 Vue模板内容

前面的话　　如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用。本文将详细介绍Vue模板内容概述　　Vue.js使用了基于HTML的模板语法，允许声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML ，所以能被遵循规范的浏览器和HTML解析器解析　　在底层的实现上， Vue将模板编译成虚拟

2018-01-22 11:09:42 522

转载 Vue实例生命周期

前面的话　　Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期图示　　下图是Vue实例生命周期的图示解释　　接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明【

2018-01-19 18:11:48 263

前面的话　　一般地，当模板内容较简单时，使用data选项配合表达式即可。涉及到复杂逻辑时，则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项 data　　data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data属性能响应数据变化　　[注意]不应该对data属性使用箭头函数div id="app"

2018-01-19 17:57:40 783

转载 Vue入门基础

前面的话　　Vue中文文档写得很好，界面清爽，内容翔实。但文档毕竟不是教程，文档一上来出现了大量的新概念，对于新手而言，并不友好。个人还是比较喜欢类似于《JS高级程序设计》的风格，从浅入深，娓娓道来　　于是，还是按照自己的思路，对Vue的知识体系从浅入深的开始学习，并把学习记录总结成博客，也是希望能够帮助到同样入门Vue的朋友，本文将详细介绍Vue入门基础概述

2018-01-19 17:12:33 268

转载总结iframe高度自适应，自适应子页面高度

页面html节点上要有下面红色部分，不然ie浏览器会无限递增iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" style="padding: 0px; width: 100%; height: 1000px;">iframe>调

2018-01-16 18:05:10 813

转载 DOM一致性检测

【implementation】　　由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要。document.implementation属性就是这些提供相应信息和功能的对象。与浏览器对DOM的实现直接对应。　　DOM1级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数:要检测的DOM功能的名

2018-01-16 14:43:36 307

转载深入理解元素视图的3个方法

前面的话　　前面介绍了offset偏移、client客户区和scroll滚动，这三部分主要从属性的角度来对元素尺寸信息进行获取和修改。本文主要介绍元素视图的三个方法，包括getBoundingClientRect()、getClientRects()和elementFromPoint() getBoundingClientRect()　　判断一个元素的尺寸和位置

2018-01-15 16:19:52 121

转载 5种回到顶部的写法从实现到增强

前面的话　　本文先详细介绍回到顶部的5种写法，然后对其实现功能增加，最后得到最终实现写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此body style

2018-01-15 15:49:40 177

转载深入理解this机制系列第二篇——this绑定优先级

前面的话　　上一篇介绍过this的绑定规则，那如果在函数的调用位置上同时存在两种以上的绑定规则应该怎么办呢？本文将介绍this绑定的优先级显式绑定 pk 隐式绑定　　显式绑定胜出function foo() { console.log( this.a );}var obj1 = { a: 2, foo: foo};v

2018-01-15 15:32:04 79

转载深入理解this机制系列第一篇——this的4种绑定规则

前面的话　　如果要问javascript中哪两个知识点容易混淆，作用域查询和this机制绝对名列前茅。前面的作用域系列已经详细介绍过作用域的知识。本系列开始将介绍javascript的另一大山脉——this机制。本文是该系列的第一篇——this的4种绑定规则默认绑定　　全局环境中，this默认绑定到windowconsole.log(this ===

2018-01-15 15:12:54 139

转载深入理解CSS伪类

前面的话　　伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识锚点　　关于锚点，有常见的5个伪类，分别是:link,:hover,:active,:focus,:visite

2018-01-15 11:04:48 173

转载深入理解滚动scroll

前面的话　　前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高scrollHeight　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分scrollWidth　　scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

2018-01-12 15:58:28 264 1

转载深入理解客户区尺寸client

前面的话　　关于元素尺寸，一般地，有偏移大小offset、客户区大小client和滚动大小scroll。前文已经介绍过偏移属性，后文将介绍scroll滚动大小，本文主要介绍客户区大小client 客户区大小　　客户区大小client指的是元素内容及其内边距所占据的空间大小clientHeight　　clientHeight属性返回元素节点的客户区

2018-01-12 11:54:19 638

转载 CSS counter计数器(content目录序号自动递增)详解

一、挖坟不可耻说到报数，是否想起了教官的嘹亮口号：“生信4班，立正，稍息，开始1,2,3,4报数！”其中有这么几个关键点：1. 班级命名。总不能六脉神剑一指，你，侬，汝来称呼吧~有个称呼，如生信4班，就知道谁的是谁了。2. 报数规则。1,2,3,4递增报数，还是1,2,1,2报数，让班级的人知道。3. 开始报数。不发口令，大眼瞪小眼，会乱了秩序。巧的是，以上3个

2018-01-10 14:25:48 921

转载 CSS3的content属性详解

CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:h1>这是h1h1>h2>这是h2h2>cssh1::after{

2018-01-10 11:45:38 185

转载深入理解伪元素

定义　　伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection　　用法:first-letter　　指定一个元素第一个字母的样式　　[

2018-01-09 18:09:24 354

转载深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

前面的话　　我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明　　【1】为id=box的div元素添加content="前缀"的:before伪元素　　【2】为已经添加:before伪元素的div元素删除伪元素　　 [注意]由于IE7-浏览器不支持:b

2018-01-09 12:58:32 176

转载深入理解脚本化CSS系列第五篇——动态样式

前面的话　　很多时候，DOM操作比较简单明了，因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题，处理DOM中的某些部分时要复杂一些，比如动态样式就相对较复杂　　所谓动态样式，是指在页面加载时并不存在，在页面加载完成后动态添加到页面的样式　　动态样式包括两种情况：一种是通过元素插入外部样式表，另一种是通过元素

2018-01-09 11:35:31 142

转载深入理解脚本化CSS系列第四篇——脚本化样式表

前面的话　　关于脚本化CSS，查询样式时，查询的是计算样式；设置单个样式时，设置的是行间样式；设置多个样式时，设置的是CSS类名。脚本化样式表当然也是一种脚本化CSS的技术，虽然不经常使用，但有时却非常有用。下面将详细介绍脚本化样式表的内容 CSSStyleSheet　　CSSStyleSheet类型表示的是样式表。我们知道，引入CSS一共有3种方式，包

2018-01-05 17:35:15 205

转载 IE11打开某些网站，F12仿真模式中文档模式默认为IE7？

IE11浏览器默认的文档模式为Edge，但是打开有些网站的时候，在IE11中打开F12开发人员工具，仿真模块下，文档模式选项中Internet Explorer 7显示为默认值。但是并未打开所有网站都是显示为IE7为默认文档模式，将文档模式设置为其他IE版本以后，在重新打开该网页，任然会显示为IE7。这个是什么原因呢？出现这种一般是两种原因所知，第一种就是网站通过meta标签定义X-UA-Comp

2018-01-05 13:05:41 1864

转载深入理解DOM节点类型第七篇——文档节点DOCUMENT

前面的话　　文档节点document，隶属于表示浏览器的window对象，它表示网页页面，又被称为根节点。本文将详细介绍文档节点document的内容特征　　文档节点的三个node属性——nodeType、nodeValue、nodeName分别是9、'#document'和null　　由于它是根节点，所以其父节点parentNode指向null，ow

2018-01-05 12:01:47 445

转载 DOM范围

前面的话　　为了让开发人员更方便地控制页面，DOM定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。在常规的DOM操作不能更有效地修改文挡时，使用范围往往可以达到目的。本文将详细介绍DOM范围创建范围　　Document类型中定义了createRange()方法。在兼容DOM的浏览器中

2018-01-05 11:26:56 203

转载 DOM遍历

前面的话　　DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型：Nodeiterator和TreeWalker，它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。本文将详细介绍DOM遍历　　[注意]IE8-浏览器不支持定义　　DOM遍历是深度优先的DOM结构遍历，遍历以给定节点为根，不可能向上超出DOM树的根节点

2018-01-05 11:24:02 388

转载深入理解DOM节点操作

前面的话　　一般地，提起操作会想到“增删改查”这四个字，而DOM节点操作也类似地对应于此，接下来将详细介绍DOM的节点操作方法前提　　DOM提供节点操作的方法是因为DOM节点关系指针都是只读的　　下列代码中想通过修改myUl的父级节点来修改其节点关系，但由于parentNode属性是只读的，所以修改无效，在IE8-浏览器下甚至会报错

2018-01-05 10:48:44 223

转载深入理解DOM节点关系

前面的话　　DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。本文将详细描述DOM间的节点关系　　节点中的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家

2018-01-04 18:14:06 171

转载深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

前面的话　　一说起动态集合，多数人可能都有所了解。但是，如果再深入些，有哪些动态集合，以及这些动态集合有什么表现、区别和联系？可能好多人就要摇头了。本文就javascript中的动态集合做详细介绍 NodeList　　NodeList实例对象是一个类数组对象，它的成员是节点对象，包括childNodes和querySelectorAll()方法返回值

2018-01-04 17:39:35 364

转载深入理解javascript选择器API系列第二篇——getElementsByClassName

前面的话　　既然有getElementById()和getElementsByTagName()方法，为什么没有getElementsByClassName()呢？id属性、标签名、class属性并没有什么优劣之分啊。终于，HTML5新增了getElementsByClassName()方法，由于在CSS布局中类名的广泛使用，该方法正好切中痛点，使得通过类名选取元素不再困难，成为最受欢迎的

2018-01-04 17:14:10 421

空空如也

空空如也