经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

vue+layui实现select动态加载后台数据的例子

刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未...[2019/9/20]

vue-froala-wysiwyg 富文本编辑器功能

vue-froala-wysiwyg 富文本编辑器功能

近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala。虽然不是免费的,但是功能实在是太强大了。 froala 文档:https: www.froala.com/wysiwyg-editor/doc overview froala 官方demo: https...[2019/9/19]

Vuex,从入门到...

Vuex,从入门到...

Vuex 是什么? 官方是这么说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 不懂?呵呵,没关系。我是这么认为的:Vuex 就是前端为了方便数据的操作而建立的一个&r...[2019/9/18]

搭建一个VUE项目

搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https: nodejs.org/zh-cn/download/ 2.至于什么是LTS,请参考该知乎问题:https: www.zh...[2019/9/18]

vue.js购物车添加商品组件的方法

现实向购物车添加商品组件 代码 <template> <div cla ="cartcontrol"> <!--商品减一区域--> <div cla ="reduce" v-show="food.count>0"> ...[2019/9/17]

Vue 自定义指令功能完整实例

本文实例讲述了Vue 自定义指令功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...[2019/9/17]

vue中nextTick用法实例

什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的...[2019/9/12]

Vue最佳实践

Vue最佳实践 Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题。本建议如有不妥之处,敬请指正...[2019/9/10]

Vue外卖的学习之路

Vue外卖的学习之路

用Vue打造外卖项目 一、项目前整理思绪 (1)项目所需的技术栈   (2)项目分布 (3)整体项目文件介绍 原文链接:http: www.cnblogs.com/zhangmenglei/p/11457009.html[2019/9/10]

vue给对象动态添加属性和值的实例

