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

vue实现登录拦截

本文实例为大家分享了vue实现登录拦截的具体代码,供大家参考,具体内容如下 需求:用户只有登录了,用户名存储在本地储存时,才能进入首页,如果本地存储没有用户名,就不能进入首页 1、登录页面的实现 <template> <div cla ="htmleaf-...[2020/6/28]

Vue如何提升首屏加载速度实例解析

在Vue项目中,引入到工程中的所有js、c 文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor...[2020/6/25]

vue.js实现照片放大功能

vue.js实现照片放大功能

本文实例为大家分享了vue.js实现照片放大的具体代码,供大家参考,具体内容如下 这里就不放图了,放大的是别人的身份证 <template> <div cla ="image-cell__wrapper" :style="border"> <s...[2020/6/23]

详细分析vue响应式原理

前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点,也是面试加分项。 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解...[2020/6/22]

Vue循环遍历选项赋值到对应控件的实现方法

老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助 https: blog.csdn.net/yyp0304Devin 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型...[2020/6/22]

云开发-web应用中使用数据库

如何在 web 应用中使用数据库 随着云时代的到来,云开发有着独特的优势相对于传统开发,从数据库而言,cloudbase 提供的云数据库真的很方便,本文就以一个简单的 todolist 小例子来讲解一下如何在 web 应用中使用云开发数据库 构建简单的界面 下面的这个 todolist...[2020/6/19]

vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性。在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。 插槽 省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这...[2020/6/19]

vue proxy 的优势与使用场景实现

1.前言 随着 vue3.x 的消息越来越多, proxy 的讨论也。相对于 Object.defineProperty , proxy 有什么区别,有什么优势,以及可以应用在什么地方。该文章就简单的介绍下 2.Object.defineProperty 讲 proxy 之前,先回顾下...[2020/6/15]

vue实例的选项总结

一、数据 API:https: cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE 1. data 类型:Object | Function 限制:组件的定义只接受 function 详细:Vue 实例的数据对象...[2020/6/9]

详解vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平。 一、watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ doSomething } } 实际上,Vue对watch提供...[2020/6/9]

vue项目或网页上实现文字转换成语音播放功能

一、在网页上实现文字转换成语音 方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。 1、 使用百度的接口: http: tts.baidu.com/text2audio?la...[2020/6/9]

从零开始在vue-cli4配置自适应vw布局的实现

简介 viewportWidth也是vw布局从配置上来说比rem布局简洁了很多,bu需要配置安装lib,也不需要增加一个rem.js文件 简称拎包使用 安装包 npm install postc -px-to-viewport -D 或者 yarn ad...[2020/6/8]

Vue自定义render统一项目组弹框功能

一、本文收获 pick 二、为什么要统一封装弹框; 要封装成怎样 通过举例常规弹框的写法。我们可以体会到,通常要弹出一个页面,需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue (弹框主体);需要 parent.vue 设置flag控制弹...[2020/6/8]

Vuex的各个模块封装的实现

一、各个模块的作用: state 用来数据共享数据存储 mutation 用来注册改变数据状态(同步) getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据(异步) 二、 创建文件: actions.js gett...[2020/6/5]

Vue路由的模块自动化与统一加载实现

Vue路由的模块自动化与统一加载实现

首先呢,我们来看看一般项目路由是怎么划分的。 为什么这么划分呢?如果大项目业务非常多,单纯的单页面很难维护,我们只有这样规范化,才能高效率。 模块自动化与统一加载的好处: 规范化命名(模块名.业务名.vue) 不用每次写页面都要去总路由引入组件 接下来...[2020/6/5]

Vue CLI4 Vue.config.js标准配置(最全注释)

Vue CLI4 Vue.config.js标准配置(最全注释)

前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。 安装 npm i -d vu...[2020/6/5]

VueX模块的具体使用(小白教程)

为什么会出现VueX的模块呢?当你的项目中代码变多的时候,很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。 那么我们就开始吧! 一、模块是啥? /* eslint-disable no-unused-vars */ import Vue from ''vue'' ...[2020/6/5]

Vue 如何使用props、emit实现自定义双向绑定的实现

下面我将使用Vue自带的属性实现简单的双向绑定。 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一个触发方法,在父组件上的子组件监听这个事件)。 import Vue from '...[2020/6/5]

Vue是怎么渲染template内的标签内容的

Vue是怎么渲染template内的标签内容的

我们在使用Vue做项目时,都会用到脚手架,相应的我们会在template写标签内容。那么你知道为什么会在template写标签吗?这当中经过了怎样的处理呢? <template> <div id="app"> <div id="nav"> ...[2020/6/5]

vue渲染方式render和template的区别

render函数详解 Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中 createElement这个函数中有3个参数 第一个参数(必要参数):主...[2020/6/5]

Vue项目接入Paypal实现示例详解

一、支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验。 二、实现方案 接入方式 优点 ...[2020/6/4]

vue样式穿透 ::v-deep的具体使用

