![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
宝儿的程序生涯
爱编码,爱生活,爱分享,
勤思考,常记录,多总结
展开
-
vue加token
今天遇到一个问题:登录了还一直让我去登录我才知道是需要给请求头加上token王哥说token 就是你登录的时候返回给你的数据这个token 你需要登录后 存起来然后 再开一个拦截器,每次访问请求的时候 都把这个token 加到请求头里面去不开拦截器的话 你就要在代码中 手动给你要发送的请求的请求头中 加上token然后我就去查如何 Vue 如何给请求带上请求头 | 如何带上t...原创 2020-09-29 14:33:15 · 1091 阅读 · 2 评论 -
Vue 修改传递数据
想做一个什么功能呢?哝,就是个人中心页面去请求的后台然后渲染到页面的数据姓名,座位号,联系方式,现在呢需要修改这些信息然后保存以后会更新到页面上然后点小箭头跳转过去获取这个信息我采用了路由传参的形式<div class="line"><span>姓名</span> <input id="name" readonly type="text" v-model="name"> <a class="mui-action-back mui-ico原创 2020-09-08 19:03:33 · 1331 阅读 · 0 评论 -
Vue 中文本内容超出规定行数(字数)后展开收起的处理,超出部分...显示
https://www.jianshu.com/p/09154ebf5f447https://blog.csdn.net/zhuyuchen321/article/details/81941190原创 2018-12-11 13:29:44 · 11917 阅读 · 1 评论 -
记录vue项目造开发环境用的模拟数据mockjs过程详解有图
mock官网直通车原创 2020-03-16 15:47:56 · 598 阅读 · 0 评论 -
饿了么项目vue.config.js配置本地mock(json)数据(慕课网)
vue.config.jsconst appData = require('./data.json')const seller = appData.sellerconst goods = appData.goodsconst ratings = appData.ratingsmodule.exports = { css: { loaderOptions: { ...原创 2019-04-03 16:01:41 · 908 阅读 · 0 评论 -
点击轮播图实现不一样的跳转操作,其中有一张图片跳转到这个apk下载,另一张图片跳转到本地路由
需求:轮播图从接口v-for循环获取数据,其中有一张图片跳转到这个apk下载,另一张图片跳转到本地路由<cube-slide-item v-for="(item, index) in items" :key="index"> <!-- :href="item.src" --> <!-- 跳转资源包 -->...原创 2020-02-14 19:44:26 · 497 阅读 · 0 评论 -
页面路由传值query:vue实现参数跳转到下一个页面,input绑定登录页面传过来的数据
https://blog.csdn.net/anshengsuiyeu/article/details/81872572当前页面&lt;input type="text" class="phone" placeholder="座位号" v-model="loginForm.seat"&gt; methods:{ this.$原创 2019-03-07 20:33:54 · 3398 阅读 · 0 评论 -
vue4 axios代理 跨域
vue cli webpack相关vue cli 的 devServer.proxy配置原创 2019-12-04 15:08:12 · 2636 阅读 · 0 评论 -
类似淘宝商品的规格选择源码
原文:http://chijianfeng.com/web/Vue/163.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2019-04-03 16:04:20 · 1168 阅读 · 0 评论 -
登录验证码倒计时优化 页面刷新实时倒计时
源:https://www.cnblogs.com/HDou/p/5553424.html现在很多页面是需要获取验证码的,但是相信很多页面是没有做这样的优化的,比如下面这个场景:现在访问一个注册页面,页面有一个填写手机号,获取验证码的按钮,点击获取验证码按钮之后,按钮变成灰色,然后是60倒计时效果。在60S内我无法再次点击获取验证码按钮。因为按钮是灰色的,不可点击状态。但是,如果在倒计时进行...原创 2019-04-03 15:58:40 · 1044 阅读 · 0 评论 -
登录注册vue
本实例只有简单的两个模块:登录和注册,主要演示如何用axios请求接口以及后期逻辑书写。各个功能如下所示:登录模块用户不存在,密码错误,登陆成功注销登录注册模块项目功能梳理在创建项目之前,我们先理一下整个项目的功能模块。登录模块1.用户输入用户名及密码,调用接口 1.1用户名未找到,提示用户“用户名不存在” 1.2用户名找到,但密码不匹配,提示用户“密码输入错误” 1...原创 2019-04-03 15:52:58 · 5127 阅读 · 0 评论 -
数据内容带有html标签的如何解析html渲染页面(vue)
<li> {{item.content}} </li>效果<li v-html="item.content"> {{item.content}} </li> 或者 <li v-html="item.content"><li>效果用v-html解析html标签不能使用{{it...原创 2019-03-27 18:07:07 · 8940 阅读 · 0 评论 -
图片懒加载 vue-lazyload
图片懒加载vue-lazyload安装npm install vue-lazyloadimport VueLazyLoad from ‘vue-lazyload’Vue.use(VueLazyLoad,{//设置loading图片loading:"/static/loading-svg/loading.svg"} )插件放在图片进行显示找img图片加载以前会使用我们的lo...原创 2019-04-16 22:22:04 · 142 阅读 · 0 评论 -
scoped属性,data-v-19fca230
首先大家思考几个问题为什么有些css属性的style里面要加scoped?为什么查看一些源码,HTML和css上面会带上data-v-19fca230?他们究竟有什么含义?想知道为什么,继续往下看scoped我们假设把这种添加scoped的组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,...转载 2019-04-05 15:06:59 · 868 阅读 · 0 评论 -
vue上传文件的坑
在这个地方浪费了我两天时间,必须总结一下经验<input multiple type="file" ref="file" id="uploadFile" @change="aaa($event)">aaa(e) { console.log('e.target.files') console.log(e.target.files) },这是第一种...原创 2019-04-03 17:13:12 · 8017 阅读 · 2 评论 -
vscode自动保存eslint | vue配置eslint规则
配置 https://www.jianshu.com/p/23a5d6194a4b// {// "files.autoSaveDelay": 2000,// "eslint.autoFixOnSave": true// },// {// "language": "html",// "autoFix": true// },...原创 2019-04-03 20:03:55 · 2541 阅读 · 0 评论 -
加入购物车(mongoose坑)
用户表:users表字段useridusernamepasswordorderList 订单列表(加入购物车下完单生成的订单)0orderIdorderTotalorderStatus_idcreateDatecardList 购物车列表addresslist 地址0addressIdusernamestreetNameposCodetelisDefault...原创 2019-04-16 16:15:00 · 4371 阅读 · 0 评论 -
选中的样式
判断当前字段等不等于all,点击把当前的索引赋值给他字段控制当前选中那一项,默认全部点击某一项以后设置true原创 2019-04-16 23:48:15 · 337 阅读 · 0 评论 -
vue上传文件组件
来源: http://www.jq22.com/jquery-info15578演示: http://www.jq22.com/yanshi15578github: https://github.com/317482454/vue_upload/blob/master/src/components/Hello.vue来看我修改:代码:父组件:如何把上传的图片传给后台https://...原创 2019-04-23 19:33:10 · 6181 阅读 · 0 评论 -
发送短信验证码登陆-前端
Vue进阶篇(一)之实现发送短信验证码登陆https://blog.csdn.net/qq_41134769/article/details/85321965用户名 风起时yft手机 18234182076两个接口:1个点击获取验证码,发个请求给后端,把参数:手机号发给后端去请求这个接口然后把手机号和验证码再发给后端,后台去验证成功的话就登录监听状态码,发送请求成功会有返...原创 2019-08-08 13:19:35 · 1334 阅读 · 0 评论 -
一个音乐播放器Vue实现(音乐唱片,点击下面播放,中间的图片可以转起来。)
https://www.jb51.net/article/134491.htm效果:file:///C:/Users/Administrator/Desktop/index.html原创 2018-12-18 17:01:48 · 3009 阅读 · 0 评论 -
Vue实例里this的使用
Vue实例里this的使用这是vue文档里的原话:All lifecycle hooks are called with their ‘this’ context pointing to the Vue instance invoking it.意思是:在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它...转载 2019-03-26 18:36:43 · 2752 阅读 · 0 评论 -
vue的toast、dialog(cube-ui)弹窗组件总结
参考:手摸手教你写一个vue的toast弹窗组件 https://blog.csdn.net/william_jzy/article/details/85111961index.jsimport vue from 'vue'// 静态组件import toastComponent from './toast.vue'// 返回一个扩展实力构造器const ToastConstr...原创 2019-03-26 16:07:24 · 4440 阅读 · 1 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "s...原创 2019-03-29 15:22:07 · 5722 阅读 · 0 评论 -
Vue实现上拉加载(mui框架)无限加载新数据
效果图:上拉需求:初始化6个数据,重新定义一个数组,控制每次上拉一次只加载4条数据源码:Vue和mui库自行下载https://www.bootcdn.cn/mui/https://www.bootcdn.cn/vue/直接可以运行的完整demo&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt;原创 2019-01-09 14:13:44 · 3349 阅读 · 7 评论 -
Vue.js 一个超长列表无限滚动加载的解决方案
vuejs 列表渲染出商品,点击添加按钮,怎么让当前列表的数量增加?https://segmentfault.com/q/1010000009235184力荐35个最好用的Vue开源库! https://github.com/opendigg/awesome-github-vueVue.js 一个超长列表无限滚动加载的解决方案https://juejin.im/entry/5819993f...转载 2019-01-08 09:40:27 · 9530 阅读 · 0 评论 -
Vue.js 开发实践:实现精巧的无限加载与分页功能
https://segmentfault.com/a/1190000005351971#articleHeader9需求分析当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如:数据量过大,影响加载速度用户体验差,很难定位到之前自己看过的某篇文章扩展性差,如果200条变为2000条或者更多所以常见的解决思路就是至底时加载数据或者分页展示。无限加载的实...转载 2018-12-28 15:59:21 · 294 阅读 · 0 评论 -
Vue里面的v-for绑定数据改成Javascript的for循环
源:<div id="item-news-head" class="mui-control-content mui-active"> <ul class="mui-table-view " id="newsHead" v-for="head in heads"> <li class="mui-table-view-cel原创 2018-12-27 15:15:24 · 422 阅读 · 0 评论 -
audio示例-基于Vue的一个小项目(上传音乐链接)
1 标签定义声音,比如音乐或其他音频流。2 设置为自动播放的 audio 元素:autoplay=“autoplay”但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多,对有些属性支持也会好很多)3 audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢对象属性:currentTime 获取当前播放时间durat...原创 2018-12-05 15:44:29 · 2005 阅读 · 0 评论 -
Vue.js实现无限加载与分页功能开发[better-scroll]
https://www.jb51.net/article/96373.htmhttps://www.imooc.com/article/18232需求分析当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如:》数据量过大,影响加载速度》用户体验差,很难定位到之前自己看过的某篇文章》扩展性差,如果200条变为2000条或者更多所以常见的解决思路就是...转载 2018-12-13 16:14:12 · 1761 阅读 · 0 评论 -
vue基础
课程大纲:vue配合node平台使用。vue项目目录结构介绍。vueRouter复习:如何使用vue-cli创建项目全局只安装一次脚手架:npm install -g @vue/cli注意:如果以前安装过旧版本的vue脚手架,需要先把旧版本的卸载干净,再重新使用上面的命令安装新版本。安装过程中,由于网络等原因造成安装失败,请使用npm uninstall -g @vue/cli卸载...原创 2018-10-18 21:45:15 · 269 阅读 · 0 评论 -
手风琴效果(vue实现)
效果图:源码1:&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;am原创 2018-10-03 22:34:46 · 9314 阅读 · 0 评论 -
创建一个vue项目搭建vue-cli环境(Vue2.9.6)
1:打开cmd命令行,首先安装node步骤:https://nodejs.org/en/download/ node官网,选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,输入node -v,如果出现版本信息即表示安装成功。2:npm包管理器是集成在node中的,所以直接输入npm -v就能查看到版本信息3:输入npm install -g cnpm --registry=...原创 2019-02-16 18:58:59 · 1155 阅读 · 0 评论 -
mui文件 放在vue的assets里面还是static里面?
在这里发现需要导入mui文件但是放在assets里面还是static里面?本来想在vue_cli上使用mui,简单粗暴,直接在index.html里面引入一下实际这样不可用在vue-cli项目中使用mui swiperhttps://blog.csdn.net/u012815877/article/details/81187826在main.js里添加import mui from...原创 2019-02-17 16:38:38 · 286 阅读 · 0 评论 -
vue获取当前窗口的高度赋值给class或者id
<template> <main class="scroll-content" id="act-scroll"> <div id="aa" class="swipe-wrapper"> <cube-scroll ref="contentScroll"> <cube-swipe @item-click=...原创 2019-03-25 10:10:22 · 3784 阅读 · 0 评论 -
input框接收一个传过来的值,编辑以后获取
https://www.sunzhongwei.com/how-to-get-input-value-in-vuejs使用ref&lt;input id="number" type="number" v-model="seat" ref="input"&gt;this.result = this.$refs.input.val原创 2019-03-13 11:39:12 · 2504 阅读 · 0 评论 -
css如何实现时间线
这里参考 https://www.layui.com/demo/timeline.html重点在于:最后一条竖线怎么删除?竖线用伪类来实现本来我想着伪类选最后一个元素然后让他不要竖线 ,发现不起作用,于是我就换了思路,直接让他宽度是0 就解决了.layui-timeline-item:last-child::before { content: ''; position:...原创 2019-03-20 16:09:34 · 8192 阅读 · 2 评论 -
学习使用vue实现规格选择实例(一)
本文对两个类似的项目进行分析池剑锋源地址:http://chijianfeng.com/web/Vue/163.html图写规格的逻辑,定义一个数组把选中的值存储起来。定义一个对象存储要匹配的数据。把选中的值与存储的数据进行遍历查找与之匹配的值的库存,若库存为0按钮为灰色不能选择。selectArr: [], //存放被选中的值shopItemInfo: {}, //存放要和选...转载 2019-03-12 10:31:32 · 2551 阅读 · 1 评论 -
cookie,session,localstorage,sessionStorage区别
在登录页面填写了手机号和座位号,这里我要把把座位号和电话号码传到后台思路:百度一下先方法有很多我决定用localStoragecookie,session,localstorage,sessionStorage区别和介绍 // 把表单数据传给main页面localStorage.setItem('userInfo', JSON.stringify(this.loginForm)) ...原创 2019-03-15 15:40:36 · 709 阅读 · 0 评论 -
vue实现手机验证码登录(基于娱乐系统项目)
登录逻辑:1 验证手机号码输入框,分别判断以下情况并作出弹窗警告(1:是否为空(2:是否为11位数字(3:是否是13,15, 17, 18开头的正确手机号码2 输入框下面添加一个获取验证码的按钮,默认为关闭不可点击,点击后,开启一个定时器setInterval,然后发送一个ajax请求给后台,把手机号传给后台,让后台去发送短信在验证上面3种情况之后,得到为正确手机号码后再将验证码按...原创 2019-03-06 18:20:21 · 10681 阅读 · 0 评论