在讲解之前,我们先了解一下数据响应式是什么?所谓数据响应式就是建立响应式数据与依赖(调用了响应式数据的操作)之间的关系,当响应式数据发生变化时,可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作,可以是DOM更新,也可以是执行一些回调函数。从Vue2到Vue3都使用了响应式,那么它们之间有什么区别?Vue2响应式:基于Object.defineProperty()实现的。Vue3响应式:基
Vue前端交互 Promise 1.promise的实例方法 1).then() 得到异步任务正确的结果 2).catch() 获取异常信息 3).finally()成功与否都会执行(不是正式标准) 1.promise return 一个普通值会默认创建一个新的promise对象然后调用 2.promise 中的fina
转载 2024-03-16 22:42:12
279阅读
一,vue3的新变化1,性能上1,打包大小减少41%,2,内存占用减少54%3,初次渲染快55%,更新渲染快133%2,新增了setup函数setup执行的时机是在beforeCreate生命函数之前执行,只执行一次,因此在这个函数中是不能通过this来获取实例的 setup是一个函数,接受两个参数(props和context)props就是组件的propscontextcontext:上下文对象
编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误? 注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。 这种异常,对于程序没有任何影响的。 为什么会出现这种现象: 由于vue-router版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因
转载 2024-09-12 13:49:10
45阅读
探索Vue-Resume:构建专业简历的新方式 vue-resumeResume template based on Vue项目地址:https://gitcode.com/gh_mirrors/vu/vue-resume 是一个基于前端框架Vue.js的开源项目,旨在帮助开发者和求职者快速创建、定制个性化且专业的在线简历。这个项目的独特之处在于它将现代Web技术和高效的内容展示融合在一起,使得简
转载 2024-09-19 15:31:41
44阅读
vue.js中,data属性是一个函数,因为组件可以被复用,data定义为对象时,修改某个组件,会影响另一个组件,所以data要被定义为一个函数。ES6的风格规范:data()后面需要添加空格export default{ data() { } }vue社区有个比较火的插件:vue-resource,用来处理前后端请求数据交互的。它支持XMLHttpRequest和JSONP的
1.在vue中循环获取对象中的属性名和属性值<ul> <li v-for="(value,key,index) in obj" :key="index"></li> </ul> <!--其中value是属性值,key是对应的属性名-->2.在前一页面通过this.$router.push({name:"nextPage"})跳转的时候
因为vue是前端控制跳转地址的,当跳转到一个服务器实际不存在的地址后,再在浏览器刷新当前地址,web服务器就会返回404,因此就需要在服务器端对地址进行重写。今天前端的同事做了个新项目,需要在服务端进行一些配置,避免404问题,他们并没有服务器配置经验,自然就交给我了。当然,我也不能随便乱配,所幸vue官方还是很贴心的给出了各个web服务器应该如何进行重写配置的例子,具体参考地址:https://
文章目录快捷方法列表配置信息命令响应源码html中的源码json文件中的源码结果分析 版本:vue-resource v1.2.1 作用:  Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。用法:  Vue实例对象注册this.$http服务,可以发送HTTP请求。解析请求所返回的结果。此外,Vue实例将
转载 2024-01-02 11:18:00
116阅读
【个人总结】Vue源码解读 文章目录【个人总结】Vue源码解读前言目录解说Vue的实例Mixin的解说Vue生命周期钩子Vue响应式原理数据劫持收集依赖与派发更新虚拟DOM 前言作为一名前端开发攻城狮来讲,我觉得学习源码是必要的。当时所在的公司主要是使用Vue来做开发的,在那里面呆了两年多,主要是摸鱼过去的,Vue我自认为使用的算是熟练了,但是面试的时候被问到源码有关的问题,我还是回答不出来。以上
转载 2024-10-21 09:15:07
21阅读
简介 SpringBoot和 Vue,前后端分离,我们开源一套漂亮的代码和一套整洁的代码规范,让大家在这浮躁的代码世界里感受到一股把代码写好的清流!同时又让开发者节省大量的时间,减少加班,快乐工作,热爱生活。 SmartAdmin 让你从认识到忘不了,绝对是你最想要的! 技术体系前端:Vue + Vue-Router + Vuex + ViewUI + vue-enum后
# 使用 Vue 和 Axios 获取 API 响应的完整教程 在现代 web 开发中,使用 Vue.js 和 Axios 来处理 API 请求已经成为一种常见的做法。本文将通过具体的步骤和代码示例,教你如何在 Vue 中使用 Axios 获取响应。 ## 流程概述 以下是使用 Vue 和 Axios 获取 API 响应的基本流程: | 步骤 | 描述
原创 8月前
87阅读
vue是每一个前端开发人员都绕不过的一个技术,在国内的市场占有量也是非常的大,我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看首先,生命周期是个啥? 借用官网的一句话就是:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等
你肯定听说过Object.denfineProperty或是Proxy\reflect,这的确是在VUE响应式原理中起重要作用的一部分代码,但这远远不能代表整个流程的精妙。上图:                           不懂没关系,请往下看~一、i
转载 2024-08-13 17:51:34
269阅读
 一、准备修改源: npm config set registry https://registry.npm.taobao.org 创建脚手架: vue init webpack Vue项目名称 #Install vue-router? Yes 插件:    npm install axios axios,发送Ajax请求 vuex,保存所有组
转载 2024-04-23 13:09:14
173阅读
vue+rest-framework前后端分离整合(二) 一、基于api前端显示课程详细信息1、调整Course.vue模块 <template> <div> <h1>课程列表</h1> <div v-for="row in courseList"> <
转载 2024-03-15 05:32:18
96阅读
1、动态组件代码示例: component 直接绑定全局组件的组件名:<body> <div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { act
转载 2024-08-21 23:17:48
83阅读
1.resolve参数作用 解析:Promise对象代表一个异步操作,有三种状态:Pending[进行中]、Resolved[已完成,又称Fulfilled]和Rejected[已失败]。通过回调里的resolve(data)将这个promise标记为resolverd,然后进行下一步then((data)=>{//dosomething}),resolve中的参数就是要传入then的数据。
1. 页面设置自动刷新 <meta http-equiv="refresh"content="10;url=想要跳转的页面"> 注:10 表示间隔10秒刷新一次 2. 利用JavaScript加载刷新 1)<script type=''text/javascript''>window.location.reload(true);</script> 注
转载 2024-09-12 18:50:01
68阅读
在使用 Vue.js 开发 SPA 应用时,我遇到了一个问题:Axios 请求返回的响应值发生了变化,这导致了一些业务功能无法正常执行。为了彻底解决这个“vue axios response值变了”的问题,我记录下这个过程,以便于后续查阅和避免类似问题的发生。 ## 问题背景 在我们的电商平台中,用户通过前端与后端的接口交互来获取商品信息与处理订单。在测试环境中,一直以来包括 Axios 的
原创 5月前
22阅读
  • 1
  • 2
  • 3
  • 4
  • 5