Vue2 Vue3
学习
coderkey
放弃很容易,但坚持一定很酷
展开
-
vue3用自定义指令实现按钮权限
vue3如何用自定义指令实现按钮权限的呢?app.directive('自定义指令名',{})原创 2024-06-28 01:21:07 · 353 阅读 · 0 评论 -
vue3监听器watch以及watchEffect的使用
侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数watch()默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。watch()一共有三个参数第一个参数:侦听器的源,可以为以下几种 :以函数形式返回一个值;一个ref;一个reactive响应式对象或者由以上类型的值组成的数组。第二个参数:侦听源发生变化时调用的回调函数。这个函数接受三个参数分别是新值,旧值 ,用于注册副作用清理的回调函数(可选,可忽略);当侦听多个来源时,回调函数接受两个数组,分别对应来源数组中的新值和旧值。原创 2024-06-26 22:58:09 · 777 阅读 · 0 评论 -
vue2和vue3数据代理的区别
vue2的双向数据绑定是利⽤ES5的⼀个 API ,对数据进行劫持结合发布订阅模式的方式来实现的。vue3中使⽤了ES6的Proxy代理对象,通过reactive()函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从而实现对数据的代理操作。原创 2024-06-23 18:44:04 · 623 阅读 · 0 评论 -
vue3父组件获取子组件的实例对象
在父组件的模板里,对子组件的标签定义。属性,并且设置属性值,在方法里获取。原创 2024-06-22 19:24:52 · 480 阅读 · 1 评论 -
vue3父子组件通信
子组件中通过emit调用父组件中的自定义事件,给父组件的这个方法里传入数据数据。在父组件的模板中使用子组件标签,并且给标签自定义属性和属性名,即通过。绑定数值,而后传给子组件;原创 2024-06-22 02:20:01 · 454 阅读 · 0 评论 -
vue3爷孙组件通信——provide和inject
这样子第一代组件的数据就可以传递给第三代组件使用了,数据还是响应式的。原创 2024-06-22 01:23:28 · 279 阅读 · 1 评论 -
vue3兄弟组件通信之第三方库/插件-mitt工具
进行组件与插槽内容之间的通信,或者使用。和事件进行父子组件之间的通信,使用。中推荐的兄弟组件通信方案是通过。子组件 Test1.vue。子组件 Test2.vue。原创 2024-06-21 17:22:57 · 258 阅读 · 0 评论 -
vue3插槽slot的使用
vue3如何使用插槽slot?方式:默认插槽,具名插槽,作用域插槽原创 2024-06-21 01:42:26 · 384 阅读 · 0 评论 -
vue3页面传参
例子:a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数。在路由router.ts配置。原创 2024-06-20 19:57:32 · 507 阅读 · 1 评论 -
Vite+Vue3安装且自动按需引入Element Plus组件库
【代码】Vite+Vue3安装且按需引入Element Plus组件库。原创 2024-06-18 11:51:51 · 583 阅读 · 0 评论 -
同一电脑上安装且使用vue2.0和vue3.0版本
卸载全局安装的vue版本。(注:自行百度搜索如何卸载全局vue2vue3脚手架)想要在自己电脑本地上创建使用vue2.0和vue3.0版本的项目,如何实现?在自己想要的位置上,新建两个文件夹分别命名为。配置环境变量 (自己用的win10)在系统变量上分别配置。原创 2023-03-01 16:28:59 · 1005 阅读 · 1 评论 -
vue实现同一页面点击当前不同tab页展示不同内容并且选中变色
【代码】vue实现同一页面点击当前不同tab页展示不同内容并且选中变色。原创 2023-02-21 11:21:27 · 689 阅读 · 0 评论 -
vue前端接受后台返回流数据,并实现文件正常下载
注意:请求接口的响应类型是responseType: ‘blob’后台返回二进制文件流,前端实现下载excel文件;原创 2022-12-20 15:59:34 · 1915 阅读 · 2 评论 -
纯前端vue框架实现excel 导出
【代码】纯前端vue框架实现excel 导出。原创 2022-12-20 14:42:07 · 380 阅读 · 1 评论 -
vue2中watch的使用
(2)把要监听的msg值看作对象,利用hanler方法来进行监听。(2)可以只监听对象的其中一个属性值 ’对象.属性‘ 的形式。(1)把要监听的msg值看作方法名,来进行监听。(1)(一维、多维)数组的变化不需要深度监听。(2)数组对象中对象属性变化监测需要使用。深度监听,多少层内产生变化都可以监测到。(1)监听对象需要用到深度监听,设置。字符串,布尔值,number。原创 2022-12-16 16:38:15 · 25443 阅读 · 2 评论 -
在vue开发中会遇到methods方法里有一个函数嵌套另一个函数,最内层函数this取不到data数据,该怎么解决?
在vue的methods方法中两个函数互相嵌套,最内层函数this取不到data数据。(1)给最外层函数this重新赋值给一个变量。原创 2022-12-08 17:01:37 · 3677 阅读 · 1 评论 -
前端如何在接口返回字符串类型的数值转化在浏览器中转化为对应文字并且逗号隔开
一,问题后端接口中返回字符串类型的数值如何转化在浏览器中转化为对应文字用逗号隔开0代表微信 1代表QQ 2代表邮件 3代表语音二,方法第一步:假设后端返回的数据第二步:映射类型 定义一个数组第三步:数据处理写在计算属性里第四步:模板展示第五步:测试结果处理前处理后三,完整测试代码原创 2022-12-07 11:56:10 · 934 阅读 · 0 评论 -
vue移动端适配方案:amfe-flexible和postcss-pxtorem插件结合
一,问题用vue开发一个h5移动端项目需要做适配;二,适配方案第一步:安装两个插件第二步:在main.js文件中导入amfe-flexible第三步:postcss.config.js中配置postcss-pxtorem第四步:测试结果原创 2022-12-05 16:55:41 · 940 阅读 · 1 评论 -
vue如何修改title标签中的htmlWebpackPlugin.options.title
如何修改title标题。文件,并且添加如下代码。原创 2022-10-27 10:12:44 · 901 阅读 · 0 评论 -
nginx配置同一域名同一端口下部署多个vue项目
本地开发好了多个前端微信网页项目,想部署上线,但是微信那边必须得在默认端口下访问前端项目,于是就nginx配置同一域名同一端口下部署多个vue项目。根据根路径不同分别代理访问不同项目,刚好解决这个问题。默认端口就只有一个,多个项目实现不了。文件夹,然后放在对应的位置上 ,配置。以上全部搞完之后就可以访问了;原创 2022-08-22 16:42:46 · 8172 阅读 · 2 评论 -
vue移动端/pc端适配插件:postcss-px-to-viewport
重新运行后发现,不仅vant相关组件的单位被转换成了vw,而且其比例也就没有问题了。: 当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!vant团队的是根据375px的设计稿去做的,理想视口宽度为375px;,这表示:所有css属性的属性的单位都进行转化,除了。插件,将px单位自动转换成viewport单位;而自己的设计稿750px,这样就出现比例问题;是因为适应不同的操作系统,在mac下结果为。,而在windows下结果为。文件里配置以下代码;文件里配置以下代码;...原创 2022-08-18 15:07:07 · 4167 阅读 · 7 评论 -
Vue3.2 setup语法糖总结
Vue3.2版本开始才能使用语法糖!在Vue3.0中变量必须return出来,template中才能使用;而在Vue3.2中只需要在script标签上加上setup属性,无需return,template便可直接使用,非常的香啊!原创 2022-08-05 10:34:59 · 598 阅读 · 1 评论 -
vue将当前时间转化为时间戳以及处理时间格式
timeFormat.js文件 时间格式化页面引入原创 2022-07-14 15:45:56 · 4966 阅读 · 0 评论 -
vue调用h5支付宝支付时无法调用问题
问题:前端调用后端支付宝支付的接口时,会返回一串表单的字符串,此时直接使用将字符串赋值到页面上,页面上也有显示,但是就是调用不起来支付。原因:因为赋值页面还没加载完成里面的。方法:使用方法,等加载完成在执行一遍返回的字符串里的代码。...原创 2022-07-07 14:26:40 · 849 阅读 · 0 评论 -
用axios请求接口数据时,返回两层data数据,应该如何解决?
如何配置axios才能让返回值直接能获取到data,而不是response.data.data?默认请求接口获取response的返回结果这样在读取数据的时候还需要加一层data:response.data.data,有没有配置项直接让response返回data,而不用通过response.data去获取?axios 拦截器中response配置返回“return res.data;”如下:// main.js// 响应拦截axios.interceptors.response.use(re原创 2021-05-28 11:05:39 · 2336 阅读 · 1 评论 -
Axios学习笔记
Axios的封装axios是什么axios是基于Promise的一款http客户端工具,用于在游览器和nodejs环境中进行请求网站资源。有以下特性:为游览器生成一个http请求为node生成一个http请求支持Promise的API方法拦截请求和响应转换请求数据和响应数据取消请求自动转换成JSON 数据客户端防范XSRF基本使用设置接口请求前缀利用node环境变量来作判断,用来区分开发、测试、生产环境// 环境的切换if (process.env.NODE_ENV ==原创 2021-05-21 14:27:03 · 555 阅读 · 11 评论 -
WebSocket学习笔记
WebSocket的使用产生背景:在 WebSocket 协议出现以前,创建一个和服务端进双通道通信的 web 应用,需要依赖HTTP协议,进行不停的轮询,这会导致一些问题:服务端被迫维持来自每个客户端的大量不同的连接大量的轮询请求会造成高开销,比如会带上多余的header,造成了无用的数据传输定义:WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket AP原创 2021-05-19 11:52:43 · 721 阅读 · 5 评论 -
vue动态修改微信h5网页标题title
问题:想要修改微信网页标题,使用修改,直接 就好了,这样在安卓的微信浏览器是正常运行,可在IOS中这样的确不起作用。原因:由于微信浏览器只在页面首次加载时初始化了标题,之后就没有再监听 的事件。方法:立即创建一个请求,加载一个空的,由于加载后立即就移除,也不会对页面造成影响,但这样微信浏览器上的便刷新了。...原创 2022-07-06 10:40:58 · 3040 阅读 · 0 评论 -
vue 内网穿透后访问域名本地提示 Invalid Host header
问题:最近开发一个公众号网页,需要发布在线上才可以调用,于是对本地ip进行内网穿透,映射成外部可以访问的公网ip(域名),用浏览器打开地址后,出现 ;方法:在项目中的进行配置原创 2022-06-21 14:19:19 · 554 阅读 · 1 评论 -
解决 npm install 报错问题
问题描述:当你跑起一个项目的时候,第一步需要先安装依赖npm install然后报错,如下图:报错:Unexpected end of JSON input while parsing near '....3","style-loader":"^'解决方案:① 直接执行 npm cache clean --force, 如果执行成功,再npm install即可。② 如果执行失败,请先升级npm,即npm i -g npm, 最后再执行npm cache clean --force, 最后再n原创 2021-07-22 11:59:54 · 5595 阅读 · 5 评论 -
vue-element-ui分页英文问题
vue-element-ui分页英文问题引入vue-element-ui发现人家demo是中文的分页文案,而我们的是英文的 修改地方项目根目录下 src→main.js 文件里面的 import locale from 'element-ui/lib/locale/lang/en' 修改为 import locale from 'element-ui/lib/locale/lang/zh-CN'...原创 2021-06-05 09:59:41 · 605 阅读 · 0 评论 -
vue中qs插件的使用
一、vue后台传参出现问题我在vue+element写了一个后台管理系统,在添加表单按钮post传参时无法正常的传递数据。之后通过搜索发现原因是传递参数要将参数序列化。使用第三方工具qs来处理参数。二、步骤:1、首先先下载:npm i qs 2、然后引入 :main.jsimport qs from 'qs'Vue.use(qs)组件使用import qs from 'qs'3、qs主要有两个方法 :方法一:将对象序列化成URL的形式,多个对象之间用&拼接(拼接是由底原创 2021-06-07 16:27:44 · 3643 阅读 · 0 评论 -
Vue3.0全家桶最全入门指南 - vue3.0新特性 (2/4)
二、vue3.0新特性1、实例化2.x使用构造函数new Vue(…)创建实例,3.x使用createApp函数创建实例;2.x所有属性方法和设置都绑定到全局Vue对象上,3.x改为绑定到vue实例下,收紧了scope;3.x移除了 Vue.config.productionTip 和 Vue.config.keyCodes 配置属性;// vue 2.ximport Vue from 'vue'import App from './App'import router from './rou原创 2021-05-25 15:20:33 · 1542 阅读 · 0 评论 -
Vue3.0全家桶最全入门指南 - 3.x跟2.x的其他差异 (4/4)
四、3.x跟2.x的其他差异ctx属性对于网上一些其他文档使用ctx.router、ctx.router、ctx.router、ctx.store访问router和store的应该小心避坑,注意开发环境和生产环境的差别vue3.x 开发环境 ctx开发环境的ctx,可以看到router、router、router、store、声明的变量和方法等vue3.x 生产环境 ctx生产环境的ctx,router、router、router、store没有了,其他属性也都没有了,不能通过ctx.rout原创 2021-05-25 15:13:45 · 330 阅读 · 3 评论 -
Vue3.0全家桶最全入门指南 - vue-router@4.x和vuex@4.x (3/4)
三、vue-router@4.x和vuex@4.xvue-router@4.x和vuex@4.xvue2.x使用的是vue-router@3.x和vuex@3.x,vue3.x使用的是vue-router@4.x和vuex@4.x,这里要避免跟vue3.x的版本号混合了,其实vue3.x使用的router和vuex都是4.x。这里为了方便理解,统一使用vue2.x router、vue3.x router代替vue-router@3.x和vue-router@4.x,统一使用vue2.x vuex、v原创 2021-05-25 15:01:10 · 698 阅读 · 0 评论 -
Vue3.0全家桶最全入门指南 - 快速搭建 (1/4)
vue3.0六大亮点Performance:通过Proxy实现双向响应式绑定,相比defineProperty的遍历属性的方式效率更高,性能更好,另外Virtual DOM更新只diff动态部分、事件缓存等,也带来了性能上的提升Tree-Shaking Support:相比2.x导入整个Vue对象,3.x支持按需导入,只打包需要的代码Composition API:组合式API,面向函数编程Fragment、Teleport、Suspense:“碎片”,Teleport即Protal原创 2021-05-25 14:21:15 · 6430 阅读 · 0 评论