自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(38)
  • 收藏
  • 关注

原创 vue中父子之间的通信

父到子:父: <p :query="query"></p>子: props:{ query:{ type:"", default:"" }},watch(){ query(){}}子到...

2018-11-19 14:14:46 202

原创 vuex使用

    vuex使用:    在components文件夹同级下新建一个store文件夹.    将store文件夹在main.js中引入,如: import store from './store' 然后在下面vue上挂载上.    store/      state.js      index.js      mutations      mutation-typ...

2018-11-19 13:41:31 220 1

原创 碰撞检测

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

2018-11-23 11:49:42 288

原创 进度条的拖拽

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{margin: 0;padding: 0;

2018-11-23 11:25:34 686

原创 数组去重的方法

第一种方法:var array=[23,45,64,43,64,89,66,23,17,43]        var arr1=[]        for(i in array){            if(arr1.indexOf(array[i])==-1){                arr1.push(array[i])            }     ...

2018-11-23 11:17:31 231

原创 jquery 放大镜

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

2018-11-23 11:01:51 276

原创 jquery 拖拽

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>   <script src="jquery-1.11.1.min.js"

2018-11-23 10:59:22 556

原创 jquery吸顶

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>防腾讯固定导航栏</title><style type="text/css">*{margin:0;

2018-11-23 10:51:26 557

原创 楼层实现原理

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

2018-11-23 10:49:16 513

原创 登录,注册用express写虚拟接口,完成页面逻辑

登录:<template><div class="user"><h1>用户登录</h1><div class="red">{{title}}</div><input type="username" v-model='username' placeho

2018-11-22 10:43:58 544

原创 瀑布流

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>            *{margin: 0;p

2018-11-22 10:17:51 145

原创 面向对象放大镜

                                                   <!DOCTYPE html>                         <html lang="en">                          <head>                          <meta ...

2018-11-22 09:54:06 366

原创 vue中scroll 的使用

       滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。常用效果:移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。npm install better-scroll --saveimport ...

2018-11-21 14:16:46 19859

原创 小程序的事件机制

小程序中的javascript实现方式小程序的事件机制参见文档—>框架—>事件1、实现方法     事件绑定的写法同组件的属性,以 key=“value” 的形式实现     key 以bind或catch开头,然后跟上事件的类型(参考文档)         如bindtap、catchtouchstart。 说明:自基础库版本 1.5.0 起,bind和catch后可...

2018-11-21 10:57:52 450

原创 小程序框架介绍

小程序框架分为两部分    (1)视图层(View)   描述语言:WXML 和 WXSS    (2)逻辑层(App Service)  描述语言:JavaScript 框架的核心:一个响应的数据绑定系统         框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。WXML的语言特性 (1)数据绑定 (2)列表渲染 (3...

2018-11-21 10:45:29 1549

原创 微信小程序

微信小程序Native App由安卓和ios开发,可以通过苹果的App store或者安卓的应用商店直接下载安装优点:直接底层开发,客户端安装,性能好,效果流畅缺点:不能跨平台,开发需要ios和安卓两拨人,成本较高,发布的时间审核时间太长Web App由HTML5开发,基于浏览器运行优点:跨平台,开发一套代码可以在多设备上运行,节约成本,支持热发布,应用直接传到服务器,一刷新页...

2018-11-21 10:25:58 257

原创 vue-router 路由

###(Vue-Router)vue-cli 单文件组件  .vue就是一个组件SPA(单页面应用程序) Single Page Application单页面应用程序:    原理:    只有入口的html文件,根据hash(哈希)值的不同显示不同的页面(组件),    局部更新视图,不用刷新整个页面Vue-Route库(配合vuejs使用的第三方插件/库)用来处理vuejs...

2018-11-21 09:04:40 199

原创 路由的嵌套

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&lt

2018-11-21 08:53:41 166

原创 移动端布局总结

移动端布局总结一:viewport概念ViewPort<meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大最小缩放比例是什么。使用ViewPort<meta>标记还表示文档针对移动设备进行了优化。ViewPort<meta>标记的content值是有指令及其值组成的以逗号分隔的列表。属性width:控制viewport的宽度...

2018-11-20 18:57:54 141

原创 怎么判断是PC端还是移动端?

console.log(window.navigator.userAgent)移动端返回的是:“Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36”移动端有“Mobile”...

2018-11-20 18:53:29 972

原创 变量的扩展

1.Es6 ECMAScript6的简称或者叫ECMAScript2015,它是Javascript一个最新的标准/规范2.变量的扩展var :1.可以重复声明2.被可以任意修改3.存在变量提升4.没有块级作用域let:1.用来声明变量2.不可重复声明3.存在块级作用域const:1.用来声明常量2.不可被重复声明3.存在块级作用域4.不...

2018-11-20 18:41:18 351

原创 promise是什么/怎么用

概念:promise是异步编程的一种解决方案.        (就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数)异步:之前实现异步操作的方式.①回调函数②事件触发作用:解决异步操作问题.特点:(1)对象的状态不受外界影响.promise对象代表一个异步操作,            有三种状态: pending(进行中).fulfilled(已成功),reje...

2018-11-20 18:38:37 4187

原创 Dom中的节点

节点操作:       创建元素节点: document.createElement('要创建元素节点的名字')       创建文本节点: document.createTextNode('文本内容')添加节点:①appendChild() 将一个新节点添加到某个节点的子节点列表的末尾上语法:  父节点.appendChild(要添加的子元素)②insertBefore(...

2018-11-20 16:00:57 134

原创 获取元素的方法

获取独立的id元素:    getElementById()  获取同名元素:          getElementsByTagName()[]获取相同name名:     getElementByName()获取class名的元素:  getElementsByclassName()获取满足条件的所有元素:   querySelectorAll()获取满足条件的第一个元素:...

2018-11-20 15:49:13 163

原创 字符串的方法

字符串的方法:1. charAt(下标)作用:查找该下标位置处的字符,返回一个字符2. charCodeAt(下标)作用:查找该下标位置处的字符的unicode编码3. fromcharcode()作用:根据一个unicode编码值返回对应的字符,与charcodeAt()结果相反4. indexOf()作用:查找某个字符在字符串中首次出现的位置5. lastIndexOf()...

2018-11-20 15:42:30 169

原创 数组的方法

数组的方法:1. push()方法:从数组的末尾添加元素,返回数组的长度2. pop()方法: 从数组的末尾删除一个元素,返回被删除的元素3. shift()方法:从数组的头部删除一个元素,返回被删除的元素4. unshift()方法:从数组的头部添加元素,返回数组的长度5. reverse()方法:逆向排序,返回逆向排序后的数组6. sort()方法:从小到大排序,返回排...

2018-11-20 15:41:29 173

原创 事件兼容方法

1.可视区document.documentElement.clientWidth || document.body.clientWidth2.滚动高度document.documentElement.scrollTop || document.body.scrollTop3.className     function getClass (cname){         ...

2018-11-20 15:38:15 228

原创 移动H5前端性能优化

加载优化:减少HTTP请求(要尽量减少页面的请求数)                ①合并css,javascript                ②合并小图片,使用雪碧图什么是雪碧图?雪碧图是根据CSS sprite音译过来的,就是将很多很多的小图标放在一张图片上,就称之为雪碧图。使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很...

2018-11-20 14:57:15 264

原创 MVVM和MVC区别?

MVVM 是一个model+view+viewModel框架,利用双向绑定技术,当model变化时,view-model会自动更新,view也会自动变化很好做动数据的一致性. vue数据驱动,通过数据来显示视图数据操作比较多的场景,更加便捷.好处:低耦合,可重用性,可独立开发性,可测试性MVC  模式来设计项目结构mvc模式是软件工程中的一种软件架构模式,把软件系统分为三个部分...

2018-11-19 15:09:46 246

原创 单页面应用优缺点

优点:        1.具有桌面应用的即时性,网站的可移值性和可访问性        2.用户体验好,快,内容的改变不需要重新加载整个页面        3.基于上面一点,spa相对于服务器压力小        4.良好的前后端分离        5.同一套后端程序代码,不用修改就可以用web界面,手机,平板等多种客户端缺点:        1.不利于seo   ...

2018-11-19 14:39:00 1056

原创 vue中sass的使用及配置

在vue-cli环境中build文件夹中的webpack.base.conf.js配置 resolve: {    extensions: ['.js', '.vue', '.json','.scss'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),    }  },modu...

2018-11-19 14:29:13 171

原创 vue中的动画

动画:内部原理:借助css3做动画transition     过渡动画animation    祯动画使用:<transition name="slide">   name的属性值是自定义的         <div></div></transition><transition-group name=""&am

2018-11-19 14:05:03 120

原创 vue中的懒加载

下载懒加载:    npm i vue-lazyload  -S    在main.js中引入    import Vuelazyload from 'vue-lazyload'    Vue.use(Vuelazyload,{        preload:1.3,  //预加载高度比例        loading:require('../assents/images/...

2018-11-19 13:45:52 188

原创 express请求接口

express请求接口:        1,设置中间件,borderparser进行响应request的http请求post请求    2.设置不同的路由请求不同的http        3.通过模版传参,动态传数据    用法:            第一:先引入express                const express=require('express'...

2018-11-19 13:43:35 2067

原创 vue概念及使用,vue-cli搭建环境及应用

vue是单页面应用程序#VueJs 读音(view)    1.简介:        前端MVVM框架,    2.作者:        中国江苏人:尤雨溪,现在Google公司    3.官网        http://cn.vuejs.org/index.html        (也是学习vuejs最好的素材)    4.前端的三大框架(MVVM框架)      ...

2018-11-19 13:38:28 351

原创 ES6中,Promise/then的用法

Promise1:概念:Promise是异步编程的一种解决方案.2:异步:之前实现异步操作的方式:①回调函数②事件触发3:作用:解决异步操作问题,区别于上述的两种方法.4:特点:  ①:对象的状态不受外界的影响,promise对象代表一个异步操作,有三种状态:Pending(进行中).fulfilled(已成           功).rejected(已失败).只有异步操作的结果,可以决定当前是...

2018-07-13 14:02:43 3421

原创 ES6与ES5语法的区别

(1)letES6:新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.(2)作用域ES5:全局作用域,局部(函数)作用域.ES6:全局作用域,局部(函数)作用域,块级作用域块级作用域:简单的理解就是一段代码是由一个大括号包裹起来的,那么,这个大括号里面就是一个块级作用域.(3)基本用法①声明变量用法不一样ES5:声明变量用varES6:声明变...

2018-07-13 09:42:57 1667

原创 ES6面向对象淡入淡出无缝轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &amp

2018-07-13 09:20:38 943

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除