2018年08月_CaseyWei

原创 vuex

什么是Vuex？　　　　　　官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件　　　　为什么要用Vuex？　　　　　　我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也...

2018-08-31 23:08:14 178

原创 vue-router

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。　　点击之后，怎么做到正确的对应，比如，我点击hom...

2018-08-30 23:53:35 109

原创 vuejs2.0 生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。从图上我们可以看到vue在生命周期中有这些状态，beforeCreate,created,beforeMount,mounted,befor...

2018-08-29 11:09:12 114

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vu...

2018-08-27 23:39:18 139

原创 vue的$emit

1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件： [plain] view plain copy <template> ...

2018-08-26 21:01:13 673

原创 vue组件

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。如何注册组件？需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：...

2018-08-26 20:32:38 99

原创比较v-bind和v-model

简单来说，区别如下：1.v-bind用来绑定数据和属性以及表达式，缩写为'：'2.v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用一、v-modelv-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected1. 绑定text<input type="...

2018-08-25 21:28:40 191

原创 vue

1、MVVM模式 MVVM模式（Model-View-ViewModel）的运作如下图：1）上图解析：ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。当创建了ViewModel后，双向绑定是如何达成的呢？首先，我们将上图中的DOM Listeners和...

2018-08-25 00:00:09 216

原创 ES6是什么

一、新的变量声明方式 let/const与var不同，新的变量声明方式带来了一些不一样的特性，其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。通过2个简单的例子来说明这两点。{ let a = 20;}console.log(a); // a is not defined而这个简单的例子，会被编译为：{ let _a = 20;}c...

2018-08-22 23:51:05 1865

原创 SCSS基础

目录scss的环境搭建 Koala的使用——打开项目 Koala的使用——scss的相关设置 scss的四种输出模式嵌套输出方式nested 展开输出方式expanded 紧凑输出方式compact 压缩输出方式compressed scss的基本语法变量数据类型嵌套注释基本运算语句插值和混合宏占位符——%...

2018-08-21 19:22:14 1429

原创响应式布局之二 CSS3 Media Query

响应式布局有三种实现方式：CSS3 Media Query 原生 JS 代码第三方开源框架（最常见的有 bootstrap） CSS3 -- Media Query1. 媒体查询实现方式方式一：styleSheet样式表中的写法：如：<style>标签中使用@media <style> @media screen and ...

2018-08-21 00:14:36 116

原创 CSS-Hack

cssHack 是为了解决不同浏览器显示不同从而是css代码兼容不同的浏览器 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效 “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack “\9\0″ 只对IE9/IE10生效，是IE9/10的hackIE6能识别下划线”“和星号” * “，IE7能识别星号” * “，但不能识别下划...

2018-08-20 23:40:29 1169

原创前端性能优化

1、尽可能减少HTTP请求：图片合并（css sprites），Js脚本文件合并、css文件合并2、减少DNS查询DNS查询服务指域名查找，指将请求的域名转化为对应的IP地址，就如姓名和门牌号的关系。如输入www.baidu.com DNS系统会将此域名转化为119.75.217.109，然后将IP地址返回给浏览器，这个过程会花费一定的时间，影响页面的加载，所以要尽可能减少DNS查询。...

2018-08-20 22:22:31 139

原创 jQuery+ajax实现搜索下拉框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #search_result{

2018-08-18 20:56:10 1195

原创 jQuery普通绑定事件和on委托事件对比

