vue
曹豆芽
只有努力才能配得上你的想法
展开
-
uni-app父子通讯,跨页面、跨组件通讯
今天豆芽在复习uni-app也是复习了下uni-app父子通讯,跨页面、跨组件通讯.uni-app父子通讯父向子通讯//index.vue<template> <view class="content"> <testa :dataStr="dataStr"></testa> </view></template><script> import testa from '../../components/t原创 2021-06-22 11:53:44 · 461 阅读 · 23 评论 -
vue简单实现国际化来看看?
最近豆芽的接到业务需求,需要将现在的一个项目改成国际化,三种语言切换,英语,简体中文,繁体中文。话不多说,豆芽以前使用过国际化,知道vue-i18n可以实现国际化,话不多说,直接操作,实现一个简单的国际化操作。我们先安装vue-i18n插件npm install vue-i18n --save在合适的地方新建我们三种语言的配置js在main.js引入我们的vue-i18n插件和引入我们的语言包这个时候注意不要忘记挂载到vue上import Vue from "vue";import App原创 2021-06-10 15:16:51 · 707 阅读 · 127 评论 -
js数组处理方法来看看?
在日常开发中,我们对于数组的处理,是很多的,豆芽下面总结分享了一些数组处理和字符串转数组方法,提高开发效率。现在和豆芽一起看一看,欢迎留言补充交流????????????????????????????????????????。数组排序数组排序使用sort,可以调整排序顺序。let listData = [6,1,2,3,4,-1];listData.sort((left,right) => left - right);console.log(listData);数组数据添加let原创 2021-06-08 09:08:49 · 438 阅读 · 115 评论 -
vue打包部署文件可继续修改内容?
今天在公司豆芽接了一个需求,就是打包部署之后,我们可以修改页面的静态文字内容,并且在页面生效(不重新打包情况下),那么豆芽一接到这个需求的时候,里面想到将所有的静态文字内容,放入一个配置js中,直接修改这个配置js就可以了。这样想一想,在这里分享一下。欢迎交流不一样的方法。在vue项目文件的puclic新建static/configuration.js(静态文字配置文件)configuration.js//configuration自己定义名字//window对象添加自定义属性,供项目使用win原创 2021-06-07 19:23:20 · 7741 阅读 · 16 评论 -
vue使用less-loader出现TypeError:this.getOptions is not a function的错误解决
当我们直接去安装less-loader模块之后,可能会出现下面的错误,那么这个原因是我们直接npm install less-loader的时候,下载的版本太高,无法去兼容getOptions函数方法,这个时候只需要把版本降级就好了。这个就会发现已经是不会有报错的。npm uninstall less-loader//卸载当前的less-loadernpm install less-loader@5.0.0//下载指定的版本less-loader...原创 2021-05-12 16:41:37 · 4711 阅读 · 0 评论 -
使用vite搭建vue3.0和ts项目过程
本篇豆芽主要也分享怎么使用vite去搭建vue-ts项目,搭建之前先来说一说vite,vite是一种新型前端构建工具,能够显著提升前端开发体验。那么豆芽对它的感觉来说,就是快。搭建快,运行快。想了解比较详情的可以访问vite的中文网(https://cn.vitejs.dev/)可以进一步了解,那么我们也不多说直接进入到正事。首先我们先要去安装vite(以下的下载我都将使用npm)npm init @vitejs/app这个时候我们会发现npx: 5 安装成功,用时 1.15 秒? Projec原创 2021-04-13 20:04:55 · 1715 阅读 · 0 评论 -
vite项目创建vue-ts完成运行碰到的问题
今天豆芽使用vite完成创建vue-ts的项目,创建路由的时候发现了,当我使用这个时候启动项目的时候发现用vite创建项目可能存在这个问题,这个时候我们可以换一种获取环境变量的方法会发现此时已经正常了,那么接着我想获取我自定义的环境变量发现存在这个问题,这个时候的createWebHistory入参的值的类型是规定类型,这个时候我们可以直接类型断言就可以了。这个时候发现是已经获取到了...原创 2021-04-12 20:03:03 · 467 阅读 · 0 评论 -
vue3.0使用Ant Design of Vue存在的问题
豆芽前几天也是在开始了vue3.0和ts的项目,前端ui框架选用了Ant Design of Vue,豆芽搭建完之后,也是准备开始动手,在导入Ant Design of Vue的时候,发现它开始报错,如图也是很莫名其妙,看到这个错误,后来发现这是一个版本兼容的问题npm i --save ant-design-vue@next -S只需要使用这个命令行问题就解决了。...原创 2021-04-10 15:42:46 · 1047 阅读 · 2 评论 -
初学vue一定要看,vue从零到运行项目的完整搭建步骤
vue从零到运行项目的完整搭建步骤今天小编总结了一下,vue项目从环境的搭建和项目的初始运行,希望可以对一些刚学习vue的小伙伴有一些帮助。1.安装环境1.1node环境自己可以根据自己的电脑去选择版本,下载完成,点击安装即可,可以去黑窗口去检查是否安装成功,使用下面的命令行,出现版本号安装成功。node -v1.2全局安装脚手架(vue-cli)使用下面命令行安装脚手架,安装完...原创 2020-04-18 13:18:29 · 681 阅读 · 0 评论 -
vue路由传参的方法,值得看一看
vue路由传参的方法最近小编在公司也是在做vue项目,所以在有些功能需求上需要vue路由传参,所以写了这边博文,对于vue路由传参的方法做了小总结。第一种:使用router的name属性也就是params来传递参数这个方法有一个bug就是当你传参过去的时候,再次刷新页面时参数就会丢失。解决方法下边会说到。1:首先需要在router/index.js里边配置每个页面的路径,name属性,看例...原创 2020-04-13 09:00:45 · 275 阅读 · 0 评论 -
进来看看,这些知识要知道,vue3.0的语法与vue2.x有什么不同
vue3.0与vue2.x不同,你可以知道小编最近在用vue3.0去写项目,也总结了一些关于vue2.x和vue3.0的一些区别.vue3.0对vue的主要3个特点:响应式、模板、对象式的组件声明方式,进行了全面的更改,底层的实现和上层的api都有了明显的变化,基于Proxy重新实现了响应式,基于treeshaking内置了更多功能,提供了类式的组件声明方式。在vue2.x如何去使用vue3...原创 2020-04-05 18:53:32 · 733 阅读 · 0 评论 -
Vue中如何监控某个属性值的变化?
Vue中如何监控某个属性值的变化?比如现在需要监控data中,obj.a 的变化。Vue中监控对象属性的变化你可以这样:watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true } }deep属性表...原创 2020-03-31 09:33:15 · 3843 阅读 · 0 评论 -
前端三大框架Vue与Angular以及React的区别?
Vue与Angular以及React的区别?1.与AngularJS的区别相同点:都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。不同点:AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观;在性能上,AngularJS依赖对数据做脏检查,所...原创 2020-03-30 11:39:31 · 387 阅读 · 0 评论 -
vuex的使用的知识要明白
vuex的使用什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vue的安装npm i vuex --savevuex的使用页面使用Vue.use(vuex)调用vuex插件,将其注入到Vue根实例之中import Vue from "vue";import V...原创 2020-02-13 10:16:06 · 169 阅读 · 0 评论 -
vue的路由守卫的知识要明白
vue的路由守卫vue路由守卫实现代码router.beforeEach((to,from,next)=>{ if(to.path == '/login'){ next(); }else{ alert('您还没有登录,请先登录'); next('/login'); }})各参数含义1.to 表示将要跳转到的组件2.from原组件3.next...原创 2020-02-14 10:04:55 · 179 阅读 · 0 评论 -
vue生命周期钩子的知识要明白
vue生命周期钩子生命函数的介绍Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的生命周期生命函数的一一讲解beforeCreate实例还没有完全创建出来之前执行created实例创建完成后立即调用beforeMount在挂载之前被调用mounted表示内存的模板已经渲染页面中,此时数据已经可以经过Vue的编译be...原创 2020-02-15 11:41:40 · 258 阅读 · 0 评论 -
vue的一些知识(1)
vue的一些知识(1)v-if和v-show的区别v-if判断是否加载,可以减轻服务器的压力,在需要的时候加载,但是会有很高的切换成本:v-show是去调整DOM元素的css的display的属性,它可以使客户端操作的更加流畅,但是有很高的初始渲染成本。在需要频繁切换的时候,使用v-show较好;在运行时条件不会大幅度的去改变,使用v-if较好点。...原创 2020-02-16 10:32:06 · 150 阅读 · 0 评论 -
vue的一些知识(2)
vue的一些知识(2)1.对于MVVM模式的理解MVVW分为Model,View,ViewModel.Model代表的是数据模型,数据和业务逻辑都在model层定义;.ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作2.vue常见的指令.v-html.v-show.v-if.v-on.v-for3.vue中如何在组件间进行通信父组件...原创 2020-02-17 11:47:18 · 167 阅读 · 0 评论 -
vue的一些知识(4)
vue的一些知识(4)Vue的路由实现:hash模式 和 history模式hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 window.location.hash 读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。history模式: pushState(), replaceState()...原创 2020-02-19 12:08:19 · 165 阅读 · 0 评论 -
vue的一些知识(5)
vue的一些知识(5)route和router的区别$route是“路由信息对象”,包括path,params,hash,quer,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等...原创 2020-02-20 12:16:37 · 157 阅读 · 0 评论 -
微信小程序与vue区别,你要知道
微信小程序与vue区别生命周期不一样,微信小程序生命周期比较简单数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以显示与隐藏元素,vue中,使用 v-if 和 v-show 控制元素的显示和隐藏,小程序中,使用wx-if 和hidden 控制元素的显示和隐藏事件处理不同,小程序中,全用 bindtap(bind+event),或者 catchtap(catch+ev...原创 2020-03-15 11:16:00 · 491 阅读 · 0 评论 -
对MVVM模式的知识,要理解
对MVVM的理解?MVVM是什么?MVVM 模式,顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ,前端最早的 MVVM 框架 knockout 在2010年发布。Model 层: 对应数据层的域模型,它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。...原创 2020-03-20 10:07:41 · 432 阅读 · 1 评论 -
vue中computed和watch有什么区别
vue中computed和watch有什么区别?computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算computed适用于计算比较消耗性能的计算场景watch:更多的是「观察...原创 2020-03-21 12:18:14 · 219 阅读 · 0 评论 -
Proxy与Object.defineProperty的优劣对比
Proxy与Object.defineProperty的优劣对比?Proxy的优势如下:Proxy可以直接监听对象而非属性Proxy可以直接监听数组的变化Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object...原创 2020-03-22 11:29:35 · 946 阅读 · 2 评论 -
vue中对于Axios的重要使用
标题Axios的介绍Axios是一个基于 promise的http库,用于node.js和浏览器中Axios的下载npm安装npm install axioscdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>vue中使用axios在main.js中引用impor...原创 2020-02-11 12:19:03 · 302 阅读 · 0 评论