一、背景 介绍:在vue中请求接口中,一个请求方法可能对应后台两个请求接口,所以请求参数就会有所不同。需要我们先设置共同的参数,然后根据条件动态添加参数属性。 二、案例 let that = this; let params = { "type":that.addQu...[2019/9/10]

Vue使用mixin分发组件的可复用功能

vue创建高阶组件的实现不够react优雅,但那是vue和react的设计思想导致的。在react中一切都是函数,而在vue中,组件最终都是函数,但在开发时可以是JSON对象,而且每个vue组件要注意三个点:props、events和slots,就是这三个导致vue创建高阶组件时要传入相应的属性,...[2019/9/2]

Vue函数式组件的应用实例详解

一、函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二、组件函数的使用   1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数...[2019/8/30]

vuex vue简单使用知识点总结

vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据; 配置vuex的步骤: 1、运行cnpm i vuex -S 2、导包 import Vuex from ''v...[2019/8/30]

VUE路由动态加载实例代码讲解

首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多,路由配置也会越来越大,路由文件就会变得不好维护 import Vue from ''vue'' import Router from ''vue-router'' import HelloWorld from ''...[2019/8/27]

vue router动态路由设置参数可选问题

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数...[2019/8/22]

使用 Vue 实现一个虚拟列表的方法

因为 DOM 性能瓶颈,大型列表存在难以克服的性能问题。 因此,就有了 “局部渲染” 的优化方案,这就是虚拟列表的核心思想。 虚拟列表的实现,需要重点关注的问题一有以下几点: 可视区域的计算方法 可视区域的 DOM 更新方案 事件的处理方案 下面逐一分解说明。 ...[2019/8/20]

基于vue手写tree插件那点事

目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都...[2019/8/20]

解决vuex刷新状态初始化的方法实现

vuex五种基本对象 state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun() mutations:修改状态,并且是同步的。在组件中使用$store.commit(''''...[2019/8/15]

koa2+vue实现登陆及登录状态判断

这里我们先说说登陆以及登陆状态控制需要的插件jsonwebtoken,jsonwebtoken就可以实现token的生成与反向解密出用户数据。 安装步骤: npm install jsonwebtoken --save 安装之后先创建一个token.js, 为了项目目录的清晰,可以创建一个...[2019/8/15]

浅析Vue中拆分视图层代码的5点建议

一.框架的定位 框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作。 SPA 框架几乎都是基于 MVC 或 MVVM 设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目仍...[2019/8/15]

vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。 CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全...[2019/8/13]

后端小白的VUE入门笔记, 进阶篇

使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli 如果没有安装的话,使用如下命令全局安装 cnpm install -g vue-cli 创建一个基于w...[2019/8/9]

Vue全局loading及错误提示的思路与实现

前言 近期项目马上上线,前两天产品提个需求,加个全局loading,我这半路出家的vue选手,有点懵逼,这玩意还是第一次,但是作为一个初级的前端切图仔,这个东西是必须会的,花了五分钟思考了一下,然后动键盘码出来 ,今天总结一下,与各位分享交流,有错误还请各位指出。 思路 我们项...[2019/8/9]

详解Element-UI中上传的文件前端处理

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性。但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等。 下面就展示一下具体做法: 首先定义一个jso...[2019/8/8]

Vue路由前后端设计总结

一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的。其实呢不管在哪里用,把原理研究明白就对了。 一、 官网demo 这里不得不吐槽一下官网,写的不清不楚的,在哪里使用都没有说清楚,几行代码一句话就轻飘飘的交代完事了,剩下的事情还得自己研究,...[2019/8/7]

Vue代码整洁之去重方法整理

Vue代码整洁之去重方法整理

在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来。 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻。 好了, 我们现在把上篇剩下的任务给完成了,接下来我们来正式开始本篇内容吧。 去重是什么 字...[2019/8/7]

解决vue单页面修改样式无法覆盖问题

解决vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。 vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如: <...[2019/8/6]

vue路由

vue路由

SPA是什么 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序: 只有第一次会加载页面, 以后的每次请求, 仅仅...[2019/8/5]

vue回到顶部监听滚动事件详解

本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div cla ="tools"> <ul @mouseleave="mouseLeave()"> <...[2019/8/2]

vue3.0中的双向数据绑定方法及优缺点

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defin...[2019/8/2]

在Vue环境下利用worker运行interval计时器的步骤

今天在code review时,发现之前遗留的问题: 在一个视频播放页面,有一个40ms的interval一直在阻碍,导致视频延时逐渐增大 于是写了一个worker单独把计时器拉出去跑了 实现步骤如下 由于用的是vue-cli,在webpack下要安装worker-loader依赖...[2019/8/1]

深入浅析Vue中mixin和extend的区别和使用场景

深入浅析Vue中mixin和extend的区别和使用场景

Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景。 Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创...[2019/8/1]

详解vue-property-decorator使用手册

一,安装 npm i -s vue-property-decorator 二,用法 1,@Component(options:ComponentOptions = {}) @Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,fi...[2019/7/30]

vue前后分离调起微信支付

本文实例为大家分享了vue前后分离调起微信支付的具体代码,供大家参考,具体内容如下 @ VUE调起微信支付 VUE前后分离调起微信支付 支付很简单,但每次都是在网上直接扒下来使用,老年人记忆,于是就自己记录一下,方便以后快速的粘贴复制; 第一步: VUE 需要安装 微信支付模块 ...[2019/7/30]

vue使用混入定义全局变量、函数、筛选器的实例代码

vue使用混入定义全局变量、函数、筛选器的实例代码

说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。 一、main.js文件 import Vue from ''vue'' import App f...[2019/7/30]

最全的Vue组件通信方式总结

1、一图认清组件关系名词 父子关系:A与B、A与C、B与D、C与E 兄弟关系:B与C 隔代关系:A与D、A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信   2、8种通信方式及使用总结 prop...[2019/7/29]

vue实现一拉到底的滑动验证

本文实例为大家分享了vue实现简单的一拉到底的滑动验证的具体代码,供大家参考,具体内容如下 直接上代码 <template> <div cla ="drag" ref="dragDiv"> <div cla ="drag_bg"><...[2019/7/26]

vue实现拖拽的简单案例 不超出可视区域

本文实例为大家分享了vue实现拖拽x效果的具体代码,供大家参考,具体内容如下 实现拖拽之前,先了解几个小常识: 这两种获取鼠标坐标的方法,区别在于基于的对象不同: pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变; clien...[2019/7/26]

详解Vue.js和layui日期控件冲突问题解决办法

事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-mo...[2019/7/25]

Vue+Element UI 实现视频上传

一、前言   项目中需要提供一个视频介绍,使用户能够快速、方便的了解如何使用产品以及注意事项。   前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL。 二、具体实现 1、效果...[2019/7/25]

Vue商品控件与购物车联动效果的实例代码

Vue商品控件与购物车联动效果的实例代码

本篇我们将构建商品控件与购物车联动。 商品控件 商品控件的结构编写   在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写。 <template> <div cla ="goods"&g...[2019/7/22]

vue自定义表单生成器,可动态生成表单

介绍 form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | github 演示项目: 开源的高品...[2019/7/19]

Vue实现数据表格合并列rowspan效果

背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> &...[2019/7/19]

vue通过数据过滤实现表格合并

基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作。 要合并单元格需要用到rowspan属性,所有想法是针对数据...[2019/7/19]

Vue动态生成表格的行和列

当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下: <template> <div cla ="boxShadow"> <div style="margin-top:...[2019/7/19]

初试vue-cli使用HBuilderx打包app的坑

微信授权登录提示code-2 appid和appsecret应该是移动应用,而非网页应用 微信授权登录提示code:-100/自定义基座无法微信登录和分享 开发者账号配置的应用签名应该是md5加密后的值,而不是原字符串 生产环境proxyTable不生效,导致接口500 ...[2019/7/17]

详解vuex的简单todolist例子

详解vuex的简单todolist例子

一个简单的vuex应用的小例子,一段自己的学习记录。 todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除。 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> ...[2019/7/15]

使用vue for时为什么要key【推荐】

使用vue for时为什么要key【推荐】

前言: 用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的一些理解对这个问题有了新的认识。所以记录下来,若各位看官看到文章里面有错误的地方请指正一下。谢谢各位大佬。 一.diff算法 ...[2019/7/12]

vue发送websocket请求和http post请求的实例代码

先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from ''sockjs-client''; import Stomp from ''stompjs''...[2019/7/11]

Vue的生命周期

vue生命周期图示:     生命周期钩子: 1、beforeCreate 在实例化之后,数据观测和event/watcher事件配置之前被调用。 2、created 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测,属性和方法...[2019/7/10]

373
2
记录数:378 页数:1/812345678下一页尾页
加载更多