以click事件为例：普通绑定事件：$('.btn1').click(function(){}绑定on绑定事件：$(document).on('click','.btn2',function(){}绑定那么这两种方式有什么区别呢？首先我们看看在实践上的区别： ①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生...

2018-08-17 15:35:28 234

原创 JS——call()和apply()

最近又遇到了JacvaScript中的call()方法和apply()方法，而在某些时候这两个方法还确实是十分重要的，那么就让我总结这两个方法的使用和区别吧。1. 每个函数都包含两个非继承而来的方法：call()方法和apply()方法。2. 相同点：这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。一般来说，thi...

2018-08-16 18:51:10 1922

原创 apply（）与call（）区别

Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..主要我是要解决一下几个问题:1.apply和call的区别在哪里2.什么情况下...

2018-08-15 21:34:31 77

原创原生JS实现瀑布流布局

一.瀑布流之准备工作　　首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿.二.代码的准备工作　　我们打开开发工具, 先建个ht...

2018-08-14 23:51:09 1275

原创 jquery实现网页定位导航特效

<!DOCTYPE html><html lang="en"><head> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="UTF-8"> &amp

2018-08-14 19:03:42 237

原创前端跨域总结

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： j...

2018-08-12 22:48:09 139

原创 mac如何安装抓包工具Fiddler

Mono安装首先，Mac下需要使用.Net编译后的程序，需要用到跨平台的方案Mono(现阶段微软已推出跨平台的方案.Net Core，不过暂时只支持控制台程序)。安装程序可以从http://www.mono-project.com/download/#download-mac地址下载。我下载的5.8.0版本。1.安装完后，在Terminal里执行以下命令（5.8.0是你的版本号）：...

2018-08-12 19:53:51 312

原创抓包工具总结

常用的几款抓包工具！标签：软件测试软件测试方法软件测试学习原创来自于我们的微信公众号：软件测试大师最近很多同学，说面试的时候被问道，有没有用过什么抓包工具，其实抓包工具并没有什么很难的工具，只要你知道你要用抓包是干嘛的，就知道该怎么用了！一般对于测试而言，并不需要我们去做断点或者是调试代码什么的，只需要用一些抓包工具抓取发送给服务器的请求，观察下它的请求时间还有发送内容等等，...

2018-08-12 19:34:57 565

原创 ajax总结

什么是AjaxAjax的技术的产生Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax：一种不用刷新整个页面便可与服务器通讯的办法1， Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复2，在Ajax模型中，数据在客户端与服务器之间...

2018-08-11 23:45:17 182

原创 jQuery插件总结

一.JQuery之jQuery Validate(表单验证)插件1.引用jQuery和jQuery Validate到页面2.基本语法设置:使用validate()来写验证规则rules 设置验证规则验证规则中的一些规则设置：required:true, //必填remote: { //远程校验 url:”remote.php”, type:”post”},m...

2018-08-10 23:29:07 127

原创 JSON总结

JSON概念 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，主要用于跟服务器进行交换数据。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同...

2018-08-10 00:19:05 146

原创 jQuery动画+实例

1.动画基础隐藏和显示jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果$elem.hide()提供参数：.hide( options )当提供hi...

2018-08-08 23:01:16 1171

原创基于jquery实现的超酷动画源码

1.jQuery二级下拉菜单下拉箭头翻转动画之前我们分享过不少基于jQuery的二级下拉菜单，甚至是多级的下拉菜单，比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽。但今天要介绍的这款jQuery二级下拉菜单外观很简洁，使用非常简单，它唯一的特点就是下拉菜单项的下拉箭头有翻转的动画特效。在线演示源码下载2.jQuery层叠式翻页焦点图插件可自动播放今天我们要来...

2018-08-08 22:51:37 163

原创浏览器和服务器交互解析

目前来说，网站页面主要分为静态页面和动态页面，纯静态页面组成的网站现在相对比较少见，大型网站一般使用的是动态网站建站技术，还有一部分网站是静态网页与动态网页共存，本文以Apache服务器、php语言为例，详解动态网站的访问过程，下面直接切入本文主题。（1）用户端访问服务器端的html文件 S1：通过本机配置好的DNS域名服务器地址寻找DNS服务器，将网站URL中的Web主...

2018-08-08 19:06:41 1355

原创 DOM事件（二）

在DOM事件深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于DOM事件中Event对象的属性和方法。那么什么是DOM事件中Event对象呢？事件对象（event object）指的是与特定事件相关且包含该事件详细信息的对象。我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列...

2018-08-06 22:08:17 111

原创 DOM事件（一）

在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解DOM事件的那些属性和方法。首先在介绍DOM事件之前我们先来认识下DOM的不同级别。针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。DOM级别与DOM事件...

2018-08-05 21:20:02 508

原创 jQuery--DOM操作

Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。　　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：　　Vie...

2018-08-04 23:50:30 106

原创 jQuery之DOM节点插入总结

添加节点的jquery方法：append()、prepend()、appendTo() 、prependTo() 插入节点的jquery方法：after() 、before() 、insertBefore() 、insertAfter()举个例子来说明以上几种方法的用法：html例子:<nav> <ul> <li...

2018-08-02 22:10:54 803

原创 DOM之元素与节点的区别

在 HTML DOM （文档对象模型）中，每个部分都是节点：文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）注释是注释节点 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。元素也...

2018-08-02 22:00:56 1411

原创 jQuery练习题

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>jq获取鼠标的位置</title> <style> div{ widt

2018-08-01 23:19:11 376

CaseyWei