- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue基础之使用get、post、jsonp实现交互功能示例
一、如果vue想做交互，引入: vue-resouce二、get方式1、get获取一个普通文本数据:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> </style...
2019-03-30 15:25:40
1215
原创 JS实现的贪吃蛇游戏完整实例
思想：1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑2、设计食物：属性宽、高3、显示蛇：根据状态向地图里加元素4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物6、添加定时器，绑定按键完整示例：<!doctype html&...
2019-03-29 14:19:56
974
1
原创 async/await的错误处理方法总结与优化
前言node.js的世界，从callback开始，不会止于async.本文将给大家详细介绍关于async/await优雅的错误处理的相关内容，下面话不多说了，来一起看看详细的介绍吧async/await的错误处理一般情况下 async/await 在错误处理方面，主要使用 try/catch，像这样const fetchData = () => { return new Prom...
2019-03-28 21:06:47
16652
3
原创 Vue中多个元素、组件的过渡及列表过渡的方法示例
多个元素之间过渡动画效果多元素之间如何实现过渡动画效果呢？看下面代码.fade-enter,.fade-leave-to{ opacity: 0;}.fade-enter-active,.fade-leave-active{ transition: opacity 3s;} <div id="root"> <transition name="fade...
2019-03-28 15:13:01
1728
原创 谈谈JavaScript中super(props)的重要性
我听说 Hooks 最近很火。讽刺的是，我想用一些关于 class 组件的有趣故事来开始这篇文章。你觉得如何？本文中这些坑对于你正常使用 React 并不是很重要。 但是假如你想更深入的了解它的运作方式，就会发现实际上它们很有趣。开始第一个。首先在我的职业生涯中写过的super(props) 自己都记不清：class Checkbox extends React.Component { ...
2019-03-27 19:11:43
1556
原创 从0到1构建vueSSR项目之路由的构建
vue开发依赖的相关配置Vue SSR 指南今天先做客户端方面的配置，明天再做服务端的部分。那么马上开始吧~修改部分代码脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码//App.vue<template> <div id="app"> <router-view></router-view> </div...
2019-03-27 13:57:14
474
原创 vuex实现及简略解析(小结)
大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图通过官方文档提供的流程图我们知道，vuex的工作流程，1、数据从state中渲染到页面；2、在页面通过dispatch来触发action；3、action通过调用commit,来触发mutation；4、mutation来...
2019-03-26 14:36:16
1945
原创 vue中各种通信传值方式总结
1、路由通信传值路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。例子：创建并在路由注册一个组件Head<template> <div id="head"> <button @click="handleChange">clickMe</button> //给按钮绑定点击事件 </div> <...
2019-03-21 14:35:20
469
原创 vue单页缓存方案分析及实现
实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同path，不同参数展示不同view，这就有点坑了，所以需要结合自己要实现的功能，适当改造keep-alive，为了实现每次前进都能刷新，返回走缓存还能自动定位的功能，...
2019-03-20 14:10:58
642
原创 基于Vue实现图片在指定区域内移动的思路详解
当图片比要显示的区域大时，需要将多余的部分隐藏掉，我们可以通过绝对定位来实现，并通过动态修改图片的left值和top值从而实现图片的移动。具体实现效果如下图，如果我们移动的是div 实现思路相仿。此处需要注意的是我们在移动图片时，需要通过draggable=“false” 将图片的 ，否则按下鼠标监听onmousemove事件时监听不到然后还需要禁用图片的选中css/*禁止元素选中*/...
2019-03-19 14:52:20
4134
2
原创 vue 配置多页面应用的示例代码
前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化）vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。新建 vue 项目vue init webpack vue_multiple_testcd vue_multiple_testnpm install安装 gl...
2019-03-17 15:01:50
582
原创 深入浅析js原型链和vue构造函数
一、什么是原型链?简单回顾下构造函数,原型和实例的关系:每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.然鹅,在js对象里有这么一个规则:如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instan...
2019-03-15 14:22:36
3483
1
原创 vue使用原生js实现滚动页面跟踪导航高亮的示例代码
使用vue做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。html结构...
2019-03-14 21:48:47
975
原创 vue单页面实现当前页面刷新或跳转时提示保存
前言最近公司vue项目中有一个需求，需要在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失。刚开始思考觉得很简单，直接在Router的钩子中判断就好了，但是会发现还有新的问题存在，浏览器刷新和当前页面关闭的时候无法监听，最终用window.onbeforeunload成功解决，所以用这篇文章简单记录下整个解决过程。vue-Router的钩子：路由钩子可以分为全局的，单个路由...
2019-03-13 17:42:46
1391
原创 Vue项目引进ElementUI组件的方法
环境要求NodejsNodejs官网下载地址：http://nodejs.cn/download/具体安装参考其他资料打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。如果安装版本比较老，想升级新版本npm install npm -g安装 webpack安装webpacknpm install webpack -g-g 表示安装为全局安装 vu...
2019-03-13 14:33:20
1602
原创 Vue实现移动端页面切换效果
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
2019-03-12 14:38:03
3406
原创 vue将单页面改造成多页面应用的方法
问题描述： 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面，用户查看页面是很简单的页面，但是在加载过程中，却加载了整个应用的打包代码，量重且影响了响应和体验。我想要的效果是，查看页面只加载查看页面的代码，不包含管理系统的代码，因此着手将单页面应用改造成多页面应用，这里分享下方法。1、改造文件目录改造前：改造后：assets：这里不变，依然放置公...
2019-03-11 16:31:54
1564
1
原创 Vue源码解析之Template转化为AST的实现方法
什么是AST在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。Virtual DomVue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。Vue源码中虚拟DOM构建经历 ...
2019-03-10 15:42:57
2538
原创 Vue.js的复用组件开发流程完整记录
前言从维护视图到维护数据，Vue.js 让我们快速地开发应用。但随着业务代码日益庞大，组件也越来越多，组件逻辑耦合严重，使代码维护变得十分困难。接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。下面先看看我们的需求列表组件quiList.vue本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时...
2019-03-08 17:35:25
594
原创 JS实现select选中option触发事件操作示例
本文实例讲述了JS实现select选中option触发事件操作。分享给大家供大家参考，具体如下：我们在用到下拉列表框select时，需要对选中的选项触发事件，其实本身没有触发事件方法，我们只有在select里的onchange方法里触发。想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件又在select中添加onclick 这下可好了,没选opti...
2019-03-07 14:34:57
22007
1
原创 使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架...
2019-03-06 19:26:48
111342
7
原创 原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法：先介绍一下jquery中有相应的表单序列化的方法：1.serialize()方法格式：var data = $(“form”).serialize();功能：将表单内容序列化成一个字...
2019-03-05 19:25:20
3044
1
原创 深入浅析angular和vue还有jquery的区别
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框...
2019-03-05 15:50:46
773
原创 JavaScript中高阶函数的魅力
前言一个函数就可以接收另一个函数作为参数,简言之,函数的参数能够接收别的函数,这种函数就称之为高阶函数JavaScript 的高阶函数跟 Swift 的高阶函数类似常见的高阶函数有: Map、Reduce、Filter、Sort高阶函数是指至少满足下列条件之一的函数 1：函数可以作为参数被传递 2：函数可以作为返回值输出JavaScript语言中的函数显然的是满足了高阶函数的...
2019-03-04 14:50:16
1101
1
原创 vue服务端渲染缓存应用详解
服务端渲染简介服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。但如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用 JS 来完成，配合 history.pu...
2019-03-03 21:02:07
559
原创 vue服务端渲染添加缓存的方法
什么是服务器端渲染(SSR)？Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在...
2019-03-03 14:44:56
727
原创 vue、react等单页面项目部署到服务器的方法及vue和react的区别
tml页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。如果说项目是直接跟在域名后面的，比如:http://www.sosout....
2019-03-01 14:43:34
841
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人