vue
关注
分享
扫一扫
碑无名
这个作者很懒，什么都没留下…
展开
-
Vue2打包问题
1、路由改为hash模式const router = new VueRouter({ routes, mode: 'hash'})2、加上 publicPath:'./'在vue.config.js添加const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, publ原创 2022-04-06 21:26:03 · 1234 阅读 · 0 评论 -
vue+vant动态生产根据后端传的数据动态生成表单
<template> <div class="addorderrecord_wrapper"> <NavBar :headerbar="title"></NavBar> <div class="addorderrecord_content"> <van-form> <div v-for="(item, index) in content" :key="index">原创 2021-11-29 18:21:02 · 2060 阅读 · 0 评论 -
axios拦截器获取并存储token
vue-resource 拦截器使用在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回原创 2021-11-21 20:00:39 · 2898 阅读 · 0 评论 -
router.js
vue的路由模板import Vue from 'vue'import Router from 'vue-router'import Home from './pages/home'import Index from './pages/index'import Product from './pages/product'import Detail from './pages/detail'import Car from './pages/car'import Order from './pa原创 2021-09-27 22:00:41 · 448 阅读 · 0 评论 -
vue辅助函数
辅助函数是帮我们减少代码量，写起来方便一点举个例子吧比如你本来是要写**name:{{this.$store.state.name}}**的如果你用…mapState([‘name’]),三个点是扩展运算符可以简写为name2:{{name}}值类型向计算属性映射mapState 将全局状态管理的state值映射到组件的计算属性mapGetters 将全局状态管理的getters值映射到组件的计算属性函数类型向methods进行映射mapMut原创 2021-08-09 21:11:59 · 490 阅读 · 0 评论 -
vuex的基本使用
引用vueximport Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)const store = new Vuex.Store({// state:{ name:"gege" }, mutations:{ changeName(state,params){ state.name=params.name } }})ex原创 2021-08-09 19:54:08 · 104 阅读 · 0 评论 -
better-scroll的滑轮解决方法
本人跟着视频学的时候碰到的就是这个问题，查了一些资料才知道的滑轮的问题加个mouseWheel:true就可以原创 2021-08-03 20:51:14 · 183 阅读 · 0 评论 -
Vue的全局前置守卫
这些其实可以参考文档下面的例子就是举了一条狗全局前置守卫其实不难理解文档可能会更加详细导航守卫// 全局前置守卫router.beforeEach((to, from, next) => { // ... console.log(from); console.log(to); let islogin=false if(to.path==='/singer'){ if(islogin){ next();原创 2021-07-30 20:01:17 · 454 阅读 · 0 评论 -
路由模式 mode ------ 哈希和历史
**通过路由表 mode设置 hash 路由地址栏有#history 路由没有#和正常使用的类似**import Vue from 'vue'import VueRouter from 'vue-router'// 引入相关文件并且使用Vue.use(VueRouter)// 引入组件import son1 from '../router/son1'import son2 from '../router/son2'// 创建一个路由对象let router=new Vue原创 2021-07-28 18:39:34 · 432 阅读 · 0 评论 -
this.$nextTick()
<template> <section> <h1 ref="hello">{{ value }}</h1> <el-button type="danger" @click="get">点击</el-button> </section></template><script> export default { data() { return {原创 2021-07-26 10:50:51 · 104 阅读 · 0 评论 -
Vue的生命周期的创建
解释都在代码里，可以看看<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2021-07-25 20:45:29 · 101 阅读 · 0 评论 -
vue的简单监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-24 19:31:50 · 107 阅读 · 0 评论 -
vue的事件总线之远方兄弟的通信啊
事件总线原理 观察者模式 事件抛发机制1.创建一个空实例 作为桥梁2.通过$on在空实例中注册事件3.在任何地方 只要能获取空实例 那就可以通过$emit方法触发事件*话不多说上代码 *<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-07-24 18:33:18 · 82 阅读 · 0 评论 -
Vue组件通信之兄弟通信
话不多说上代码研究代码 多敲<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-23 21:05:48 · 113 阅读 · 0 评论 -
vue中的父组件改变子组件的data
需求：在父组件的一个事件可以改变子组件中的 openData 的值变为 true。父级页面：<template> <div> <div @click="changeChild">按钮改变子组件数据</div> <children ref="childrenDom"></children> </div></template> <script>import Chi原创 2021-07-23 19:33:52 · 2236 阅读 · 3 评论 -
vue-局部组件嵌套
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-23 18:16:49 · 192 阅读 · 0 评论 -
vue的全局组件嵌套----好理解哦
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc转载 2021-07-23 17:58:13 · 161 阅读 · 0 评论 -
vue之好玩的计划
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-21 22:33:20 · 96 阅读 · 0 评论 -
vue的tab栏切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-21 21:44:55 · 772 阅读 · 0 评论 -
vue之属性绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-20 22:44:44 · 100 阅读 · 0 评论 -
vue之事件绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-20 22:44:00 · 374 阅读 · 0 评论 -
vue之条件渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-07-20 22:41:40 · 62 阅读 · 0 评论