后部vue vue2 vue3
vue关于自定义指令
私有自定义指令（在与data()同级结构中进行配置） // 私有自定义指令的节点 directives: { // 定义名为color的指令，指向一个配置对象 color: { // 当指令第一次被绑到元素上的时候，会立即触发bind函数,只会调用一次 // 形参中的el表示当前指令所绑定到的那个d ......
Vue 项目配置自动更新，自动刷新页面
今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间，通过环境变量的方式保存起来 打开 vite ......
vue3页面中，两个相同组件，一个卸载，一个挂载，后展示的组件事件监听不生效？
场景：在实际开发中，遇到了这样一种场景，vue3页面，两个相同组件，在满足某条件下展示第一个组件，满足另一个条件下，隐藏第一个组件，同时展示第二个组件，比如反馈组件，会通过 window.addEventListener 来监听自定义的反馈弹窗展示和隐藏事件。 结果：两个相同组件一个卸载，一个挂载， ......
关于vue中的动态组件component和keep-alive
component标签是vue内置的，作用：组件的占位符 <component is="组件名称"></component> 其中is属性的值表示要渲染的组件的名字，也就是components节点下的组件名称 当我们动态切换组件名称时，每切换一次，组件就会被销毁一次，若不想让组件被销毁，则需要用到标 ......
在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
转载于在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯 - DCloud问答 uni-app的web-view组件，支持加载远程网页，在app环境下，还支持加载本地HTML页面。 在web-view加载页面中，会涉及wx、plus、uni等对象的使用。 在小程序下 ......
Vue 嵌套选项卡 购物车
嵌套选项卡 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/vue. ......
vue组件的inheritAttrs属性
先看一个案例 子组件ChidComp.vue <script> export default { inheritAttrs: true, props: { msg: String }, mounted(){ console.log(this.$attrs.mesge); } } </script> ......
vue-treeselect使用案例
https://vue-treeselect.js.org/ 父子节点没有关联 <TreeSelect flat style="background-color: #0e3977" placeholder="请选择" v-model="org" :multiple="true" :options=" ......
手撕Vue-Router-实现router-link
前言 在上一篇 [手撕Vue-Router-添加全局$router属性] 中，实现了将每一个 Vue 实例上挂载一个 $router 属性，这个属性就是我们在上一篇文章中创建的 VueRouter 实例。 开始 本章节，我们将实现一个 router-link 组件，这个组件可以实现点击跳转到指定的路 ......
手撕Vue-Router-实现router-view
前言 在上一篇 [手撕Vue-Router-实现router-link] 中，我们实现了 router-link 组件，这一篇我们来实现 router-view 组件。 实现思路 router-view 其实与 router-link 是同一个世界，同一个梦想的，那么我就废话不多说了，直接上代码。 ......
Vue3 + Vite中使用unocss
什么是unocss？ unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 Unocss： Guide 用Vite安装和配置步骤：UnoCSS Vite Plugin 互动性文档：https://unocss.dev/interactive/（ ......
Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
项目代码同步至码云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。 1. 安装 npm i vue-router@4 2. 集成 1. 新建两页面进行示例 在src/view下 ......
Vue3
官网 https://cn.vuejs.org/guide/quick-start.html 再vue3中采用的是组合式API风格(组合式 API (Composition API)) 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <s ......
[Vue] vue学习笔记(3): 渲染
条件渲染 主要有四个指令 v-show：控制元素可视性，即是否增加样式display=none v-if/v-else-if/v-else：类似if/else-if/else的逻辑结构，进行条件判断，控制元素的可视性，注意这种方法会直接决定元素是否出现DOM树上，而非样式改变 < ! n is a ......
[Vue] vue学习笔记(3): 绑定样式
动态绑定样式 vue允许动态设置class的值，通过利用v-bind指令 🎄情景： 假设存在多个class样式，并给元素指定一个class = "basic", 类名随不同情况更改 <div id="root"> <! 动态设置后，类名变为"basic happy" or "basic sad" ......
vue2与vue3的区别
一、双向数据绑定原理的区别 vue2 的双向数据绑定是利用ES5 的一个APIObject.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的 vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势 1、可直接监听数组类型的数 ......
vue 创建 项目方式
使用 webpack 创建 vue create pageName 资料 https://cli.vuejs.org/zh/guide/ 使用 vite 创建 npm create vue@latest 资料 https://cn.vitejs.dev/guide/cli https://githu ......
vue Vite3出现错误runtime-core.esm-bundler.js:6835 Uncaught TypeError: normalizeKey is not a function at createBaseVNode (runtime-core.esm-bundler.js:6835:19)
原因是在引入Element-Plus的顺序在vue之前导致，重新调整下他们的顺序后，问题解决。 import App from './App.vue' import { setupI18n } from '/@/i18n' import { setupRouter } from '/@/router ......
手机直播源码，js实现懒加载、vue实现图片懒加载指令
手机直播源码，js实现懒加载、vue实现图片懒加载指令 图片懒加载 监听滚动条滚动事件，当视口的高度＋滚动高度，大于图片所在位置举例顶部的偏移量时(也就是距离)，加载图片资源 index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ......
vue3 reactive对象的watch
代码 <script setup> import { ref,reactive, watch } from 'vue' const obj = reactive({ count: 0 }) const yourKnow0 = ref('') const yourKnow1 = ref('') let ......
vue项目中知识点整理
1、vue怎么找到入口页面的？ 在Vue项目中，入口页面（即根组件）是通过配置文件指定的。在创建Vue项目时，Vue CLI会自动生成一个src目录，并在其中创建一个名为main.js的文件。这个main.js文件就是Vue项目的入口文件。 在main.js文件中，你会看到以下代码： import ......
Vue 使用 sheetJS 通过 sheetJSON 解析 Excel 文件
安装 $ npm install xlsx 处理 import XLSX from 'xlsx'; /** * @param {string} data 文件名.xlsx */ export const read = (data, type, headerType=null) => { // 获取 ......
vue2和vue3项目并存时，下载nvm管理nodejs
1、下载nvm 1）下载一个1.19版本以上的nvm，在执行“npm install”时报错“npm ERR! Unexpected token '.'”。。https://blog.csdn.net/qq_25286361/article/details/132899937 2）在nvm/sett ......
vue3结构赋值失去响应式引发的问题思考
前言 vue3是基于 proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于 proxy 的特性，也提高了运行时的性能 凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些认为的弊端 原始值的响应式系统的实现 导致必须将他包装为一个对象， 通过 .valu ......
vue+iframe 添加请求头，自适应宽度和高度，iframe将token放在请求头不是src的url中
1 <template> 2 <div class="iframe"> 3 <iframe 4 v-if="isRequestHeader" 5 id="myIframe" 6 name="myIframe" 7 src="" 8 frameborder="0" 9 scrolling="no" 1 ......
Vue3 + Express 实现大文件分片上传、断点续传、秒传
前言 在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到 Web 服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。 但是当需要上传比较大的文件的时候，容易碰到以下问题： 上传时间比较久； 中间一旦出错就需要重新上传； 一般服务端会对文件的大小进行限制 ......
Vuex及Vue组件通信
Vuex及Vue组件通信 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证 状态以一种可预测的方式发生变化。 通俗点说就是不用考虑组件之间的嵌套关系（例如：父子、祖孙、兄弟等），就可以让组件之间进行互相通信。 组件五把 ......
【VUE基础】VUE3核心语法
setup setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。 特点如下： setup函数返回的对象中的内容，可直接在模板中使用。 setup中访问this是un ......
简单介绍Vue、uni-app、微信小程序三者之间的联系
uni-app和Vue的关系 使用Vue.js开发；在发布到H5时，支持所有的vue的语法；发布到App和小程序时，不支持部分vue语法(vue-router，需要dom操作的第三方插件、组件) uni-app和小程序的关系 组件标签靠近小程序规范；接口能力（JS API）靠近微信小程序规范；拥有完 ......