之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富。即时这样,在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="sc " scoped> .... < tyle> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会...[2020/6/4]

实现一个Vue自定义指令懒加载的方法示例

在项目中如果有大量的图片需要加载的时候,就可以考虑使用懒加载了,懒加载其实就是监听浏览器的滚动,当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听。实现的方法也比较简单,可以通过懒加载的插件实现,也可以手写,手写通过vue自定义指令来实现,一般情况自定义指令用的也不多,比较vue自...[2020/6/4]

vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model="something"> ...[2020/6/1]

vue实现购物车加减

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难。因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性。 那么什么是计算属性呢? 计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动...[2020/5/30]

Vue实现购物车实例代码两则

Vue实现购物车实例代码两则

一、第一种比较简单 效果图 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...[2020/5/30]

vue实现简单学生信息管理

本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...[2020/5/29]

vue.js实现简单购物车功能

本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出。 购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能。 js主要有以下方法 加函数,减函数...[2020/5/29]

vue实现购物车案例

本文实例为大家分享了vue实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...[2020/5/29]

如何在vue中使用jointjs过程解析

在vue中引入joint.js的问题,之前在网上搜了很多,都没有给出一个确切的答案,捣鼓了两天终于弄明白了,做个记录。 首先,我参考了一篇来自stackoverflow的文章 看完这篇文章,大家应该至少大致怎么做了,下面我们来具体看一下: 首先在vue项目中运行npm instal...[2020/5/29]

VueJS实现用户管理系统

本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下 源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &l...[2020/5/29]

vue实现在线学生录入系统

最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。 因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了。 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ...[2020/5/29]

vue实现学生信息管理系统

vue实现学生信息管理系统

本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...[2020/5/29]

vue实现户籍管理系统

本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路: 1.html+c 创建 2.引入vue,实例 3.准备默认数据me age数组 4.渲染默认数据,v-for循环表单...[2020/5/29]

vue实现信息管理系统

最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增、删、改、查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta chars...[2020/5/29]

vue实现图片上传功能

vue实现图片上传功能

本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <template>...[2020/5/26]

Vue实现跑马灯效果

Vue实现跑马灯效果

本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。 2、在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个...[2020/5/26]

Vue实现简单的跑马灯

Vue实现滚动字条/跑马灯,供大家参考,具体内容如下 内容不多,直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...[2020/5/26]

Js和VUE实现跑马灯效果

本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一、js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符...[2020/5/26]

vue实现简单跑马灯效果

vue实现简单跑马灯效果

本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 如下图片,会自行向 上“滚动” 代码: <!DOCTYPE html> <html lang="en"> <head> <meta...[2020/5/26]

如何使用vue slot创建一个模态框的实例代码

【1】遮罩层:承载内容,管理样式布局。 【2】内容层:控制遮罩层的显示与否。 遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意。因此可以在遮罩层里采用插槽。 ...[2020/5/25]

基于canvas实现手写签名(vue)

最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时,我们开始触发can...[2020/5/21]

vue+canvas实现移动端手写签名

本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码,供大家参考,具体内容如下 <template> <div cla ="sign"> <div cla ="header"> <i cla ="el-ico...[2020/5/21]

精读《Vue3.0 Function API》

1. 引言 Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧! 首先官方回答了几个最受关注的问题: Vue 3.0 是否有 break change,就像 Python 3 / Angular ...[2020/5/20]

vue实现输入框自动跳转功能

本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下 <template> <div cla ="inputCla "> <div v-for="(item,index) in list" :key="index"&g...[2020/5/20]

Vue 打包体积优化方案小结

Vue 打包体积优化方案小结

Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 n...[2020/5/20]

vue模块移动组件的实现示例

vue模块移动组件的实现示例

一直都想实现类似于五百丁中简历填写中模块跟随鼠标移动的组件,最近闲来无事,自己琢磨实现了一个差不多的组件。 其中每个模块都是组件调入(项目经验、教育经验、工作经验等),所以这里也用到了动态加载组件方式。 思路:鼠标移入模块,显示相应模块的点击移动按钮,点击A模块移动按钮,此时原先A模...[2020/5/20]

vue和小程序项目中使用iconfont的方法

vue和小程序项目中使用iconfont的方法

一、vue中使用iconfont 1、百度搜索iconfont或者阿里巴巴矢量图标库官网,注册登录; 2、找到图标管理->新建项目,或者使用已有的项目,用于保存自己的图标; 3、搜索自己需要的icon; 4、添加到购物车中; 5、购物车中就有了相应ico...[2020/5/20]

Vue项目移动端滚动穿透问题的实现

Vue项目移动端滚动穿透问题的实现

概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用。 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可。示例如下: <div @tou...[2020/5/20]

vue相关配置文件详解及多环境配置详细步骤

vue相关配置文件详解及多环境配置详细步骤

1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。 文件结构如下: { "n...[2020/5/19]

373
2
记录数:662 页数:1/1412345678910下一页尾页
加载更多
 友情链接: NPS