JavaScript - 教程之家

39浏览

0评论

使用vue-cli webpack 快速搭建项目的代码

一、安装vuenpm install vue -g
二、用vue-cli快速搭建项目//全局安装vue-clinpm install install -g vue-cli//创建一个基于webpack模板的项目vue init webpack [demoname]...

2020-05-27

49浏览

0评论

详解nuxt路由鉴权(express模板)

这里我们以用户登录鉴权为例
express依赖express-session中间件实现session功能
若我们不加载express-session组件router.get('/user/login', function (req, res) { cons...

2020-05-27

56浏览

0评论

Nuxt.js SSR与权限验证的实现

Nuxt.js是一个建立在Vue.js基础上的服务端渲染框架。它非常易于上手并且可以让你在几分钟内构建你的应用。服务端渲染是一个解决所有SPA的SEO问题的伟大解决方案，但不幸的是...

2020-05-27

51浏览

0评论

nuxt.js中间件实现拦截权限判断的方法

最近在把vue的项目改成基于nuxt.js是 ssr渲染，需要进行权限拦截判断，网上查了不少资料。最终看官方手册解决了，贴一下过程项目环境"element-ui":"^2.3.4","flyio":"^0.5.2","js...

2020-05-27

48浏览

0评论

Nuxt.js之自动路由原理的实现方法

Nuxt.js 是一个基于 Vue.js 的通用应用框架。集成了Vue 2、Vue-Router、 Vuex、Vue-Meta，用于开发完整而强大的 Web 应用。它的特性有服务端渲染、强大的路由功能，支持异步数...

2020-05-27

50浏览

0评论

详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序

本文介绍了详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序，分享给大家，具体如下：先举一个比较典型的例子：setImmediate(function(){ console.log...

2020-05-27

56浏览

0评论

vue中组件的过渡动画及实现代码

1. 和多个元素的过渡一样，用组件来替换transition中包裹的标签<style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transiti...

2020-05-27

42浏览

0评论

apicloud拉起小程序并传递参数的方法示例

最近工作中遇到一个需求：App拉起微信小程序。App是用APICloud开发的。查阅APICloud文档发现端API->开放SDK->wx模块下有launchMiniProgram方法可以实现官方文档于是在项目中...

2020-05-27

59浏览

0评论

JSON生成Form表单的方法示例

JSON表单描述JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。
JSON表单的优点是：可以快...

2020-05-27

53浏览

0评论

如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过1.富文本去除html标签...

2020-05-27

50浏览

0评论

跨域解决之JSONP和CORS的详细介绍

JSONP跨域和CORS跨域什么是跨域？跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！同源策略同源策略：域名、协议、端口均相同。浏览器...

2020-05-27

47浏览

0评论

微信小程序局部刷新触发整页刷新效果的实现代码

效果图如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需...

2020-05-27

50浏览

0评论

从源码里了解vue中的nextTick的使用

今天做了一个需求，场景是这样的：在页面拉取一个接口，这个接口返回一些数据，这些数据是这个页面的一个浮层组件要依赖的，然后我在接口一返回数据就展示了这个浮层组件，展示的同时，上...

2020-05-27

38浏览

0评论

js操作table中tr的顺序实现上移下移一行的效果

总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果具体思路是获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了目标行再直接加进去...

2020-05-27

52浏览

0评论

layer弹出子iframe层父子页面传值的实现方法

本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：
父页面获取子页面元素
格式：
$("#iframeID").contents().find("#eleID")示例代码：
father.html
<!D...

2020-05-27

62浏览

0评论

微信小程序功能之全屏滚动效果的实现代码

想做一个全屏滚动的效果，于是在网上找了一个差不多的例子，但是觉得有些地方不是很好，于是改进了一下；
先给大家展示下效果图，感觉不错，请参考实例代码。代码：wxml:　<!-- 第一页 --...

2020-05-27

39浏览

0评论

详解vue中localStorage的使用方法

什么是localStorage对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage1.sessionStorage（临时存储）：为...

2020-05-27

58浏览

0评论

详解Vue组件之作用域插槽

写作用域插槽之前，先介绍一下Vue中的slot内容分发：如果<child-component></child-component>标签之间没有插入那两个p标签的话，页面会显示子组件模板中定义的“<p>父组件如果没...

2020-05-27

49浏览

0评论

详解三种方式解决vue中v-html元素中标签样式

Vue为v-html中标签添加CSS样式<template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div cl...

2020-05-27

46浏览

0评论

vue-cli3.0如何使用CDN区分开发、生产、预发布环境

前言：上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化，之前是直接在html中手动注入JS，也没有对开发和生产模式进行区分，因为是使用收费的CDN，所以在...

2020-05-27

54浏览

0评论

微信上传视频文件提示（推荐）

晚上要下班了老板发来一个任务：把一个300M左右的视频压缩到100M以内,以便在微信上发送。这倒不是难事，狸窝咱又不是没用过，开搞！！！就是这么邪气，恰好100.18M视频质量：低等质量，音频质...

2020-05-27

46浏览

0评论

vue+node实现图片上传及预览的示例方法

本文介绍了vue+node实现图片上传及预览的示例方法，分享给大家，具体如下：先上效果图

上代码
html部分主要是借助了weui的样式<template> <div> <myheader :title="'发布动态'"...

2020-05-27

52浏览

0评论

js实现按钮开关单机下拉菜单效果

通过onclick单击事件，实现效果，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>开关按钮设置</title> </head> <link rel="stylesheet" href=...

2020-05-27

75浏览

0评论

原生JS实现手动轮播图效果实例代码

手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。手动轮播，是...

2020-05-27

68浏览

0评论

浅析vue 函数配置项watch及函数 $watch 源码分享

Vue双向榜单的原理大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定，不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原...

2020-05-27

44浏览

0评论

vue中的ref和$refs的使用

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
ref 有三种用法：1、ref 加在普通的...

2020-05-27

39浏览

0评论

vue全局使用axios的方法实例详解

在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueResource from 'vue-resource'之后，直...

2020-05-27

63浏览

0评论

vue-cli 2.*中导入公共less文件的方法步骤

在新版的Vue CLI 3中，如何导入公共less文件在文档里已经描述的很清楚了，但是在2.*的版本中，我没有查到相关的办法，网友的办法又相当复杂，于是我推荐给大家一个很简单的办法。首先...

2020-05-27

61浏览

0评论

Vue.js组件间通信方式总结【推荐】

平时在使用Vue框架的业务开发中，组件不仅仅要把模板的内容进行复用，更重要的是组件之间要进行通信。组件之间通信分为三种：父-子；子-父；跨级组件通信。下面，就组件间如何通信做一...

2020-05-27

52浏览

0评论

详解Angular中实现自定义组件的双向绑定的两种方法

在 Angular 中，对于表单元素，通过 [(ngModel)] 即可以简单地实现双向绑定。对于自定义组件而言，希望实现同样的效果可以怎么做呢？1 实现自定义组件的 ngModel 指令
如果希望自定...

2020-05-27

56浏览

0评论

angular4自定义表单控件[(ngModel)]的实现

[(ngModel)]拆分[(ngModel)] 将[]输入()输出组合起来，进行双向数据绑定。拆分开来输入属性 [ngModel](ngModelChange)输出监听元素值的变化，并同步view value与model value...

2020-05-27

51浏览

0评论

详解Vue2.0组件的继承与扩展

前言本文将介绍vue2.0中的组件的继承与扩展，主要分享slot、mixins/extends和extend的用法。一、slot1.默认插槽和匿名插槽slot用来获取组件中的原内容，此方式用于父组件向子组...

2020-05-27

87浏览

0评论

vue使用better-scroll实现下拉刷新、上拉加载

本文目的是为了实现列表的下拉刷新、上拉加载，所以选择了better-scroll这个库。
用好这个库，需要理解下面说明必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽...

2020-05-27

57浏览

0评论

详解Angular模板引用变量及其作用域

Angular模板引用变量
如果你曾经参与过Angular项目的开发，那么你可能一眼就会看出谁将是本文的主角：<input type="text" [value]="value" #name>若你对此陌生，也无须在意。示例...

2020-05-27

77浏览

0评论

创建echart多个联动的示例代码

鼠标悬浮同时触发多个echart效果如下html代码<div class="contain"> <div class="sel"> <div class="sel1"> <div class="top"> <span>选择时间间...

2020-05-27

67浏览

0评论

详解小程序不同页面之间通讯的解决方案

小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同tab页面之间的数据交互等等。于是做了以下总结当前页面打开新的页面
打开新...

2020-05-27

51浏览

0评论

详解js静态检查工具eslint配置文件

ESLint 是一个 Javascript 静态检查工具，它可以帮你养成良好的编程习惯{ // 环境定义了预定义的全局变量。 "env": { //环境定义了预定义的全局变量。更多在官网查看...

2020-05-27

70浏览

0评论

详解Vue CLI 3.0脚手架如何mock数据

前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在开发...

2020-05-27

51浏览

0评论

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

什么是ui-router　　ui-router是AngularUI库最有用的组件之一（AngularUI库由AngularJS社区构建）。它是一个第三方路由框架，允许通过状态机制组织接口，而不是简单的URL路由。什...

2020-05-27

63浏览

0评论

vue下拉菜单组件（含搜索）的实现代码

之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。效果图：子组件 dropdown.vue<template> <div class="vue-dropdown default-theme"> <div class="cur-...

2020-05-27

75浏览

0评论

vue将单页面改造成多页面应用的方法

问题描述：手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面，用户查看页面是很简单的页面，但是在加载过程中，却加载了整个应用的打包代码，量重...

2020-05-27

87浏览

0评论

详解离线安装npm包的几种方法

这段时间的工作主题就是Linux下的“离线部署”，包括mongo、mysql、postgresql、nodejs、nginx等软件的离线部署。平常在服务器上借助apt-get就能轻松搞定的事情，在离线环境下...

2020-05-27

56浏览

0评论

vue组件实践之可搜索下拉框功能

之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。效果图：子组件 DROPDOWN.VUE<template> <div class="vue-dropdown default-theme"> <div class="cur-n...

2020-05-27

178浏览

0评论

electron + vue项目实现打印小票功能及实现代码

一需求：公司项目需要通过electron调用系统打印机，实现打印小票的功能。二、分析：
electron打印大概有两种：第一种：通过window的webcontent对象，使用此种方式需要单独开出一个打印...

2020-05-27

96浏览

0评论

浅谈Vue.js 中的 v-on 事件指令的使用

v-on 事件指令用于绑定事件。1 基础用法v-on 指令绑定事件后，就会监听相应的事件。html：<div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</butto...

2020-05-27

82浏览

0评论

vscode 开发Vue项目的方法步骤

下载地址： vscode https://marketplace.visualstudio.com/VSCode或者本地地址：https://www.freexyz.cn/softs/606746.html开始安装插件
Vetur : vue的文件代码高亮 Atom One...

2020-05-27

82浏览

0评论

Cookbook组件形式：优化 Vue 组件的运行时性能

Vue 2.0 在发布之初，就以其优秀的运行时性能著称，你可以通过这个第三方 benchmark 来对比其他框架的性能。Vue 使用了 Virtual DOM 来进行视图渲染，当数据变化时，Vue 会对比前后...

2020-05-27

44浏览

0评论

vue中tab选项卡的实现思路

今天分享下vue中tab选项卡的套路,废话不多说，直接上效果图应用场景•不同注册和登录方式切换
•操作选项切换如保存和取消
•后台管理系统中各菜单选项切换...

2020-05-27

58浏览

0评论

vue中选项卡点击切换且能滑动切换功能的实现代码

具体代码如下所述： <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick...

2020-05-27

56浏览

0评论

移动端滑动切换组件封装 vue-swiper-router实例详解

具体代码如下所述：<strong>组件部分</strong><template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item...

2020-05-27

热门文章