教程npm vue
vue学习七
<div id="app7"> <div style="height: 80px;width: 80px;background-color: aquamarine;" @click="father"> <div style="height: 40px;width: 40px;background-c ......
vue框架spa首屏优化
一、减小入口文件体积 常用的手段是路由懒加载,把不同路由对应的组件切割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加。在vue-router 配置路由的时候,采用动态加载路由的形式,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件。 ......
vue扫码功能
直接写到组件里面,使用组件传值返回数据 <template> <div class="scan"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <footer> <button ......
vue3 hooks使用watch监听注意事项
当我们再vue3 写了一个通用hooks的里面使用watch来执行某些操作要注意!!! 一个页面只能再根路由去创建实例,也就是调用 对呀hooks,如果子路由也需要使用 则由根路由 provide() 子路由inject,如果子路由都创建实例,会造成多次执行监听例如 我们由一个useSearch,来 ......
通过node.js部署vue项目
一、下载 Node.js官网下载大家根据自己的系统进行下载安装包(我的电脑是windows10-64位,所以下载第一个) 二、安装 点击下载的安装包进行安装点击Next 打勾并点击Next默认安装路径是C:\Program Files\nodejs\,我这里选择在D:\Program Files\n ......
[Vue]Object.defineProperty()和Vue数据代理
Object.defineProperty (person, 'age', { value: 18, enumerable: true, // 属性是否可枚举,默认为false writable: true, // 属性是否可被修改,默认为false configurable: true, // 属 ......
git Bash 执行 node npm run prod 执行报错?
在本地执行 ` npm run prod prod npm run production 'npm' is not recognized as an internal or external command, operable program or batch file. ` 大概意思是npm没有配 ......
【前端开发】跨标签页广播通信教程,可方便新窗口修改原窗口实时更新
日常业务开发中我们常常会碰到如下的场景,即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。 BroadcastChannel API 为我们提供了一种快捷且高效的途径 创建useTagMessage.ts文件 // 跨标签页通信方案 ‘Msg’即通道名称,可以是任 ......
Vue.js框架:vue3版本里数据变化监听watch和watchEffect的使用
一、监听方法 vue3中定义的变量默认不是响应式的,所以只能监听用ref和reactive定义的数据和变量。 监听前要确保引入相关依赖ref、reactive、watch: <script setup lang="ts"> import { ref,watch,reactive } from 'vu ......
vue3实现一个通用的右键菜单组件
1、新建一个名为ContextMenu.vue的文件 <template> <div ref="containerRef"> <slot></slot> <Teleport to="body"> <Transition @beforeEnter="handleBeforeEnter" @enter= ......
从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改?
接上一节:从零用VitePress搭建博客教程(3) - VitePress页脚、标题logo、最后更新时间等相关细节配置 六、首页样式修改 有时候觉得自带的样式不好看,想自定义,首先我们在docs/.vitePress新建一个theme文件夹,用来存放自定义布局和主题修改的相关文件,如下所示 th ......
手撕Vue-数据驱动界面改变下
经过上一篇的介绍,数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。 首先完成我们的 v-html,v-text, 其实很简单,就是将我们之前的 v-model 创建观察者的方法,在 v-html 和 v-text 中再写一次即可,创建属于 v-html 和 v-t ......
vue 基础学习 一
1. vue 使用快速入门三步走 (1) 新建 HTML 页面,引入 Vue.js文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 入门示例</title> <script src="https://cdn.j ......
vue学习七之生命周期
1.vue的四个生命阶段 2.vue的八个钩子 (1) beforeCreate:创建阶段前,script数据尚未加载 (2) created:创建阶段已完成 (3) beforeMount:挂载阶段前,开始通过数据进行页面渲染 (4) mounted:挂载阶段完毕 (5) beforeUpdate ......
基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程
导语:在日常开发中,有时候会在项目中引入 ts 来解决一些 js 的问题,下面就简单介绍一下如何使用 vue3+ts+router+pinia 来搭建一个项目。 目录 简介 创建 安装 配置 实战 简介 vue3 目前是常用的 vue 版本,提供了组合式 API 以及一些新的功能和特性;ts 这种类 ......
Vue源码学习(十二):列队处理(防抖优化,多次调用,只处理一次)
好家伙, 本篇讲的是数据更新请求列队处理 1.一些性能问题 数据更新的核心方法是watcher.updata方法 实际上也就是vm._updata()方法, vm._updata()方法中的patch()方法用于将新的虚拟DOM树与旧的虚拟DOM树进行比较, 并将差异更新到实际的DOM树上. 这一步 ......
(四)新北洋L525手腕带打印机调试刷机教程
一、安装前准备(刷机)1.参考文件《L525刷机说明》2.注意事项:使用最新刷机工具,文件引用之前的。二、安装最新驱动安装下载好的驱动,如遇到安装了驱动没有显示,可以在安装时选择任意“com口”,安装完成后在驱动端口那里改回USB口。 三、设置驱动参数 四、特别注意1.用棉签沾点酒精擦拭下滚轴、传感 ......
前端Web3.0 DeFi项目实战教程,以太坊DApp开发视频教程完整版
前端Web3.0 DeFi项目实战教程,以太坊DApp开发视频教程完整版 首先,要明确什么是Web3.0? 关于Web3.0,网络上有很多专业定义,笔者在此不做赘述,仅以最通俗易懂的方式来说明此概念。Web3.0是一个行业自创的概念,需结合Web1.0、Web2.0进行理解。下表为三者特征的对比: ......
vue3+elementplus实现侧边栏收缩折叠图标(SVG)显示异常
1.背景 没有使用elementPlus自带的icon图标,而是自己使用的全局svg图标组件。 2.目前情况 侧边栏的结构有一级菜单,二级菜单多样性。 3.目前问题 当侧边栏涉及到收缩的时候,svg图标就显示不正常。 展开: 折叠: 4.解决方法 自己的图标用<el-icon></el-icon>包 ......
【Vue】MineData 地图接入
一、文档资料: MineData开放平台: https://minedata.cn/md-platform/login/login MineData V2.1.0 接口文档: http://113.108.157.29:7070/support/static/api/doc/js/v2.1.0/ap ......
27-Vue脚手架-ref属性
ref 属性 ref 被用来给元素或子组件注册引用信息(id的代替者) 1)应用在 html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象vc(VueComponent) 2)使用方式 打标识:<h1 ref="xxx"></h1> 或 <School ref=''xxx'></ ......
解决vue单页面程序经过hbuilder打包成apk后物理按键会直接退出程序的问题
解决方法是在项目 index.html文件中写入 <script> document.addEventListener('plusready', function() { var webview = plus.webview.currentWebview(); plus.key.addEventLi ......
vue 组件之间的数据传递
一、组件之间的关系 父子关系、兄弟关系、跨级关系 二、父子之间数据传递 1、父组件向子组件传递【使用 props】 第一步:在父组件中使用子组件时,给子组件绑定属性 第二步:在子组件中使用props接收绑定的属性值 2、子组件向父组件传递【使用 $emit】 第一步:在子组件中通过$emit触发指定 ......
[Vue]el和data的两种写法
1.el有2种写法(1).new Vue时候配置el属性。(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。 // el 的两种写法 const vm = new Vue({ el: '#root', // 第一种写法 data: { name: '模板' } } ......
MySQL 8.0.34 MGR部署教程
基于MySQL 8.0.34 MGR部署 一、环境概述 OS IP Hostname MySQL Version DB Port MGR Port Redhat 7.9 172.20.10.3 s1 8.0.34 3306 33061 Redhat 7.9 172.20.10.4 s2 8.0.34 ......
颜色选择盘插件--- vue-color (sketch)
安装依赖 cnpm install vue-color 代码使用 <w-form-item label="颜色设置" prop="ysbm"> <div class="yssz-box"> <div class="color-outer-box"> <div class="color-box" :s ......
铁威马教程丨如何通过SSH访问TNAS
SSH是一种安全的远程登录及传输协议。ssh可用于远程登录、远程文件传输等。下面分享如何通过SSH访问铁威马NAS。 1、在登入SSH前,请先在电脑上安装支持SSH访问的工具,如putty 2、打开TNAS,进入控制面板的【终端与SNMP】,开启SSH访问,系统默认端口为9222,你也可以自行设置, ......
Pandas教程
1.总览 https://zhuanlan.zhihu.com/p/370471321 2.Pandas有关库 3.调用Pandas库 4.Pandas的数据结构 Series DataFrame 5.调用/读取数据 CSV Excel Others(json、SQL、html) 6.数据存储 7. ......
梦幻西游手游详细图文架设教程
提到梦幻西游,大家肯定不陌生。在 2001 年正式上线,它成为了很多人的第一款网游,陪伴了一代又一代的玩家成长。没错,今天要架设的就是梦幻西游手游! ......
一些好用的npm包分享
shelljs shell命令的node封装 commander 强大的命令行指令处理工具 command-line-args 基于配置的命令行参数解析 command-line-usage 生成可读性强的命令行打印信息 inquirer 交互式命令行工具 例如:利用上下键,操作命令行选项,输入指令 ......