嘻嘻蚕豆-优快云博客

原创 vue中父子之间的通信

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

2018-11-19 14:14:46 237

原创 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 298 1

原创碰撞检测

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

2018-11-23 11:49:42 352

原创进度条的拖拽

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

2018-11-23 11:25:34 761

原创数组去重的方法

第一种方法: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 284

原创 jquery 放大镜

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

2018-11-23 11:01:51 325

原创 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 602

原创 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 590

原创楼层实现原理

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

2018-11-23 10:49:16 567

原创登录,注册用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 590

原创瀑布流

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

2018-11-22 10:17:51 188

原创面向对象放大镜

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

2018-11-22 09:54:06 408

原创 vue中scroll 的使用

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

2018-11-21 14:16:46 20022

原创小程序的事件机制

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

2018-11-21 10:57:52 503

原创小程序框架介绍

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

2018-11-21 10:45:29 1630

原创微信小程序

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

2018-11-21 10:25:58 306

原创 vue-router 路由

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

2018-11-21 09:04:40 236

原创路由的嵌套

<!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 208

原创移动端布局总结

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

2018-11-20 18:57:54 182

原创怎么判断是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 1044

原创变量的扩展

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 398

原创 promise是什么/怎么用

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

2018-11-20 18:38:37 4248

原创 Dom中的节点

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

2018-11-20 16:00:57 172

原创获取元素的方法

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

2018-11-20 15:49:13 195

原创字符串的方法

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

2018-11-20 15:42:30 215

原创数组的方法

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

2018-11-20 15:41:29 252

原创事件兼容方法

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

2018-11-20 15:38:15 256

原创移动H5前端性能优化

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

2018-11-20 14:57:15 314

原创 MVVM和MVC区别?

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

2018-11-19 15:09:46 282

原创单页面应用优缺点

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

2018-11-19 14:39:00 1101

原创 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 205

原创 vue中的动画

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

2018-11-19 14:05:03 147

原创 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 227

原创 express请求接口

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

2018-11-19 13:43:35 2114

原创 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 383

原创 ES6中,Promise/then的用法

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

2018-07-13 14:02:43 3491

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

2018-07-13 09:42:57 1711

原创 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 983

空空如也

空空如也