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

vue项目中锚点定位替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document....[2019/11/13]

vue data引入本地图片的两种方式小结

我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return ...[2019/11/13]

前端vue-cli项目中使用img图片和background背景图的几种方法

前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. c 方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件...[2019/11/13]

vue 项目打包时样式及背景图片路径找不到的解决方式

问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到; 解决方法: 主要是需要单独为 c 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为c 单独配置 public...[2019/11/13]

vue-element-admin 菜单标签失效的解决方式

设置菜单路由时,代码如下: { path: ''/materieluse'', component: Layout, meta: { title: ''仓库管理'', icon: ''component'' }, children: [{...[2019/11/12]

vue页面切换项目实现转场动画的方法

前言 移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果 实现原理, vue的过渡 & 动画 技术栈: vue + vue-router 解决思路 区分前进 和 后退的路由 网上搜索的资料, 找到了两种 监听popstate...[2019/11/12]

Vue 中 a标签上href无法跳转的解决方式

问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常。 解决: 在App.vue 里增加判断IE浏览器手动修复…… export default { name: ''App'', mounted(){ function ...[2019/11/12]

vue 中几种传值方法(3种)

vue 中几种传值方法(3种)

前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中,主要有父子组件,非父子组件传值。 父组件向子组件传值 方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加...[2019/11/12]

Vue2.0 实现页面缓存和不缓存的方式

1、在app中设置需要缓存的div <keep-alive> 缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <ro...[2019/11/12]

解决vue admin element noCache设置无效的问题

1、后台返回的数据 { path: ''/fbgq'', name: ''fbgq'', component: () => import(''../view part/fbgq.vue''), meta: { title: ''发布供求'', ...[2019/11/12]

使用vuex存储用户信息到localStorage的实例

使用vuex存储用户信息到localStorage的实例

1、首先需要装vuex npm install vuex -d 2、新建store文件夹,新建index.js, 并引入vue、vuex,代码如下: import Vue from ''vue'' import Vuex from ''vuex'' Vue...[2019/11/12]

vue 实现通过vuex 存储值 在不同界面使用

通过vuex 存储 1. 创建store.js文件 import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state = { 要设置的全局访问的state对象 coun...[2019/11/12]

VUE:vuex 用户登录信息的数据写入与获取方式

整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返...[2019/11/12]

Vuex实现数据增加和删除功能

首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 vuex/index.js import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state ...[2019/11/12]

vuex存储token示例

1.在login.vue中通过发送http请求获取token 根据api接口获取token var url = this.HOST + " e ion"; this.$axios.post(url, { username: this.loginForm.username,...[2019/11/12]

vue在路由中验证token是否存在的简单实现

1. 在router/index.js进行验证 2. 代码如下: import Vue from ''vue'' import Router from ''vue-router'' import Login from ''@/component common/Login''; ...[2019/11/12]

vue路由守卫,限制前端页面访问权限的例子

今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) befor...[2019/11/12]

vue 更改连接后台的api示例

vue 更改连接后台的api,是更改在config文件夹下的index.js文件中的proxyTable的值。 如下代码,其中 10.1.166.88:8888 pringTimes 为后台暴露出来的appi。 dev: { env: require(''./dev.e...[2019/11/12]

vuex实现数据状态持久化

用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的。 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地 用法很简单 1、 npm install vuex...[2019/11/12]

vuex管理状态 刷新页面保持不被清空的解决方案

mutation文件 import { RECEIVE_PUBLICHTIT } from ''./mutation-types'' 保证刷新页面数据不消失* function storeLocalStore (state) { window.localStora...[2019/11/12]

聊聊Vue中provide/inject的应用详解

众所周知,在组件式开发中,最大的痛点就在于组件之间的通信。在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 prop $emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex。 在这么多的组件通信方式中,provide/inject 显得十分阿卡林...[2019/11/11]

vue路由拦截器和请求拦截器知识点总结

vue路由拦截器和请求拦截器知识点总结

路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path==''/login'' || localStorage.getItem(''token'')){ next(); }else{ ...[2019/11/8]

VUEX采坑之路之获取不到$store的解决方法

今天在写vuex的时候遇到了一个特别无语的问题,找了半个小时才找到这个问题,所以贴出来,大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store,后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没...[2019/11/8]

vue.js 子组件无法获取父组件store值的解决方式

vue.js 子组件无法获取父组件store值的解决方式

子组件: props:[''myDetail''] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XX...[2019/11/8]

vue.js的状态管理vuex中store的使用详解

一、状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、...[2019/11/8]

vue之组件内监控$store中定义变量的变化详解

1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, 2.通过watch来检查定义计算属性获取到的值的变化 ...[2019/11/8]

Vue实例的对象参数options的几个常用选项详解

一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:''#todo-app'', 挂载元素 data:{ 在.vue组件中data是一个函数,要写成data () {}这种方式 items:[''ite...[2019/11/8]

vue 组件内获取actions的response方式

最近使用在学习使用vuex,想利用vuex集中管理状态。在和后台进行数据交互的时候,必然会涉及接口的调用,此类异步操作,通常写在action里面: import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(''Vue...[2019/11/8]

vue中在vuex的actions中请求数据实例

我废话不多说了,直接上代码吧! actions.js getCertificationStatus(context, {vm:vm,type:type}){ return new Promise((resolve, reject) => { axios.p...[2019/11/8]

Github上一个有意思的项目:Vue版的开心消消乐

介绍 笔者在浏览Github时发现一个有趣的项目,因为最近在学习Vue,在Vue板块中发现了这样的一个项目,觉得比较还比较有意思,因此在本文中分享给大家,共同学习和进步!本文内容来源于Github! Github https: github.com/lcs1998/HappyEliminate效果展...[2019/11/8]

浅谈Vue中render中的h箭头函数

浅谈Vue中render中的h箭头函数

vue2.0新增了render方法,官方案例写的是: render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app...[2019/11/7]

vue基本使用--refs获取组件或元素的实例

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 ...[2019/11/7]

vue 父组件通过$refs获取子组件的值和方法详解

vue 父组件通过$refs获取子组件的值和方法详解

前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会...[2019/11/7]

Vue修改项目启动端口号方法

在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js"...[2019/11/7]

vue实现将一个数组内的相同数据进行合并

获取服务器传来的数组数据进行,找出其中价格相同的进行数量相加,合并该段数据: /** 先将传来的订单列表进行四舍五入,再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async mergeOrder(orde...[2019/11/7]

vue限制输入框只能输入8位整数和2位小数的代码

看到这个标题好像很简单,onblur、onchange事件都能做到,但是用户体验感貌似很差。查了下百度查不到资料了。看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能。 ----代码省略 ...[2019/11/6]

vuex actions异步修改状态的实例详解

actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某...[2019/11/6]

vuex实现像调用模板方法一样调用Mutations方法

我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit(''jia'')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此...[2019/11/6]

对vuex中getters计算过滤操作详解

getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现...[2019/11/6]

vue 获取及修改store.js里的公共变量实例

vue 获取及修改store.js里的公共变量实例

html <input type=''text'' :value=''num''> <button @click=''add''> + </botton> js data(){ return{ } }, me...[2019/11/6]

关于vue路由缓存清除在main.js中的设置

1.main.js /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { ...[2019/11/6]

vue 路由子组件created和mounted不起作用的解决方法

判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-vie...[2019/11/6]

vue子传父关于.sync与$emit的实现

$emit(update: prop, "newPropVulue") 这个模式,使子组件向父组件传达:更新属性,并抛出新的属性值 .sync 修饰符 是父组件中修改prop值得修饰符 一:什么地方需要用到.sync修饰符呢 当子传父,父级有两数据,而没有v-modal时 例...[2019/11/6]

vue input标签通用指令校验的实现

移动端通常对于input标签要求输入有一些校验,vue的指令可达到完美校验的作用 预期效果 <input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" /> ...[2019/11/6]

解决vue项目F5刷新mounted里的函数不执行问题

项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟v...[2019/11/6]

在Vue mounted方法中使用data变量详解

如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用th...[2019/11/6]

vuex 实现getter值赋值给vue组件里的data示例

通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值。 <template> <input type="text" placeholder="请输入收货人名字"...[2019/11/6]

解决vue.js提交数组时出现数组下标的问题

这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了,我们只需要 let axios = Axios.create({ baseURL: ''http: 127.0.0.1:8761/'', headers: {''X-Requested-With'':...[2019/11/6]

vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果 尝试过几种方法之后最终采用vuex+se ionStorage结合的方法在mutations中 setResultValue(state,flag){ se ionStorage.setItem("resultValue...[2019/11/6]

Vue 解决多级动态面包屑导航的问题

固定路由的面包屑导航 我们在配置router的时候,可以将面包屑数据配置在meta中, 例如 路由配置: { path: ''/project/proce :id'', name: ''proce '', component: () => impor...[2019/11/5]

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