前端 终端 实战vue
vue 一些问题便签
1. vue3页面传参 方式一 <div><router-link :to="/">首页</router-link></div> <div><router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link></div> <di ......
Vue3 依赖注入 provide() inject()
依赖注入就是父组件向后代组件传递数据，可以向子组件传递数据，也可以向孙子组件传递数据。 在父组件中使用provide()函数，向后代传递数据。 在后代组件中使用inject()函数，获取传递过来的数据。 provide() 提供一个值，可以被后代组件注入。 inject() 注入一个由祖先组件或 ......
【校招VIP】校招考点之前端安全和注入
考点介绍： 随着前端的快速发展，各种技术不断更新，前端的安全问题也越来越值得我们重视。千万不要等到项目上线之后才去重视安全问题，到时候被黑客攻击一切都太晚了。今天的专题将讲述前端几大常见安全问题，在校招面试中也是高频考点。 一、考点题目 1、XSS攻击是什么？ 解答：得分点，XSS是跨站脚本攻击、向 ......
vue~el-autocomplete实现组件化
# el-autocomplete核心参数 可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。 ## fetch-suggestions 回调列表，异步的方式获取数据列表，显示在列表框中 ## @select 当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将 ......
Vue3 watch() 监听
watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数 <template> <span> <p>{{num}}</p> <p>{{num2}}</p> <button @click="num++">+1</button> <button @click="addNum">+ ......
vue3 setup访问子组件的 DOM 元素
使用setup的情况下这个时候我们无法使用this，注意在setup中setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去，子组件代码如下： ``` 哈哈哈哈 ``` 父组件： ``` import { ref, onMounted } ......
Vue3 computed() 计算属性
<template> <span> <p>普通属性:{{num}}</p> <p>计算属性-只读:{{numAdd}}</p> <p>计算属性-可读写:{{numAdd2}}</p> <button @click="numUpdate">修改普通属性</button> <button @click= ......
java与es8实战之四：SpringBoot应用中操作es8(无安全检查)
### 欢迎访问我的GitHub > 这里分类和汇总了欣宸的全部原创(含配套源码)：[https://github.com/zq2599/blog_demos](https://github.com/zq2599/blog_demos) ### 本篇概览 - 本篇是《java与es8实战》系列的第四 ......
vue--day75--vuex多组件共享数据
1.Person.vue <template> <div> <h1>人员列表</h1> <h1 style="color: red;">Count 组件的求和为{{ sum }}</h1> <input type="text" placeholder="请输入名字" v-model="name">< ......
前端实现文件下载功能——文件流
前端下载文件一般使用的是blob 核心的步骤是获取后端响应的文件流，用blob创建一个临时的URL，然后创建一个隐藏的<a>标签，实现下载需求。 那就先上代码 function download(item) { axios.get(getServerUrl() + "/teacher/output/ ......
Java后端向前端返回文件流——实现下载功能
前端实现文件下载功能有多种方法，这里就不一一介绍，这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码，作为后端就可以返回一个OutPutStream 后端可以使用Java中servlet提供的HttpServletResponse，核心步骤是要设置响应的数据类型， ......
vue--day74--四个map方法的使用mapState ,mapGetters,mapMutations,mapActions
1. Count.vue <template> <div> <h1>当前求和位{{ sum}}</h1> <h1>当前求和放大10倍后是{{ bigSum }}</h1> <h1>我在{{school }},学习{{ subject }}</h1> <select v-model.number="n ......
[回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)
经过一段时间的准备，【ASP.NET Core MVC开发实战之商城系统】已经完成，目前代码已开发完成，先将全部内容整理分享，如有不足之处，还请指正。 ......
vue3 + vite 动态引入不被打包的静态资源
在开发中，通常会把一些静态资源放在assets文件夹下，但是assets目录下的内容是需要vite编译打包的，所以如果只是引用assets目录下的资源时，使用绝对路径、相对路径均可。 但是，在开发中，我们经常会引用一些不被打包的资源，此时该资源是放在 public 目录下的，那么在引用时，路径的写法 ......
vue3 路由-导航守卫
假设用户登录，在地址栏输入了Login，人性化的设计应该自动回到home页面。或者用户输入不存在路由，也应该回到home页面。 这个时候需要用到vue-router的导航守卫功能。 在我们封装的router.js文件下添加router.beforeEach…… const router = crea ......
vue前端几个常用的方法
1，字符串数组去重的方法 一、使用set结构去重 set是ES6中的一种数据结构，可以去除重复元素，其特征为无序且不重复，经常用于数组去重的场景。 let arr = [1, 2, 2, 3, 3, 4, 5]; let set = new Set(arr); arr = Array.from(se ......
Vue【原创】可拖动列表 darg-list
可拖动排序的列表 drag-list，这个比较简单易懂，拿例子直接运行看效果就好了。 组件代码： 1 <template> 2 <ul class="list" ref="parentNode" @dragstart="onDragStart" @dragover="onDragOver" @dra ......
Vue3 Composition Api 与 Vue2 Options Api
Options Api Options API，即选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑 如下图： Composition Api 在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一 ......
vue 监听窗口变化
mounted() { window.onresize = () => { return (() => { this.$nextTick(() => { if(document.documentElement.clientWidth <= 1000){ this.mode = "vertical" ......
搭建前端项目框架流程思路
从零开始一个项目，第一步就是搭建项目框架，接下来会总结一下搭建框架的基本思路 第一步确认好项目所使用的框架技术 vue2、vue3或者react,打开对应框架技术的官网，根据教程跑一个最基本的项目，当然在创建项目过程时依需勾选相应需求 第二步，完成第一步项目的基本雏形就有了，在真正开发过程中都是使用 ......
Vue【原创】基于【日历组件】的【节假日管理】功能整合
基于日历组件（lilo-canlendar）的节假日管理功能整合。 效果图： 完整代码： 1 <template> 2 <div class="root-calendar"> 3 <div class="control-wrapper"> 4 <div class="year-wrapper"> 5 ......
百度：为vue站添加百度统计
一，登录百度统计获取统计代码: 使用设置->网站列表->新增网站: 填写数据后点确定: 配置单页: 复制代码: 二，添加代码到vue的html页面 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ......
Vue【原创】日历组件
最近项目中封装了一个日历组件，用于节假日管理，支持输入默认选中的日期，选择管理日期。 效果图： calendar组件： 1 <template> 2 <div class="calendar"> 3 <slot name="title"> 4 <div class="calendar-title"> ......
【校招VIP】前端算法考察之排序
考点介绍： 不同的场景中，不同的排序算法执行效率不同。 稳定：冒泡、插入、归并 不稳定：选择、快速、堆排序、希尔排序 一、考点题目 1、使用js实现数组的快速排序 解答：快速排序使用了冒泡+分治的思路。 每轮从数组中取出一个数作为基准；在排序过程中，小于或等于基准数的全部放到基准的左边，大于基准的全 ......
vue element 多个Form 表单同时验证
多个Form内容统一提交验证 1 <el-form ref="form1"></el-form> 2 <el-form ref="form2"></el-form> 3 <el-form ref="form3"></el-form> 4 <el-form ref="form4"></el-form> ......
Vue3 使用Vuex与Vuex-persistedstate
## Vuex与vuex-persistedstate ### Vuex是什么？ Vuex是一个用于Vue.js应用程序的状态管理模式。它使得在应用程序中的所有组件之间共享和访问状态变得非常简单。Vuex将应用程序的状态存储在一个单一的存储库中，并且提供了一组用于更改状态的API。这使得状态管理变得 ......
在.NET Framework中使用RocketMQ（阿里云版）实战【第一章】
在开发某一个需求的时候，领导要求使用RocketMQ(阿里云版) 作为消息队列。生产者主要有WebAPI/MVC/JOB(控制台应用程序)，然后消费者采用的是Windows服务。那[西瓜程序猿]来记录一下如何使用RocketMQ(阿里云版)，给各位小伙伴作为参考防止踩坑。 ......
vue3同一页面内重复引用同一操作dom的组件产生的问题
##### [2023年8月28日12:39:40] ## vue3同一页面内标签``重复引用同一组件，且该组件内使用css选择器进行dom操作导致页面内相同组件发生变化的问题解决记录 组件内进行dom操作，需要通过js方法进行选择器的元素获取，但当vue3全部渲染完毕后，页面内有多个id为test ......