饮冰十年-CSDN博客

原创 vue中的v-for的key值

vue中的key要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。...

2019-03-03 14:23:50 5621

原创 NUXT的项目的优点

NUXT的项目的优点1.NUXT是什么？Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。首先说下 SSR，最近很热的词，意为 Server Side Rendering（服务端渲染），目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相...

2018-08-25 23:45:12 20701 1

原创 js上拉加载更多

js上拉加载更多方法一（jq）：var page = 1, //分页码 off_on = false, //分页开关(滚动加载方法 1 中用的) timers = null; //定时器(滚动加载方法 2 中用的)//加载数据var LoadingDataFn = function() { var dom = ''; for (var i = 0;...

2018-08-25 22:50:01 1133

原创 js常用的方法

Date工具类/********************** date工具类 ***************/Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day ...

2018-08-17 17:42:04 205

原创全局配置文件的应用

全局配置文件的应用let proEnv = true;// let proEnv = false;/** 这里的结构可以是个对象，可扩展性高* */let Server = { /* * 可以定义自己想要的属性 * */ host: { pushTest: proEnv ? "线上链接" : "测试链接", sourc...

2018-08-17 10:04:49 366

原创 js识别终端

识别终端(function (B){ /*global process*/ var win = B.Env.host, doc = win.document, navigator = win.navigator, ua = navigator && navigator.userAgent || ''; ...

2018-08-15 17:57:57 427

原创 js上拉加载更多

js上拉加载更多方法一（jq）：var page = 1, //分页码 off_on = false, //分页开关(滚动加载方法 1 中用的) timers = null; //定时器(滚动加载方法 2 中用的)//加载数据var LoadingDataFn = function() { var dom = ''; for (var i = 0; i...

2018-08-12 20:23:20 14708

原创关于input框的问题解决方法

关于input的问题解决方法1.在input中监听键盘事件在用户登录或者搜索框的时候，一般都会监听键盘事件绑定回车按键，来执行登录/搜索等操作原生绑定的方法：<input onkeydown="keydownMsg(event)" type="text" /> function keydownMsg(key) { keyCode = key.ke...

2018-08-06 11:48:29 429

原创 js常用的事件及其应用

常用的事件梳理1.PC端常用事件事件名作用 click 当鼠标点击时触发 mouseover 当鼠标指针移动到元素上时触发 mouseout 当鼠标指针移出元素时触发 mouseenter 当鼠标指针移动到元素上时触发（不支持冒泡） mouseleave ...

2018-08-05 17:58:31 3847

原创盘点移动端的点击事件

主要有click , tap ,touch一、click 和 tap 比较两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。singleTap和doubleTap 分别代表单次点击和双次点击。二、关于tap的点透处理在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，...

2018-08-05 17:45:54 3692

原创 js获取/解链接析字符串中的http/https/FTP等

## 根据自己的需求可以得出自己想要的 ##利用正则完成的function httpString(s) { var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; //var reg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\...

2018-08-05 14:01:46 2418

什么是TDK1.其中”T”代表页头中的title元素，这里可能还要利用到分词技术，当标题(Title)写好后，我们就尽可能不要再去修改了，尽量简洁，没意义的词尽量不要加入到标题中，避免干扰到搜索引擎识别网站主题（标题在三十个以内）。 2.其中”D”代表页头中的description元素，要知道描述是对网页的一个概述，也是对title的补充，因为title中只能书写有限的字数，所以在descr...

2018-08-05 13:48:35 306

原创 jq实现国际化

1、准备的文件&lt;script type="text/javascript" src="../js/jquery-3.3.1.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="../js/jquery.i18n.

2018-06-12 20:18:12 887

原创 HTTP

什么是HTTP官方的标准解释：超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。HTTP协议的主要特点可概括如下：...

2018-06-12 19:58:19 278

原创 vue实际项目解决办法

解决vue变量未渲染前代码显示问题将v-cloak最好写在根标签上：&lt;div v-cloak&gt; {{demo}} &lt;/div&gt; 绑定动态的样式:style="{'stroke-dasharray': item.img}"注：属性为 stroke-dasharray使用单引号区分，不然会报错v-for多层循环 &lt;d

2018-06-04 19:45:55 764

原创 css3的动画实现

关键属性animation其中包括：动画名称；时间；延迟时间；播放次数关键帧@keyframes 动画名称{ 0%{ 相关属性..... } 20%{ 相关属性.... } 40%{ 相关属性...} 60%{ 相关属性....} 80%{...

2018-02-26 20:48:16 2103 3

原创 vuex的基础

vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么是‘状态管理’简单的...

2018-02-26 12:48:01 623

原创让div水平垂直居中

方法一（最常用的办法）div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left...

2018-02-23 18:58:01 189

原创常见的js插件库

MVC 框架和库•angular.js – 为网络应用增强 HTML。 •aurelia – 一个适用于移动设备、桌面电脑和 web 的客户端 JavaScript 框架。 •backbone – 给你的 JS 应用加入带有 Models、Views、Collections 和 Events 的 Backbone。 •batman.js – 最适合 Rails 开发者的 JavaScri

2018-02-02 16:43:05 6896

原创多个ajax请求时控制执行顺序或者等待执行完成后的操作

当确保执行顺序时：一、请求加async: false,，这样所有的ajax就会同步执行，请求顺序就是代码顺序代码部分：$.when($.ajax( 　　　　{async: false，　　　　 url : url1 　　　　 } 　　　　), $.ajax( 　　　　 {async: false，

2018-01-12 09:49:16 14547

原创 echarts动态表现数据方法

Echarts动态从后台获取数据进行图表展示html部分代码： head>meta charset="utf-8">title>EChartstitle>head>body> div id="main"style="width: 800px; height: 300px">div> script type="text/javascript"sr

2018-01-12 09:33:48 4471 1

原创 reactjs的生命周期

1、componentWillMount 在渲染前调用,在客户端也在服务端。 2、componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJA

2018-01-05 18:49:27 230

原创 js常用的调试办法

1. debugger;可以将 debugger 语句放在过程的任何地方以中止执行。使用 debugger 语句类似于在代码中设置断点。 debugger 语句中止执行，但它不关闭任何文件或清除任何变量。栗子：直接写debugger在js代码中：for(i = 1; i<5; i++) { Debug.write("loop index is

2017-12-27 18:31:35 326

原创 git的冲突解决

冲突的产生很多命令都可能出现冲突，但从根本上来讲，都是merge 和 patch（应用补丁）时产生冲突。而rebase就是重新设置基准，然后应用补丁的过程，所以也会冲突。git pull会自动merge，repo sync会自动rebase，所以git pull和repo sync也会产生冲突。当然git rebase就更不用说了。冲突的类型逻辑冲突git自动处理（合并/应用补丁）成功，但是逻辑上...

2017-12-21 15:40:01 977

原创 three.js相关知识

1、三大组建在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。创建这三要素的代码如下：var scene= new THREE.Scene();

2017-12-13 16:34:42 266

原创 canvas的常见的知识

canvas只有两个基本的属性，width和heigtht两个属性canvas id="tutorial" width="150" height="150">canvas>canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可

2017-12-13 14:56:17 277

原创继webpack之后的又一打包神器parcel

序言：在继grunt、gulp实现自动化构建之后，webpack又引领前端打包潮流，众所周知的是，vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候，又一打包神器横空出世——parcel。Parcel快速，零配置的 Web 应用程序特性　　　　快速打包　　　　Parcel 使用工作进程启用多核编译

2017-12-13 14:23:31 2559

原创 js数组去重的方法

第一种方法Array.from方法可以将Set结构转为数组let items = new Set([1, 2, 3, 4, 5]);let array = Array.from(items);这就是提供了一种数据去重的方法function uniq(array) { return Array.from(new Set(array));}uniq([1, 2,

2017-12-13 09:49:51 346

原创 jsp是神马???

一、什么是Jspjsp是一种基于文本的程序，全名java server page,其特点是html和java程序共存。执行时jsp会被运行容器编译，编译后的jsp跟servlet一样，因此jsp是另一种形式的servlet。二、jsp页面组成jsp 页面包括以下内容：静态内容指令表达式小脚本声明注释1.指令：page指令：通常位于jsp页面的顶端，同一个页面可以有

2017-12-12 15:34:31 224

原创 http到https的里程

网络传输协议HTTPHTTP（超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP 是互联网数据通信的基础。它是由万维网协会（W3C）和互联网工程任务组（IETF）进行协调制定了 HTTP 的标准，最终发布了一系列的 RFC，并且在1999年6月公布的 RFC 2616，定义了 HTTP 协议中现今广泛使用的一个版本——HTTP 1.1。

2017-12-12 15:26:56 241

原创相关reactjs的相关知识

一、组件的属性：var Greet = React.createClass({ render: function() { return Hello {this.props.name}; } }); React.render( , document.getElementById('con

2017-12-01 14:55:38 192

原创 reactjs组件之间的传值

1、父组件向子组件传值// 父组件var MyContainer = React.createClass({ render: function() { return ( ); }});// 子组件1：中间嵌套的组件var Intermediate = React.createClass({ render: function () {

2017-11-30 10:28:07 991

原创 git在工作中常用的命令

大体分为四个部分：Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库一、新建代码库：# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史

2017-11-29 11:30:03 302

原创 ubuntu 的基本命令

下载内容sudo apt-get insall ……sudo apt-get undatesudo apt-get upgradesudo apt-get -f install删除命令rm 文件rm -r 文件夹移动命令cp 文件　最终路径cp -r 文件夹　最终路径　（这样可以把一个文件夹的所有文件全部移到最终路径）复制命令sudo cp

2017-11-29 11:02:10 131

原创 ubuntu安装webstorm

Ubuntu 16.04安装WebStorm前提：必须正确安装JDK。在载Liunx在的webstorm版本；进行提取；新建文件夹将提取的文件粘贴然后右键打开终端命令；在终端命令内启动bin目录或者直接在bin目录下打开终端；在终端命令输入 /webstorm.sh (快捷操作输入w按下tab建自动补全)这样就可以了，点击左上角图标，输入webstorm就可以了

2017-11-29 10:49:34 474

原创 ubuntu16.4安装谷歌

第一步：右键选择开启终端命令；第二步：在终端输入sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list.d/第三步：在终端输入wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo

2017-11-29 10:34:55 205

原创 ubuntu16.04安装Nodejs

共有方法两种：（请放心食用，本人已品尝无毒）文件下载路径http://nodejs.cn/download第一步：安装nodejs1、sudo wgethttp://nodejs.org/dist/v0.10.30/node-v0.10.30.tar.gz或者2、tar xzvf node-v* && cd node-v*3、编译（过程较慢请赖心等待）./c

2017-11-29 10:21:02 169

原创 vue2.0之间组件的传值

1.标签 {{el.tourism_name}} {{el.tog_line_id}} {{el.address}} 2.在组件中，需要传动态参数时，可以如上例子 3.query中的参数id就是要传的参数，在组件中获取的方法为：created: function() { var id = this.$rout

2017-11-24 13:55:56 298

原创 js中数组的处理函数

1、数组的创建var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　创建一个数组并赋值要

2017-11-17 11:48:34 234

原创 JQ放大镜插件的调用

安装可以通过npm来安装jquery.zoom.js插件。npm install jquery-zoom使用方法在页面中引入jquery和jquery-zoom.js文件。script src="js/jquery-1.11.0.min.js">script>script src="js/jquery-zoom.js">scrip

2017-11-15 21:57:48 1917

空空如也

空空如也