草庐IT

nodejs_vue

全部标签

vue3里的watch与 watchEffect

watchEffect特点:回调函数立即调用回调函数依赖的数据都会被监控深度监控watch与watchEffect相同点都可以对数据进行侦听不同点watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控watch和watchEffect都能监听响应式数据的变化,不同的是它们监听数据变化的方式不同。watch会明确监听某一个响应数据,而watchEffect则是隐式的监听回调函数中响应数据。watch在响应数据初始化时是不会执行回调函数的,watchEffect在响应数据初始化时就会立即执行回调函数。 {{sum}}sum++import{ref,reactive,co

基于ssm+vue在线考试系统

摘要  在线考试系统是一种利用现代技术手段实现的教育评估工具,它为学生提供了更灵活、便捷的考试方式,同时为教育机构提供了高效管理和评估学生学业水平的手段。在这个背景下,基于SSM(Spring+SpringMVC+MyBatis)框架和Vue.js技术的在线考试系统成为了一种备受关注的解决方案。本文将对这一系统的架构、功能、特点以及优势进行详细的摘要描述。首先,该在线考试系统采用SSM框架,即Spring作为后端框架,SpringMVC用于处理前端请求,MyBatis作为持久层框架。这一选择使得系统具备了良好的模块化和可维护性。Spring提供了强大的IoC(控制反转)和AOP(面向切面编程)

【SQL server】NodeJs 服务器连接数据库

文章目录前言基本思路部署服务端先决条件配置用于Node.js开发的开发环境使用Node.js连接到SQL的概念证明创建连接执行连接数据查询完整代码示例效果图配置HTTP服务基本思路安装Express创建应用配置路由监听请求完整代码示例效果图配置跨域请求数据库数据效果图参考资料前言有客户需求可以查看生产数据,而CS端的Web程序运行存在部分问题,Web客户端只是显示生产数据,其他功能没有用到,因此为了可以快速开发以及更加方便的操作,减低客户成本,为此采用node直连数据库的方式来获取生产数据。基本思路Vue3来快速设计生产看板,实时数据的获取利用Node服务器来直接与数据库打交道,选用官网推荐的

Vue项目实战——实现GitHub搜索案例(学以致用,两小时带你巩固和强化Vue知识点)

Vue2.x项目实战(二)内容参考链接Vue2.x全家桶Vue2.x全家桶参考链接Vue2.x项目(一)Vue2.x实现一个任务清单Vue2.x项目(二)Vue2.x实现GitHub搜索案例Vue3.x项目(三)Vue3.x实现一个任务清单文章目录Vue2.x项目实战(二)Vue2.x实现github搜索案例1、前言2、项目演示(一睹为快)3、涉及知识点4、项目详情(附源码及解析)5、写在最后的话Vue2.x实现github搜索案例1、前言如果你对vue的基础知识还很陌生,推荐先去学习一下vue基础本篇文章依旧是使用的Vue基础知识,同时新增了axios请求数据的需求,及兄弟组件间如何使用自定

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格(数据增、删、改、除、分页)

目录一、查询公告信息表中的数据,并绑定到表格中1.后端接口(http://127.0.0.1:8000/notices) 2.utils/api.ts中增加如下函数,用于调用后端接口查询所有公告信息3.views文件夹中新建一个NoticesManagement.vue文件二、实现分页1.后端接口(http://127.0.0.1:8000/notices/1/2) 2. utils/api.ts中增加函数,用于调用后端接口根据页码查询公告信息3. 修改NoticesManagement.vue文件三、删除1.后端接口(http://127.0.0.1:8000/delete_notice/1

没有虚拟DOM版本的vue(Vue Vapor)

前言随着Svelte和SolidJS的流行,无虚拟DOM模式逐渐开始火了起来。vue也推出了无虚拟DOM模式的版本,就是我们今天要讲的VueVapor。什么是VueVaporVueVapor是一个无虚拟DOM模式版本的vue。这个仓库是2023年11月9日基于vuejs/core仓库(也就是vue3仓库)新建的,项目地址为https://github.com/vuejs/core-vapor。VueVapor目前还处于实验阶段,不过你可以通过官方提供的VueVapor演练场在线体验无虚拟DOM版本的vue。playground演练场的地址为:https://vapor-repl.netlify

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

.markdown-body{line-height:1.75;font-weight:400;font-size:16px;overflow-x:hidden;color:rgba(37,41,51,1)}.markdown-bodyh1,.markdown-bodyh2,.markdown-bodyh3,.markdown-bodyh4,.markdown-bodyh5,.markdown-bodyh6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-bodyh1{font-si

Vue 3高级响应式数据探秘:原理、用法详解与实战示例!

 在Vue3中,数据的变化通过响应式系统来实现,该系统基于ES6的Proxy对象。Proxy对象允许拦截并自定义操作,因此Vue可以通过代理对象来实现对数据的监听和触发相应的操作。以下是Vue3中监测数据改变的原理、使用方法和步骤的详细描述,以及一个实例代码:原理:Vue3的响应式系统基于Proxy对象,通过代理对象对数据进行拦截,从而监听数据的变化。当数据被访问或修改时,Proxy会触发相应的操作,比如更新视图。使用方法:reactive 函数: 使用 reactive 函数创建一个响应式对象。ref 函数: 使用 ref 函数创建一个包含 value 属性的响应式对象,适用于基本数据类型。

Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南

 在Vue中使用JSON文件有多种方式,包括使用fetch方法加载JSON文件、使用axios库加载JSON文件,以及将JSON文件导入为模块。以下是详细描述和相应的示例代码:1.使用fetch方法加载JSON文件:步骤:创建一个JSON文件,例如 data.json://data.json{"name":"John","age":25,"city":"ExampleCity"}在Vue组件中使用 fetch 方法加载JSON文件:{{userData.name}}{{userData.age}}yearsoldCity:{{userData.city}}exportdefault{data(

解决 vue 项目开发越久 node_modules包越大的问题

解决vue项目开发越久node_modules包越大的问题node_modules.cache文件(编译缓存文件可以删除)compression-webpack-plugin禁止缓存constCompressionPlugin=require("compression-webpack-plugin");module.exports={plugins:[newCompressionPlugin({cache:false,//取消缓存algorithm:"gzip",filename:"[path].gz[query]",test:/\.(js|css|woff|woff2|json|txt|ht