Vue.js 事件修饰符的使用教程

一、前言熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供...

详解angularjs跨页面传参遇到的一些问题

上周写课程选择时间功能时需要将课程ID,星期,节次等参数传递给下一个页面,就查了查angularjs的ui-router跨页面传参,一开始是这样写的:
在app.js下添加 params:{'args':{}} 然后...

nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法

需求描述,由于工作的需要,需要将原本用于1280720的网页改为19201080的网页(电视端页面)。需求可以拆分为两部分,代码部分的修改以及图片的修改。在代码部分,需要将所有位置以及大...

详解vuex状态管理模式

一、前言本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+...

浅谈Angular 观察者模式理解

观察者模式意图定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。实现过程在老师教程中学到了 Angularjs 中的观察...

Vue表单输入绑定的示例代码

基础用法
你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但是v-model本质上不过...

socket io与vue-cli的结合使用的示例代码

关于在vue中使用websocket的简易例子
使用vue-cli生成一个vue模版
安装三个依赖:npm install -s socket.ionpm install -s vue-socket.ionpm install -s socket.io-client创...

Vue列表渲染的示例代码

用v-for把一个数组对应为一个组件元素
我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法:<ul> <li v-for="item in items"> {{ i...

vue 中基于html5 drag drap的拖放效果案例分析

事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。案例一:开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我...

vue-lazyload使用总结(推荐)

当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里。查阅资料后发现Vue-Lazyload这个插件用的频...

vue中使用codemirror的实例详解

这篇文章在vue里使用codemirror遇到的问题,写的很不错,还有下载的方法,大家可以点击查看。以下是自己使用过的,做出来的例子:做出来的效果图:记住使用之前要npm下载哦  npm inst...

在vue里使用codemirror遇到的问题

前提小结:
第一次用codemirror,而且是在vue里面使用,看了官方文档,一大串都是英文,翻译后大概了解了这个插件,然后在项目中使用时出现过好几个问题:
1.新版的codemirror在lib目录下...

微信小程序实现登录遮罩效果

目标:
用户点击提交、登录等按钮时,防止多次提交,所做的遮罩层
步骤:
实现很简单,按钮加上disabled属性,用true和false控制。效果图:代码:wxml<!--pages/login/login.wxml--><loadin...

js中的闭包实例展示

前言准确来说,闭包是基于正常的垃圾回收处理机制下的。也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收。但闭包利用一个技巧,让作用域...

小程序实现留言板

本文实例为大家分享了小程序实现留言板的具体代码,供大家参考,具体内容如下wxml
<view class='section'> <textarea class='message1' type='text' placeholder="请选择或者输...

微信小程序实现留言板功能

本文实例为大家分享了微信小程序实现留言板功能,可以手写,可以删除,可以快速留言,供大家参考,具体内容如下const app = getApp();Page({ /** * 页面的初始数据 */ data: { msgD...

微信小程序实现留言板(Storage)

本文为大家分享了微信小程序实现留言板的具体实现方法,供大家参考,具体内容如下先说一下小程序的开发环境之类的基础东西1.到微信公众平台下载开发者工具。安装2.appID与没有a...

JavaScript 点击触发复制功能实例详解

摘要:js调用复制功能使用:document.execCommand("copy", false); document.execCommand()方法功能很强大,了解更多请戳:https://developer.mozilla.org/zh-CN/docs/Web/API/Docu...

解决iview多表头动态更改列元素发生的错误的方法

解决iview 'You may have an infinite update loop in watcher with expression "columns"'解决方案单表头是可以动态变化不需要增添什么东西多表头目前iview尚不能动态变化...

vue实现与安卓、IOS交互的方法

方案背景 IOS用的是jsBridge插件实现调用、传参、回调的 安卓是在window挂载方法和挂载回调的IOS实现方案
调用原生方法封装如下
function setupWebViewJavascriptBridge...

axios使用拦截器统一处理所有的http请求的方法

axios使用拦截器 在请求或响应被 then 或 catch 处理前拦截它们。http request拦截器// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请...

Bootstrap的aria-label和aria-labelledby属性实例详解

aria-label正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。<!DOCTYPE html><html><head> <meta charset =...

BootStrap中的模态框(modal,弹出层)功能示例代码

bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标...

vue单页面实现当前页面刷新或跳转时提示保存

前言
最近公司vue项目中有一个需求,需要在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失。刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会...

angular6 利用 ngContentOutlet 实现组件位置交换(重排)

ngContentOutlet指令介绍
ngContentOutlet指令与ngTemplateOutlet指令类似,都用于动态组件,不同的是,前者传入的是一个Component,后者传入的是一个TemplateRef。
首先看一下使用...

vue头部导航动态点击处理方法

1:DATA中两个变量,data: { nav:['头条1','头条2'], ins:0,//记录当前点击的INDEX },2: <div v-for="(item,index) in nav" :class="index == i...

JavaScript 复制对象与Object.assign方法无法实现深复制

在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型。基本数据类型包括Number、Boolean、String、Null、String、Symbol(ES6 新增),而复杂数据类型包括Objec...

如何使用vuex实现兄弟组件通信

前言vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。下面这篇文章就来给大家介绍下vuex兄弟组件通信的方...

详解使用element-ui table组件的筛选功能的一个小坑

使用element-ui table组件的筛选功能的一个小坑
使用自定义模板和筛选功能,一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{t...

Vue请求JSON Server服务器数据的实现方法

由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据。此...

element ui table 增加筛选的方法示例

网上大部分都可以增加筛选功能,但没有找到下列这种情况。
若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则。<el-table-column v-for="item...

React如何解决fetch跨域请求时session失效问题

前言fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Res...

微信小程序实现列表页的点赞和取消点赞功能

今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下:
/*更新点赞*/ update_zan:function(e){ var that = this; var data = e.c...

Vue中的vue-resource示例详解

vue-resource特点 vue-resource插件具有以下特点:1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。2....

小程序实现列表点赞功能

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了...

vue如何根据网站路由判断页面主题色详解

前言本文主要介绍的是vue根据网站路由判断页面主题色的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧需求:不同品牌对应不同版本配色做法:根据域名带...

Vue利用History记录上一页面的数据方法实例

前言本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有‘#'的问题,下面话不多说了,来一起看看详细的介绍吧UI
需...

微信小程序实现点赞、取消点赞功能

最近接触到小程序,发现很有意思,在项目中遇到了一点小问题,就是点赞+取消点赞有些冲突,还有就是多项的点击,话不多说咱们直接上代码!效果图wxml <block wx:for="{{msg}}"> <image...

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置

前言本文主要给大家介绍的是关于使用Object.defineProperty巧妙找到修改某个变量的准确代码位置的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧语...

微信小程序实现星星评价效果

本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下代码实现wxml文件<!--pages/evaluatepage/evaluatepage.wxml--><view class='container'...

小程序实现五星点评效果

本文实例为大家分享了小程序实现五星点评效果展示的具体代码,供大家参考,具体内容如下先看一下效果图:如上图所示,这里我们要添加三个五星点评。我们这里之讲解一下,“描述相符”...

微信小程序实现笑脸评分功能

本文实例为大家分享了微信小程序实现笑脸评分的具体代码,供大家参考,具体内容如下image方式实现的笑脸评分功能由于我这里的图片使用的不是背景图,所以实现方法跟使用背景图的...

基于Vue-cli快速搭建项目的完整步骤

前言vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。下面话不多说了,来一起看...

微信小程序使用template标签实现五星评分功能

前言微信小程序特点“无须安装,无须卸载,触手可及,用完即走”,适合轻量级应用快速开发。小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程...

微信小程序实现顶部下拉菜单栏

本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下js代码var cityData = require('../../utils/city.js');Page({ data: { //选择的终点城市...

浅谈React碰到v-if

最近在重构公司老项目,由于本人以前的技术栈是vue, 换工作后发现现在公司的技术栈是react, 所以重构的过程是及其痛苦。加之项目又是几年前的老项目,不敢大改,比葫芦画瓢比比皆...

vue-router判断页面未登录自动跳转到登录页的方法示例

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录下面的两个页面,登录页不需要检测,首页需要检测
const routers = [{ path: '/', compo...

微信小程序CSS3动画下拉菜单效果

微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个思路利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层vi...

微信小程序实现下拉菜单切换效果

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下效果图:wxml:<!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <...

微信小程序使用swiper组件实现层叠轮播图

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下wxml:<view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autopla...

返回顶部
顶部