Vue
关注
分享
扫一扫
Vue学习
boboj1
web前端在职两年
展开
-
nuxt2中使用dart-sass
nuxt2中使用dart-sass原创 2022-11-21 22:32:23 · 849 阅读 · 0 评论 -
Vue精美简洁登录页
Vue精美简洁登录页，开箱即用原创 2022-06-30 14:33:48 · 16806 阅读 · 2 评论 -
Vue项目中配置eslint
vue项目中配置eslint原创 2022-06-28 22:21:51 · 1690 阅读 · 0 评论 -
vue2生命周期
<div id="app"> <div class="demo">{{ msg }}</div></div><script> new Vue({ el: '#app', data: { msg: 'ok' }, methods: { show() { console.log('show') } }, // 此时只有Events和生命周.原创 2022-04-30 14:02:36 · 339 阅读 · 0 评论 -
Vue2响应式原理浅析
definePropertyObject.defineProperty() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。下面做一个简单的示例： const data = {} let name = '123' Object.defineProperty(data, 'name', { get: function() { return name }, set: function(newValue) { console.log('set')原创 2022-04-30 14:00:11 · 230 阅读 · 0 评论 -
采用Vue+Node前后端分离的校友信息管理系统（适合毕业设计）
本系统所采用的技术：前端：vue2后端：koa2数据库：mongodb整个系统分为：新闻模块、校友会模块、校友活动模块、招聘信息模块、捐赠模块、个人信息管理模块。以下为相关页面：原创 2022-04-27 23:11:51 · 1274 阅读 · 0 评论 -
Component inside ＜Transition＞ renders non-element root node that cannot be animated.
在Vue3中使用<keep-alive></keep-alive>做页面缓存后，检查每个页面是否有根标签，在Vue3中可以不写跟标签，但做缓存的时候要加上。 <router-view v-slot="{ Component }"> <transition> <keep-alive> <div> <component :is="Component" /> <原创 2021-12-13 17:45:36 · 2321 阅读 · 0 评论 -
vue项目开发总结——任务悬赏平台（前端）
项目简介：该项目实习中的第一个项目，该项目分为用户端、企业端、后台管理端。用户可以在任务大厅接受任务，每完成任务都会获得响应的报酬，用户只能接受一个任务，该任务完成后才能继续下一个任务。任务进行期间，该任务可以被企业取消，若企业取消用户正在完成的任务，则返回5%的奖励给用户。企业可以发布任务，发布任务之前需要上传企业认证凭证给后台管理端，后台管理员审核通过之后企业才可发布任务，企业可以对用户已完成的任务进行确认完成任务和打回重做。一、相关技术vue2scssaxioscookieelem.原创 2021-11-22 10:56:38 · 945 阅读 · 0 评论 -
Vue中解决https,请求http及跨域问题
在vue.config.js中配置代理服务器module.exports = { devServer: { proxy: { ["/dev-api"]: { target: 'api',//api是后端接口地址 changeOrigin: true, ws: true, pathRewrite: { "^/dev-ap": '' } } } }}设置ax原创 2021-09-18 11:24:35 · 11804 阅读 · 1 评论 -
Vue + Element +Echarts 搭建后台管理系统
效果展示 ## 涉及要点请求接口使用axios,在main.js全局配置，并使用拦截器，引入Nprogress时间加载进度条的效果// 配置axios请求路径axios.defaults.baseURL = ''axios.interceptors.request.use(config => { Nprogress.start() config.headers.Authorization原创 2021-08-27 09:02:21 · 926 阅读 · 2 评论 -
Vue中使用echarts报错，【TypeError: Cannot read property ‘init‘ of undefined】
将以下这行代码替换import echarts from 'echarts'替换代码import * as echarts from 'echarts'使用方式<script>import * as echarts from 'echarts'export default { data () { return {} }, mounted () { const myChart = echarts.init(document.getElementById原创 2021-08-26 20:15:12 · 371 阅读 · 0 评论 -
Element-UI中el-eascader显示问题
数据多的时候显示效果显示的位置和高度都出现问题只需要给menu和panel加高度就好了.el-cascader-menu { height: 300px;}.el-cascader-panel { height: 300px;}原创 2021-08-23 15:40:01 · 302 阅读 · 0 评论 -
Vue3.x基础解析【推荐学完Vue2.x的来了解一下】
目录1.认识Vue32.创建Vue3项目1.1 vue-cli创建1.2 vite创建3.初探Vue33.1 采用TS后入口文件为main.ts3.2 Vue3中html模版可以没有根元素3.3 script4.常用Composition API4.1 setup4.2 setup与ref4.3 reactive4.4 计算属性4.5 监视器4.6 生命周期4.7 自定义hook函数5.其它5.1 shallowReactive 与 shallowRef5.2 readonly 与 shallowReado原创 2021-08-13 22:19:36 · 441 阅读 · 0 评论 -
Vue3中响应式数据代理原理Proxy
Vue3中使用响应式数据Vue3使用响应式数据需要通过ref与reactive<template> {{ num }} <button @click="Method1">button</button></template><script lang="ts">import { defineComponent, reactive, ref } from "vue";export default defineComponent({原创 2021-08-13 16:20:41 · 738 阅读 · 0 评论 -
Vue移动商城项目(首页、详情页、购物车功能、项目部署方式)
项目成果项目演示地址：（腾讯云webify） supermale-5glmkgymb6d057cd-1301795258.ap-shanghai.app.tcloudbase.com项目要点1.在使用VueRouter进行页面跳转的时候，需要合理使用Vue生命周期的两个函数,activated函数与deactivated函数2.Vue中使用better-Scroll的时候，等数据全部渲染完之后要重新调用refresh函数，重新计算内容的高度。3.在使用Vuex时，将所有的操作全部放在act原创 2021-07-31 23:00:08 · 2737 阅读 · 0 评论 -
Vuex学习总结(state,mutations,getters,action,modules)
Vuex介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。调试工具项目目录state在state中定义的变量，每一个Vue组件都可访问index.js中import Vue from 'vue'import Vuex原创 2021-07-10 21:58:24 · 225 阅读 · 1 评论 -
Vue Js : This dependency was not found: * core-js/fn/promise
在store文件下,index.js中使用promise，出现以下错误解决办法：将// import { reject, resolve } from 'core-js/fn/promise'删除，vscode会自动添加这一行代码原创 2021-07-10 17:52:40 · 3669 阅读 · 5 评论 -
vue父子组件通信【案例详解】
目录父组件向子组件通信props子组件向父组件通信vm.$emit( eventName, […args] )父子组件双向绑定父组件向子组件通信父组件想要对子组件通信，通过子组件中的props来进行通信props类型：Array | Object详细：props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。你可以基于对象的语法使用以下选项：type：可以是下列原生构造函数中的一种原创 2021-07-04 15:19:33 · 384 阅读 · 4 评论 -
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>购物车</ti.原创 2021-07-03 14:45:20 · 379 阅读 · 1 评论 -
Vue中的复用问题(虚拟dom到真实dom)
<div id="app"> <span v-if="isShow"> <label for="useremail">邮箱登陆</label> <input type="text" id="useremail" placeholder="邮箱登陆"> </span> <span v-else> <label for="username">账..原创 2021-07-02 14:49:08 · 732 阅读 · 0 评论 -
vue中v-for与v-bind结合实现列表文字效果切换
<!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>Document&l.原创 2021-07-01 14:31:05 · 219 阅读 · 0 评论