前端 终端 实战vue
Vue引入腾讯地图
在public目录下的index.html文件中加入以下代码 //引入腾讯地图服务 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script> //引入腾讯地图的 ......
MAUI Blazor 实战：开发界面跟随系统主题切换的App
1、安装Masa Blazor 参考：MASA Blazor https://blazor.masastack.com/getting-started/installation 2、编写代码 新建 Service 目录，并添加 ThemeService.cs 该 RequestedTheme 属 ......
vue3+vite+ts搭建一个基于cesium的gis系统
使用 NPM: bash $ npm create vite@latest 使用 Yarn: bash $ yarn create vite 使用 PNPM: bash $ pnpm create vite附加的命令行选项# npm 6.x npm create vite@latest my-vue ......
MAUI Blazor实战 - Android监听返回键
MAUI Blazor实战 - Android监听返回键 @(文章目录) 前言 我们在MAUI Blazor项目中有时需要监听Android返回键，例如防止多次点击后退出应用、防止退回到特定页面、以及特定页面禁用退回功能等。 一、常规方法无效？ Activity中有两个可以重写的方法 1、直接监听返 ......
Vue生命周期详解
Vue生命周期 new Vue() new 了一个 Vue 的实例对象，此时就会进入组件的创建过程。 Init Events & Lifecycle 初始化组件的事件和生命周期函数 beforeCreate 组件创建之后遇到的第一个生命周期函数，这个阶段 data 和 methods 以及 dom ......
客服系统源码聊天界面，vue elementui中v-html渲染的内容，增加大图预览功能
我在开发聊天界面的过程中，聊天内容部分是使用v-html渲染出来的，能够展示html内容 但是加载的图片是不能点击放大查看的，现在增加点击放大预览功能 首先html部分是下面这样的，也就是下面要增加一个隐藏的el-image <div v-html="row.content" @click="htm ......
vue全家桶进阶之路38：Vue3父件传值给子件
在Vue3中，可以通过props将父组件的数据传递给子组件。具体步骤如下： 在父组件中定义要传递给子组件的数据，可以是data属性中的数据或者是计算属性computed中的数据。 在子组件中通过props属性声明接收父组件传递的数据。 在子组件中使用接收到的数据。 下面是一个示例： <templat ......
前端（六）
前端（六） 事件 // 用的地方非常多，需要掌握，但是不需要全部掌握。事件就是达到某个触发条件，自动触发的动作 常用事件： 1. onclick 当用户点击某个对象时调用的事件句柄。 2. onfocus 元素获得焦点。 3. onblur 元素失去焦点。 4. onchange 域的内容被改变。 ......
vue3学习之BootstrapVueNext
创建一个 Vue 应用 vue3快速上手 npm get registry #设置淘宝镜像 npm config set registry http://registry.npm.taobao.org #创建一个 Vue 应用 npm init vue@latest ✔ Project name: ......
vue全家桶进阶之路37：Vue3 状态管理
Vue3 的状态管理主要是通过 Vuex 4 来实现。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 在Vue3的状态管理中，以下是各个属性的作用： state：存储应用程序中的状态数据。它 ......
【Vue】Vue路由总结
由vue-router模块控制，需要额外安装依赖。参考官网 npm install vue-router --save 组成 router-link 路由跳转，类似a标签，路由跳转作用 <router-link to="" /> router-view 路由视图，用于其他组件在该视图位置显示。 <r ......
vue2源码-八、依赖收集的过程
依赖收集的过程 前言 使用真实节点替换原始节点，主要涉及以下步骤： 1.新老节点的更新方案。 2.虚拟节点与真实节点映射。 3.实现新老节点的替换。 依赖收集 已经完成了Vue的两大核心部分：响应式数据和数据渲染，即完成了整个Vue的初始化流程： 当new Vue()时，执行_init初始化，通过m ......
vue全家桶进阶之路36：Vue3 组件内部路由守卫
在 Vue Router 中，可以为路由和路由组件注册全局的路由守卫，也可以在组件内部注册路由守卫。 组件内部的路由守卫有以下几种： beforeRouteEnter：在路由进入组件前被调用，但是在组件实例化之前被调用，因此在该守卫中无法访问组件实例的 this。 beforeRouteUpdate ......
Vue3 setup中两个注意点
视频 6.setup的两个注意点 setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但 ......
ie11 兼容 vue3思路mark
众所周知，vue3因为用了Proxy来实现响应式，而Proxy是es6的特性，这个特性是无法shim的。 如果用本身的js写一个es6的js的虚拟机呢？有点像c语言的自举了哈，只要写出一个汇编的c语言编译器，后面就可以脱离汇编，用c本身来实现更多的功能。 当然速度肯定没办法保证了，跑肯定是可以跑的。 ......
Vue3 reactive对比ref
视频 5.reactive对比ref 从定义数据角度对比： ref用来定义：基本类型数据。 reactive用来定义：对象（或数组）类型数据。 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比： ref通过Object.defineP ......
Vue项目打包后放到SpringBoot项目里注意点
 ![](https://img2023.cnblogs.com/blog/3161121/202304/3161... ......
Vue3 vue3响应式原理_Proxy&Reflect
Proxy视频 Reflect视频 Vue3.0的响应式 实现原理: 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。 通过Reflect（反射）: 对源对象的属性进行操作。 MDN文档中描述的Proxy与Reflect： Proxy：https: ......
vue3 + TS：找不到模块“@/views/xxx.vue”或其相应的类型声明，ts语法报错
今天在项目开发中遇到一个 vue3 + Ts 的一个问题，项目运行没问题，但是就是代码就是报ts语法错误，如下： 原因：因为我们使用的是 ts 的语法，项目只识别 ts 后缀的文件，无法识别 .vue 文件，所以引入的时候会报错； tips：这里只是 ts 语法警告报错，实际并不影响我们项目的运行！ ......
打印pdf 前端请求数据并打印pdf文件
1、参考 vue接收后端传来的pdf文件流，前端调用预览PDF 2、原理 3、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pdf</title> </head> <div> <input style ......
vue
vue vue使用 端口号 静态是在static里面 index。html不能改变 id = app是绑定的 一对一绑定 webpack学习 静态模块打包器 到处暴露export，暴露了HelloWorld 有暴露就有，导入import 安装webpack 使用webpack 建立一个项目 暴露一个 ......
比较几种热门Hybrid App前端框架
作为一种既能够在原生应用程序环境中运行，也能够在 Web 浏览器中运行的应用程序，Hybrid App 主要使用 Web 技术进行开发，如 HTML、CSS 和JavaScript，并使用一个中间层将其封装在原生应用程序中。随着技术的持续推进，Hybrid App 相关的前端框架也应运而生。今天就来 ......
Vue 登录login post请求 security UserDetailsService 获取参数为""
背景 原请求将数据放到params中，导致数据拼接在请求地址后面，具有高级安全隐患。 请求方法: axios.request({ url: '/login', method: 'post', params: { username: '****', password: '****' } }) 出现的问 ......
Vue3+Ts 组合API调用子组件方法
1、子组建定义方法，并对外暴露 <script setup lang="ts"> import {computed, reactive, ref,defineExpose} from "vue"; /** * 定义方法 */ const initData = () => { console.info ......
Vue3移动端适配解决方案
导读： 使用vw和vh解决适配问题 vw：view width屏幕宽度，1vw等于屏幕宽度的百分之一 vh：view height屏幕高度，1vh等于屏幕高度的百分之一 使用插件postcss-px-to-viewport可以自动将px转换为vw/vh 安装 npm i postcss-px-to- ......
【Vue2.x源码系列06】计算属性computed原理
本章目标：计算属性是如何实现的？计算属性缓存原理以及洋葱模型的应用？在初始化Vue实例时，我们会给每个计算属性都创建一个对应watcher，我们称之为计算属性watcher ......
客服系统vue源码聊天界面，ajax上传图片功能实现
在线客服系统的聊天界面上，有上传图片按钮功能，使用js实现ajax上传图片功能 html部分，有一个点击事件 <div class="iconExtendBtn" @click="uploadImg"> <div class="elIcon el-icon-picture"></div> <div> ......
vue2使用最新版nanoid，运行报错
项目需要nanoid生成主键。 vue版本：2.6.14 npm i nanoid后，npm run serve报错： Error [ERR_REQUIRE_ESM]: require() of ES Module C:\projects\frontend\vue-test\node_modules ......
vue2 xlsx结合file-saver实现JSON导出excel 支持导出多sheet
先安装插件 npm install xlsx -s npm install file-saver -s 在本地封装导出方法，支持// 文件名：Export2MultipleSheetExcel//支持导出多个或者单个sheet import { saveAs } from "file-saver"; ......
vue+springboot 传list
@PostMapping(value = "/aa") public Result<?> aa(@RequestBody List<Map<String, Object>> list) { return Result.ok(); } let dataSource = [];postAction(th ......