vue | 易学教程

【Vue】匹配404错误

阅读更多关于【Vue】匹配404错误

在路由规则中， * 代表的是任意字符。所以只要在路由的最后添加一个 * 路由，那么以后没有匹配到的 url 都会被导入到这个视图中。示例代码如下： let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"}; let NotFound = {template: "<h1>您找的页面已经到火星啦！</h1>"} var routes = [ {path: "/user/:userid",component: UserProfile}, {path: "*",component: NotFound}, ] 来源： CSDN 作者：交大彭于晏链接： https://blog.csdn.net/weixin_42191575/article/details/104626029

vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

阅读更多关于 vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告（注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）方案一：安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S 方案二：针对于路由跳转相同的地址添加catch捕获一下异常： this.$router.push('/location').catch(err => { console.log(err) }) 方案三：在main.js下注册一个全局函数即可（注：此处理方案只针对于vue-router 3.0以上版本哈！！！） import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 注：官方vue-router ≥3.0新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃

vue-day05----自定义指令（directive）、render和template的区别、mixin混入、Vue.use()、Vue.extend()、Vue.filter()、vue中的数据流向

阅读更多关于 vue-day05----自定义指令（directive）、render和template的区别、mixin混入、Vue.use()、Vue.extend()、Vue.filter()、vue中的数据流向

### 自定义指令 directive 全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称参数二：指令的配置项，可以是函数，也可以是对象函数：参数一：使用当前指令的元素参数二：指令的详细信息 { modifiers:修饰符（只要自定义指令后面跟了修饰符，modifiers对象中就有值，为true）, value:指令的值（假设指令这样写：<div v-test="'aaa'"></div>，那么value就是aaa） } 指令的作用：操作DOM元素步骤： ①src下新建utils/utils.js： import Vue from "vue"; /** * v-test指令： * <div v-test="'发发发'"></div> * 相当于 * <div>发发发</div> * */ Vue.directive("test",(el,{value})=>{ el.innerText=value; }); /** * 设置背景颜色的指令 * */ Vue.directive("backgroundColor",(el,{value,...rest})=>{ el.style.backgroundColor=value; }); /** * 阻止浏览器默认事件：v-event

.NET处理VUE Option请求问题

阅读更多关于 .NET处理VUE Option请求问题

最近做了一个前后端分离的项目，后台用的.NET MVC写的接口，前台用的VUE。出现了一个问题，就是在后台获取Header Token的时候，怎么也获取不到，后来发现VUE前端在请求的时候，先发送了一个OPTIONS请求，也就是大家说的预请求，这个请求是获取不到Header里边的内容，如果OPTIONS请求不能正常处理，那么后边真正的POST的请求也不会再进行，所以只有这个OPTIONS请求通过之后，才能处理真正的POST请求，但是Option请求和POST请求，都是访问的同一个接口地址，怎么区分处理呢？目前我是在OnActionExecuting方法里做的处理。 protected override void OnActionExecuting(ActionExecutingContext filterContext) { //对OPTIONS请求做处理 if (Request.HttpMethod == "OPTIONS") { JsonResult jsResult = new JsonResult(); filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "token"); filterContext.Result = jsResult; } else { /

vuex几个获取使用的方法

阅读更多关于 vuex几个获取使用的方法

vuex几个获取使用的方法最简版组件里通过 $store.state 获取全局状态数据进行渲染通过 $store.commit 方法触发mutation 修改全局状态值整个页面都会变模块化模块化之后state的取值需要添加一级模块名其他的三个核心不变可以在模块里添加命名空间作用就是在 mutation getters actions的名字前面添加模块名用处就是防止名字冲突稍微复杂版组件里通过 $store.state 获取全局状态数据进行渲染通过 $store.dispath方法触发action里的方法 action 触发mutation进行修改全局状态值值类型向计算属性映射 mapState 将全局状态管理的state值映射到使用组价的计算属性 mapGetters 将全局状态管理的getters值映射到使用组价的计算属性函数类型向methods进行映射 mapMutations 将mutation的值映射到方法里 mapActions 将actions里的值映射到方法来源： CSDN 作者： wenkai_lou 链接： https://blog.csdn.net/wenkai_lou/article/details/104625502

vue axios上传多个附件并单独显示进度条

阅读更多关于 vue axios上传多个附件并单独显示进度条

就是把input type=file的opacity置为0，然后在底下放有样式的元素，然后通过axios的 onUploadProgress 的参数total和loaded显示进度，当然要在后端返回成功之后再把进度置为100%。然后监听一下文件数组，当所有进度都为1的时候就表示完成了。 <template> <div id="upload"> <div class="bg-whi"> <div class="extendex-top" ref="top"> <div class="top-box"> <div class="g-title">上传附件</div> </div> </div> <div class="pub-con" ref="bg"> <div class="input-zone"> <span class="upload-des">选择文件（不超过30m）</span> <input class="input" type="file" name="file" value placeholder="请选择文件" ref="file" v-show="canSub" @change="changeFile()" accept="application/pdf;image/*;application/mp4" /> </div> </div> <div class=

【Vue】组件系列问题记录

阅读更多关于【Vue】组件系列问题记录

欢迎评论补充（问题 & 解决方法），持续更新中... 目录 1、自定义组件 components 怎么引入 1、自定义组件 components 怎么引入示例：在 App.vue 中引入组件来源： CSDN 作者： Joker-ls 链接： https://blog.csdn.net/weixin_42678675/article/details/104608185

day73 vue框架

阅读更多关于 day73 vue框架

1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立 <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; } .box p { text-align: center; } </style></head><body> <div id="app"> <div class="wrap"> <tag></tag> <tag></tag> <tag></tag> <tag></tag> </div> </div></body><script src="js/vue.js"></script><script> let titleTag = { template: ` <p> <b> 这是一种纯二哈 </b> </p

vue day73

阅读更多关于 vue day73

目录一、基表二、断关联表关系（一）为什么要断开关联表关系（二）断开表关系后的优缺点（1）优点（2）缺点三、外键字段属性补充（一）related_name （二）on_delete （三）db_constraint 四、子序列化（序列化补充）一、基表基表是一种抽象类，专门用来被继承，提供公有字段的，执行迁移命令时自身不会完成数据库迁移通过在类中定义Meta配置类，再Meta中定义abstract=True来表示这是一个基类 from django.contrib.auth.models import User class BaseModel(models.Model): is_delete = models.BooleanField(default=False) created_time = models.DateTimeField(auto_now_add=True) class Meta: # 基表，为抽象表，是专门用来被继承，提供公有字段的，自身不会完成数据库迁移 abstract = True 二、断关联表关系（一）为什么要断开关联表关系在实际开发中，有时候一个项目中的数据表会有很多，有各种外键关联，此时表关系就会很复杂。在进行数据的增删改时会非常繁琐，且后期数据库的重构基本不能实现。因此这时我们就需要断开表关系了。（二）断开表关系后的优缺点

nginx 配置vue代理2种方式

阅读更多关于 nginx 配置vue代理2种方式

**方法一** 访问方式：http://域名 server { listen 8088; #端口号，自定义 server_name 域名; root 路径; index index.html; # Load configuration files for the default server block. location / { try_files $uri $uri/ @router; index index.html index.htm index.php; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET'; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } location @router { rewrite ^.*$ /index.html last; } location /api/ { #vue前端所有接口都加上/api/前缀

订阅 vue