Vue进阶
文章平均质量分 59
ʚΐɞ 屎壳郎୧⍤⃝ 推粪球
我自山中来
展开
-
减少 ajax 请求优化项目的方法
在XXX项目中/* 需求一: 跳转到修改页面,页面中显示当前商品的信息 方案: 方案一:ajax 再次请求当前商品的数据(极力不推荐,反复操作dom,消耗性能) 方案二:通过路由跳转进行传参; 方案三:使用sessionStorage 缓存 方案四:使用 vuex*/src/Goods/list.vue方案二、路由跳转传参// 存在问题:页面刷新,数据初始化了,不会保存this.$router.push({ name: 'go原创 2021-07-11 12:43:10 · 174 阅读 · 0 评论 -
Vue项目中-富文本编辑器的简单使用
1、安装依赖cnpm i wangeditor --save2、组件中的基本使用1)准备 dom<div id="editor"></div>2)在组件中导入import Editor from "wangeditor"2)在 mounted() 中使用// 这里在 data() 中声明了一个 editordata () { return { editor: null, serverIp: 'http://localhost:3000', goo原创 2021-07-11 12:05:05 · 184 阅读 · 0 评论 -
Node+express+ajax 文件上传
本文依赖的项目-Vue-搭建一个电商全栈项目:简单的电商全栈项目搭建1、安装依赖cnpm i multer --save2、创建 routes/upload.js 路由文件,示例代码如下:var express = require('express')var router = express.Router()var multer = require('multer');var fs = require('fs');var path = require('path'); //使.原创 2021-07-11 11:35:37 · 97 阅读 · 0 评论 -
Vue-搭建一个电商全栈项目
简单的电商全栈项目搭建一、技术栈1、前端前台:Vue + Vue-Router + Vuex + axios + Vant后台:Vue + Vue-Router + Vuex + axios + ElementUI2、后端:Node + Express + mongoose + cors + jwt二、项目搭建1、创建后台管理系统第一步:创建项目并安装依赖:vue create admin cd admincnpm i axios --savecnpm i element-原创 2021-07-11 10:33:39 · 290 阅读 · 0 评论 -
Vuex-状态管理模式-核心概念4-modules
Vuex-核心概念4—modules模块抽出,利于维护Vuex-状态管理的目录结构,转战Vuex 状态管理模式-项目结构Vuex-核心概念1,转战state+gettersVuex-核心概念2,转战mutationsVuex-核心概念3,转战actions1、将模块从 store 实例对象中抽出来// 抽取出来的模块 const moduleA = { state: { name: 'Tom' }, mutations: {}, getters: {}, action原创 2021-07-10 23:45:42 · 117 阅读 · 0 评论 -
Vuex-状态管理模式-核心概念3-actions
Vuex-核心概念3—actionsmutations 中是同步代码,要操作异步代码则要在 actions 中如果在 mutations 中有进行异步操作,那么页面会刷新,但数据不会在 state 对象中改变Vuex-状态管理的目录结构,转战Vuex 状态管理模式-项目结构Vuex-核心概念1,转战state+gettersVuex-核心概念2,转战mutations1、错误代码示例state: { info: { name: 'Tom', age: 100, hei原创 2021-07-10 23:10:31 · 120 阅读 · 0 评论 -
Vuex-状态管理模式-核心概念2-mutations
Vuex-核心概念2—mutationsVuex-状态管理的目录结构,转战Vuex 状态管理模式-项目结构Vuex-核心概念1,转战state+getters1、mutations 传参const store = new Vuex.store({ state: { count: 100, stuArr: [ {name: 'Tom', age: 16}, {name: 'Jack', age: 20} ] }, mutations: { addCountOne原创 2021-07-10 22:32:41 · 117 阅读 · 0 评论 -
Vuex-状态管理模式-核心概念1-state+getters
Vuex-核心概念1—state+gettersstate: 单一状态树(单一数据源)getters: 计算属性mutations: 唯一改变 state 的地方actions: 处理异步操作modules: 模块Vuex-状态管理的目录结构,转战Vuex 状态管理模式-项目结构1、state 单一状态树vue 规定只创建一个 store 实例const srore = new Vuex.Store({ ... })如果创建多个 store ,维护困难2、gette原创 2021-07-10 20:45:30 · 125 阅读 · 0 评论 -
Vuex 怎么实现数据持续化
Vuex 怎么实现数据持续化当进行 vuex 进行数据存储的时,浏览器刷新页面导致数据丢失,为了不让数据丢失,保持数据持久化,进行如下操作即可:安装 vuex-persistedstate 插件cnpm i vuex-persisitedstate --save在 store/index.js 中引入import persistedstate from 'vuex-persistedstate'export default new Vuex.Store({ modules: {原创 2021-06-30 20:17:17 · 167 阅读 · 0 评论 -
vue-指令的修饰符
vue-指令修饰符一、v-on 的修饰符1、事件修饰符.stop:阻止事件冒泡<button @click.stop="doThis"></button>调用 event.stopPropagation().prevent: 阻止默认行为<!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为,没有表达式 --><fo原创 2021-06-24 14:06:24 · 395 阅读 · 0 评论 -
Vue 项目中封装 axios 请求
封装axios请求首先,是在 vue-cli 脚手架上创建的项目基础上,在 src/http/index.js 中进行封装。有关 vue-cli 创建项目的详细步骤,转战Vue-CLI创建项目1、 在 src / http / index.js 中封装 axios 请求// 导入axiosconst axios = require('axios')// 创建实例对象const instance = axios.create({ baseURL: 'http://localhost原创 2021-07-10 17:28:43 · 118 阅读 · 0 评论 -
Vue响应式数据原理,Proxy 与 Object.defineProperty 优劣对比
Vue响应式数据原理,Proxy 与 Object.defineProperty 优劣对比vue响应式数据原理这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。这也就是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。Proxy 与 Object.defineProperty 优劣对比proxy 的优势:1.Proxy可以直接监听对象而非属性 。2.Pro原创 2021-06-26 21:34:57 · 389 阅读 · 2 评论 -
Vue-CLI创建项目
vue-CLI 工程化创建项目详细流程如下# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令# 如果当前你的终端工作路径带有中文或者空格,你可以使用`cd 路径`形式进行路径切换,切换到符合要求的路径中vue create 项目名称(创建时会自己以对应的项目名称生成目录)## 例vue create vue-test# 上述命令中,可以允许变的就是`myproject`部分以下步骤以`Vue CLI v4.5.613为例,仅供参考,在实际使用时,请以自身需求为准进行配原创 2021-06-23 12:40:14 · 110 阅读 · 0 评论 -
vue-钩子函数
vue-钩子函数钩子函数:允许我们定义vue,在特定的时期执行其他事情vue中的钩子函数包括:生命周期钩子函数路由的钩子函数自定义指令的钩子函数生命周期的钩子函数生命周期阶段3个:加载期、更新期、销毁期4个:初创期、挂载期、更新期、销毁期生命周期钩子函数beforeCreate在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用created在实例创建完成后被立即调用beforeMount在挂原创 2021-06-23 17:22:04 · 1827 阅读 · 0 评论 -
this.$router与this.$route有什么区别
this.router与this.router与this.router与this.route有什么区别$router 是用于编程式导航的,即导航改变路由的时候用。$route 是用户获取路由信息的,当前路由的跳转对象,包含当前路由的name、path、query、params等属性。...原创 2021-06-25 14:28:36 · 66 阅读 · 0 评论 -
vue封装echarts组件,同一个页面多次调用后者被覆盖问题
vue封装echarts组件,同一个页面多次调用后者被覆盖问题在同一个页面多次调用封装的 echarts 组件,会出现后者的调用把前者的调用覆盖的情况,只要将获取 dom 元素的方式换成 ref 方式即可为 ECharts 准备一个具备大小(宽高)的 DOM<div id="chart" style="width: 600px;height:400px;"></div>修改为:<div ref="chart" style="width: 600px;height原创 2021-07-09 18:05:34 · 1098 阅读 · 2 评论