作者：月夕 演示代码使用 Vue3 + ts + Vite 编写，但是也会列出适用于 Vue2 的优化技巧，如果某个优化只适用于 Vue3 或者 Vue2，我会在标题中标出来。一、代码优化v-for 中使用 key使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则
一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" />
<Model v-if="isShow" />当表达式为true的时候，都会占据页面的位置当表达式都为false时，都不会占据页面位置二、v-show与
1.vue自定义插件的作用插件通常是用来为Vue添加全局功能。插件的范围没有严格的限制。——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 AP
customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应示例<template>
<div>
<p>{{obj}}</p>
<button @click="inc">button</button>
</div>
</template>
<
转载
2024-10-22 13:24:54
151阅读
Vue生态系统中有一个名为Vite的新构建工具，它的开发服务器比Vue CLI快10-100倍。这是否意味着Vue CLI已经过时了?在本文中，我将比较这两种构建工具，并说明它们的优缺点，以便你可以决定哪一种适合你的下一个项目。Vue CLI概述大多数Vue开发人员都知道，Vue CLI是使用标准构建工具和最佳实践配置快速建立基于Vue的项目的不可或缺的工具。其主要功能包括：工程脚手架带热模块重载
vue3.0正式版本已经发布超过一年,社区生态已经完善,所以,是时候开始使用vue3.0了目前已支持 vue3 的UI组件库ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步目前支持 Vue 3.0 的 2.0.0 测试版
一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
转载
2024-04-25 09:04:29
150阅读
Windows系统一、先下载node.js，为了之后可以使用npm命令下载第三方包下载地址：建议安装LTS版本Download | Node.js二、安装淘宝镜像（因为经常下载第三方包速度比较块-节省时间）（设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，所以这里推荐使用淘宝 NPM 镜像。）使用管理员身份打开cmd，在打开的命令行界面输入：三、接着安装vue和vu
Situation需求 项目中的一种题目 计算题需要配置特定运行指令，计算题的编辑和新增是同一个页面 基本信息提交、配置指令提交和配置文件上传各是一个接口，一共涉及3个接口 指令提交和文件上传均需要questionId，因此我们设计 第一页进行题目基本信息提交，请求成功后后端返回questionId，我们拿到questionId后 下一步 跳转至 第二页，进行指令的配置 问题 编辑计算题时，第一页
转载
2024-05-17 17:50:20
77阅读
theme: fancy一. Ref 用法这是 ref 最基本的用法，返回来的count是一个响应式的代理值const count = ref(0)二. 实现1. ref 函数我们调用的ref函数，传进来一个 val 值，调用 createRef 函数，我们来看下该函数的实现源码路径：packages/reactivity/src/ref.ts
function ref(value?: unkno
Vue-cli 3安装及使用vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法全局变量的使用vue-cli3.0独立运行.vue文件vue项目管理器vue-cli3.0配置基础的路径 vue-cli安装使用下面的命令安装vue-cli3npm install -g @vue/cli
# OR
yarn global add @vue/cli安装完成，检查vue版
转载
2024-10-13 15:44:56
34阅读
文章目录使用感受响应式Vue3对比Vue2的变化reactive 源码实现使用感受proxy引入Proxy、Reflect完善边界情况 使用感受响应式在源码开始前，我们来尝试写个demo，使用一下 Reactive & effect<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=
新版的Vue中最重要的一些特性有：性能得到了显著的提升；Composition API；一个组件可以支持多个根元素；Tree shaking，当一些功能不用的时候就不会打包到最终的代码里；新的组件：Fragment、Teleport、Suspense；其中性能提升主要体现在：更新比vue2有1.3～2倍的提升、SSR有2～3倍的提升。做一个验证创建一个vue2项目和一个vue3项目, 分别加载有1
本文的主要内容如下：介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面 本文11个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！ Git
最近想要做一些vue的插件练一下手，于是现在需要解决的问题有两个。一个是怎么写vue的插件，一个是写完后怎么上传npm。一、如何写一个vue插件首先在进行插件创作的时候，先建立一个普通的vue项目进行编写。vue create vue-button-z然后创建plugins文件夹，和plugins下的lib文件夹，在lib文件夹下写你的插件代码1.插件代码编写这是button.vue 文件示例，就
推荐项目：vue-plyr —— 美观的Vue视频音频播放组件在构建现代化Web应用时，一款美观且功能强大的媒体播放器是必不可少的元素。vue-plyr就是这样一款专为Vue.js框架设计的组件，它提供了对HTML5视频和音频、YouTube以及Vimeo的支持，让您的应用在视觉体验上更上一层楼。项目介绍vue-plyr是一个由sampotts创建的Plyr视频播放器的Vue.js实现。它的设计理
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
635阅读
vue 单页应用中微信支付的坑标签（空格分隔）： 微信 支付 坑 vue场景在微信H5页面（使用 vue-router2 控制路由的 vue2 单页应用项目）中使用微信 jssdk 进行微信支付。基本知识1.依据微信jssdk官方文档，使用微信功能的页面，必须进行微信 config，并在wx ready 之后再调用微信功能。
2.进行微信支付的话，需要在微信开放平台配置微信支付合法路径。该合法路径
vue3.0 上手体验 vue3.0 beta 版本已经发布有一阵子了，是时候上手体验一波了～注意，本文所有演示都是基于 vue3.0 beta 版本，不保证后续正式版 api 不改动。等官方文档出来后，以官网为准。环境搭建直接使用脚手架，如果本地没有安装的可以执行脚手架安装命令： npm install -g @vue/cli 如果本地安装过的，可以尝试更新一下： npm u
MENU01、v-if和v-show指令02、Vue路由拦截03、Vue中父子组件生命周期钩子函数的执行顺序04、MVVM05、v-for和v-if06、Vue中的data07、v-model（双向绑定）08、route和router的区别09、vue-router10、computed（计算属性）和watch（监听）的区别及应用场景11、Proxy与Object.defineProperty优
转载
2024-09-12 22:41:30
57阅读
