vue
写代码的小珊子
这个作者很懒,什么都没留下…
展开
-
Vue常见问题
②vue在patch过程中判断两个节点是key是一个必要条件,渲染一组列表时,key往往是唯一标识,所以如果不定义key的话,vue只能认为比较的两个节点是同一个,哪怕他们实际上不是,这导致了频繁更新元素,使得整个patch过程比较低效,影响性能。④从源码中可以知道,vue判断两个节点是否相同时主要判断两者的key和元素类型等,因此如果不设置key,他的值就是undifined,则可能永远认为这是两个相同节点,只能去做更新操作,这造成了大量DOM更新操作,明显是不可取的。...原创 2022-08-09 13:36:21 · 536 阅读 · 1 评论 -
Vue3中watch和watchEffect的用法
watch函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。watch(source,callback,[options])参数说明:source:可以支持string,Object,Function,Array;用于指定要侦听的响应式变量callback:执行的回调函数options:支持deep、immediate和flush选项侦听reactive定义的数据import {defineComponent,ref,reac原创 2022-05-24 15:47:02 · 665 阅读 · 0 评论 -
antd中,国际化切换是,form表单错误提示不及时更新问题
在开发中,我们可能会遇到使用国际化i18n的情况,但是当我们切换语言时,form表单的错误提示却不能及时更新,这时我们可以选择行内校验法,在者就是,使用this.$refs.form.resetFilds()来进行情况校验...原创 2022-05-12 17:28:38 · 907 阅读 · 1 评论 -
Vue3中vuex的使用
Vuex主要解决跨组件通信的问题。在vue3中,需要使用Vuex v4.x版本。安装用npm或者yarn安装到项目中。npm install vuex@next --save# 或yarn add vuex@next --save使用安装成功后,在src目录下创建store目录,再在store下创建index.js文件//store/index.jsimport {createStore} from 'vuex'export default createStore({ state:原创 2022-03-25 11:17:34 · 1355 阅读 · 0 评论 -
使用vuex中的数据刷新界面数据消失问题
在vue中,我们可以使用vuex来存储数据,但是会出现一个问题,就是刷新当前界面数据会恢复原状,此时我们有两种解决方案1、使用localStorage或者sessionStorage来存储数据,使用setItem存数据,getItem读取数据2、可以引入vuex-persist插件,他就是为Vuex持久化存储而生的一个插件。不需要你手动存取storage,而是直接将状态保存至cookie或者localStorage中,具体用法如下:①安装插件npm install --save vuex-pers原创 2022-03-14 16:40:26 · 1470 阅读 · 0 评论 -
vue3.x项目中,出现红色波浪线问题
在vue3.x项目中出现红色波浪线问题一般有以下几种情况:1、引入错误:当前引入的组件或者api不存在2、组件和api存在正常的情况下,还出现红色波浪线,如下:这种情况是eslint引起的,你可以再VScode中关闭eslint校验,另外一种情况是你的项目必须是独立存在于一个VSCODE中的,不允许有叠加项目,不然编译器就会将其解析成其他的版本,你引入的是Vue3.x版本,但是编译器可能会解析成Vue2.x版本,就会出现不识别vue3语法的问题,出现以上的红色波浪线。...原创 2022-03-02 15:07:14 · 7049 阅读 · 0 评论 -
Vue3.0的常用的Composition API
一、常用的Composition API1、setup的使用①setup是vue3.0中一个新的配置项,值为一个函数②setup是所有Composition API(组合API)③组件中所有用到的:数据、方法等等,均要配置到setup中④、setup函数的两种返回值:若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用若返回一个渲染函数:则可以自定义渲染内容⑤注意点:尽量不要与vue2的配置混用:1、vue2配置(data,methods,computed……)中可以访问到s原创 2022-02-22 16:41:29 · 963 阅读 · 0 评论 -
vue3的基本认识
1、Vue3带来了什么①性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%②源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking2.拥抱TypeScriptVue3可以更好的支持TypeScript3.新的特性① Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与inject原创 2022-02-17 11:35:47 · 304 阅读 · 0 评论 -
vue中的computed和watch的区别及用法
区别①watch:1、主要用于监控vue实例的变化,它监控的变量必须在data中声明才可以;2、一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据3、支持缓存,只有依赖数据发生改变,才会重新进行计算4、 不支持异步,当computed内有异步操作时无效,无法监听数据的变化②computed1、用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向绑定展示出结果或者作其他处理2、支持缓存,只有一来数原创 2022-02-11 11:52:21 · 944 阅读 · 0 评论 -
Vue中的插件-----简单使用
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:1、添加全局方法或者 property。如:vue-custom-element2、添加全局资源:指令/过滤器/过渡等。如 vue-touch3、通过全局混入来添加一些组件选项。如 vue-router4、添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。5、一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router插件的功能:用于增强Vue本质:包含i原创 2022-02-10 17:04:19 · 458 阅读 · 0 评论 -
vue中的mixin混合的简单使用方法
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。简单的案例:在A组件和B组件中都有一个相同的方法,showName,此时可以将showName方法抽离出来,mixin.js,并且暴露出去,在A组件和B组件中使用**import {mixin} from '…/mixin.js’和mixins:[mixin]**将其导入,即可实现点击方法//A组件<te原创 2022-02-10 16:26:24 · 535 阅读 · 0 评论 -
Vuex的基本使用
1、安装vuex依赖包npm install vuex --save2、导入vuex包import Vuex from 'vuex'Vue.use(Vuex)3、创建store对象const store=new Vuex.Store({ //state中存放的就是全局共享的数据 state:{count:0}})4、将store对象挂载到vue实例中new Vue({ el:'#app', render:h=>h(app), router, //将创建的共享数据对象原创 2022-02-10 14:25:20 · 1376 阅读 · 0 评论 -
vue中的project和inject
project和inject:提供/注入**用处:**父组件可以向其所有子组件传入数据,而不管子组件层次解构有多深特性有两部分:1、父组件有一个provide选项来提供数据2、子组件有一个inject选项来开始使用这个数据<template> <div> <h1>{{msg}}</h1> <item_a /> </div></template><script>import原创 2022-02-10 13:31:46 · 2315 阅读 · 0 评论 -
vue中的时间总线(EventBus)
如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。EventBus的简介EventBus又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。如何使用?一、初原创 2022-02-09 11:29:48 · 769 阅读 · 0 评论 -
vue中的$parent / $children与ref
ref:如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用的就是组件实例$parent / $children:访问父/子实例需要注意的是:这两种都是直接得到组件实例,使用后可以直接调用组件的方法或者访问数据。我们闲来看个用ref来访问组件的例子://component-a子组件export default{ data(){ return{ title:'Vue.js' } }, methods:{ sayHello(){ window..原创 2021-12-31 10:29:57 · 812 阅读 · 0 评论 -
Vue中的mixins的用法
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象和方法,可以理解为形成了一个新的组件。混入(mixins):是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。怎么用?//新建一个mixin.js,在其中定义混入对象export const hunhe={ methods:{ showName(){ console.log(this.name) } }原创 2021-08-09 11:51:32 · 146 阅读 · 0 评论 -
vue中父子组件传值Prop&$emit
1、父组件向子组件传值//父组件.vue<template> <div> <Child name="张三" sex="女" :age="18" /> </div></template><script> import Child from './components/Child' export default{ name:"Parent", conponents:{Child} }</script&g原创 2021-08-09 11:15:41 · 333 阅读 · 0 评论 -
vue中的ref属性和props属性
1、ref属性的定义与用法:①被用来给元素或子组件注册引用信息(id的替代者)②应用在HTML标签上获取的真实DOM元素,应用在组件标签上是组件示例对象(VC)③使用方式://打标识:<h1 ref="XXX">//获取this.$refs.XXX2、配置项props:功能:让组件接收外部传过来的数据①传递数据:<Demo name="XXX"></Demo>②接收数据第一种方式(只接收):props:["name"]第二种方式:prop原创 2021-08-05 16:16:31 · 1350 阅读 · 0 评论 -
vue2.0和vue3.0生命周期对比
通过下表,我们可以看到,原有的生命周期基本都是存在的,并且新的命名更加至关,通过on前缀可以直观的看到,这是一个生命周期函数vue2.0生命周期vue3.0生命周期beforeCreate(组件创建之前)setup(组件创建之前)created(组件创建完成)setup(组件创建之前)beforeMount(组件挂载之前)onBeforeMount(组件挂载之前)mounted(组件挂载完成)onMounted(组件挂载完成)beforeUpdate(数原创 2021-08-05 16:05:20 · 330 阅读 · 1 评论 -
Vue3.0中reactive和ref的区别
ref:主要用于基本类型(number、string、null、Boolean、undefined)的响应。ref如果要修改它的值只能使用.value进行修改reactive:主要用于引用类型(object、array、function、data)的响应//以下是两者的用法代码<script> import {ref,reactive} from "vue" setup(){ const str=ref("vue3.0") const obj=reactive({name:"张原创 2021-08-04 09:48:36 · 161 阅读 · 0 评论 -
常用的操作数组的方法汇总
1、some和everysome是任意一项都返回true,则返回true,找不到则返回false,而every是每一项都返回true时才会返回true,不然则返回false.//示例----somelet arr=[1,2,3,4,55,56]let result=arr.some(function(item,index){ return item.toString().indexOf(5)>-1});console.log(result);//false//示例---everyl原创 2021-07-28 15:32:25 · 104 阅读 · 0 评论 -
Vuex的基本使用
1、安装vuex依赖包npm install vuex --save2、导入vuex包import Vuex from 'vuex'Vue.use(Vuex)3、创建store对象const store=new Vuex.Store({ //state中存放的就是全局共享的数据 state:{count:0}})4、将store对象挂载到vue实例中new Vue({ el:'#app', render:h=>h(app), router, //将创建的共享数据对象原创 2021-07-09 15:53:53 · 54 阅读 · 0 评论 -
vue.js中切换界面时组件不能刷新问题
在vue.js的项目开发中,我们使用的都是组件化开发,例如头部导航和底部都是公共组件,但是在开发过程中我们会遇到一个问题,就是在头部header组件中写好的方法或者在created中获取的值,在切换界面时不会实时更新。最近在开发过程中就遇到了这个问题,整个项目的头部header是固定的,当我登录成功之后header组件的右上角通过local Storage获取账号并显示登录者账号,退出登录时,账号不显示。但是在操作过程中却必需手动刷新才可以生效。最后查阅资料,发现在APP.vue中这样写可以实现切换路由原创 2021-07-02 14:12:56 · 738 阅读 · 0 评论 -
当vue项目中遇到跨域问题
当我在使用vue开发项目的过程中,遇到了以上图片所显示的跨域问题,当我点击上传按钮将图片上传到七牛云上时,发生了这个错误,原因是因为我在main.js中将***axios.defaults.withCredentials =false ;写成了***axios.defaults.withCredentials = true;在将错误改正之后,可以实现正常上传main.jsaxios.defaults.baseURL = '/'axios.defaults.withCredentials = .原创 2021-07-02 14:05:12 · 131 阅读 · 0 评论 -
解决element-ui的table表格控件表头与内容列不对齐问题
当我们在使用elementUI中的table时会出现表头与内容对不齐问题,这时我们可以使用:.el-table th.gutter{ display: table-cell!important; }来解决,即可实现表头与内容对齐,不会出现右侧空白问题!原创 2020-08-13 11:29:45 · 2119 阅读 · 0 评论 -
el-form中input输入框绑定v-on:change时点击enter会刷新整个页面问题
当我们使用elementUI中input时,会用到v-on:change事件,一般都是结合el-form表单使用的,但是这会出现一个问题,当我们输入之后点击enter键会重新刷新页面,所以我们要在el-form便签里加上 @submit.native.prevent 即可<el-form size="medium" ref="ComboSearch" :model="ComboSear原创 2020-08-09 20:44:47 · 1392 阅读 · 0 评论 -
vant库 van-image标签 引用本地图片
当我们使用vantage中的van-image组件的src参数默认的图片链接<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>我们想要换成本地的图片时必须要这样做:data () { return { list:[ {id:0,image:require('../../images/menu1.png'),title:'爱豆剧场'}原创 2020-06-08 16:28:19 · 6071 阅读 · 1 评论 -
vue中的计算属性
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> &l原创 2020-05-22 18:25:13 · 256 阅读 · 0 评论 -
Vue项目中使用rem
在src下创建一个目录,在创建一个rem.js文件,用于存储以下代码,设置完字体后,字体会随着设备大小而更改,自适应能力强(function(){ //用此匿名函数来修改字体大小(根据手机设备大小进行修改 function resize(){ var baseFontSize=100; //设计稿100像素相当于1rem,750px--7.5rem---各种屏幕的100%的宽度 var designWidth=750;//设计稿的宽度 var原创 2020-05-14 20:57:39 · 1290 阅读 · 0 评论 -
vue中组件间传值的方法?
vue中组件间传值是通过props来传递的,他需要使用属性绑定的语法,把要从VM身上传递过来的数据,绑定到组件身上,这个绑定的代码要写在HTML中。具体案例如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...原创 2020-03-05 14:19:33 · 173 阅读 · 0 评论 -
vue中的私有组件如何创建?
vue中私有组件是创建在VM内部的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2020-03-04 17:05:14 · 213 阅读 · 0 评论 -
vue中自定义指令
vue中的自定义指令分为全局指令和私有指令1.全局指令:直接在Vue身上绑定directive(),其中directive有三个属性bind:只调用一次。指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置instead:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入到文档)update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前注意...原创 2020-03-04 15:01:20 · 124 阅读 · 0 评论 -
webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
当我们在webpack中想要将一个文件打包到bundle.js中可能会出现以下错误:这是因为我们的webpack版本太高,例如我的就是4.41.2版本,所以在这个版本之前的命令都起不到作用所以这时我们要这样输入命令才会起作用...原创 2019-12-05 21:56:53 · 362 阅读 · 0 评论 -
vue中的命名组件
== 在一个页面中显示三个不同的组件需要改变以往的路径写法==案例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-11-14 16:12:41 · 207 阅读 · 0 评论 -
vue中实现路由高亮的两种方式
1、当我们引入vue-router这个包时,他为我们提供了一个类叫做.router-link-active,我们可以通过设置它的样式实现高亮显示,例如:.router-link-active{ /* vue-router提供了这个类 */ color:red; font-weight: 800; fo...原创 2019-11-14 09:06:01 · 555 阅读 · 0 评论 -
vue中的路由重定向
当我们注册组件时,一定会有一个默认的打开页面,这时就要用到我们的路由重定向rediect<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-11-14 08:55:31 · 970 阅读 · 0 评论 -
路由vue-router的基本使用
1.首先先引入vue的两个包 2.创建一个路由对象,当导入vue-router包之后,在window全局对象中,就有了一个路由的构造函数,叫做vueRoutervar routerObj=new VueRouter({})3.创建组件的模板对象var login={ template:'<h1>登录组件</h1>' } v...原创 2019-11-10 11:02:24 · 256 阅读 · 0 评论 -
如何安装vue-router?
1.首先直接在百度中搜索vue-router2.安装直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.jsUnpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js ...原创 2019-11-08 16:59:29 · 749 阅读 · 1 评论 -
vue中创建组件的方法
vue中创建组件的方法1.首先是要vue.extend来创建全局的vue组件,通过template属性指定了组件要展示的HTML结构var coml=Vue.extend({ template:'<h3>这是使用vue.extend创建的组件</h3>' })2.使用vue.component(‘组件名称’,创建出来的组件模板对象)V...原创 2019-10-13 21:26:13 · 295 阅读 · 0 评论 -
vue操作样式(内部样式&外部样式)
vue操作样式一、操作外部样式1.用v-bind:class/:class给p标签绑定样式(ft,bgc,bd)<p v-bind:class="['ft','bgc','bd']">一切帝国主义都是纸老虎</p>2.可以在data中设置一个名为styles的数组样式styles:['ft','bgc','bd'],然后直接将样式名styles写在p标签里&l...原创 2019-09-25 22:43:15 · 2344 阅读 · 1 评论