vue
文章平均质量分 59
木蓝茶陌*_*
这个作者很懒,什么都没留下…
展开
-
在运行vue项目时出现内存溢出
在运行vue项目时出现内存溢出在运行vue项目时出现内存溢出的情况,可以通过–max-old-space-size=4096进行缓解。文件路径:项目根目录\node_modules\.bin\vue-cli-service.cmd:node --max-old-space-size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*node配置运行内存:node本身,或者说v8本身有一个默认配置:Currently, by de原创 2021-10-14 09:43:09 · 4031 阅读 · 4 评论 -
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同
在逻辑组织和逻辑复用方面, Composition API 是优于 Options API;因为 Composition API 几乎是函数,会有更好的类型推断;Composition API 对 tree-shaking 友好,代码也更容易压缩;Composition API 中见不到 this 的使用,减少了 this 指向不明的情况;如果是小型组件,可以继续使用 Options API ,也是十分友好的原创 2024-01-02 14:01:01 · 1098 阅读 · 0 评论 -
Vue2和Vue3响应式的区别
Vue2 和 Vue3 响应式的区别,Vue2响应式是基于Object.defineProperty()实现的,Vue3响应式是基于Proxy()实现的,原创 2023-03-02 15:21:36 · 381 阅读 · 0 评论 -
vue项目中引入Luckysheet
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。在vue中引入Luckysheet。Luckysheet 常用 API 操作。Luckysheet 自定义操作。原创 2022-11-13 14:43:46 · 7180 阅读 · 0 评论 -
vue项目中引入monaco editor
在vue项目中引入monaco-editor代码编辑器,monaco-editor的常用方法和事件原创 2022-09-13 14:13:51 · 1306 阅读 · 0 评论 -
vue项目引入iconfont图标
在vue项目中引入iconfont字体图标原创 2022-08-18 13:39:42 · 926 阅读 · 0 评论 -
vue3 组合式API composition 简单使用
composition api 组合式API官网文档通过创建 Vue 组件,可以将界面中重复的部分连同其功能一起提取为可重用的代码段。使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而,当组件开始变得更大时,逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说,这会导致组件难以阅读和理解。这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,必须不断地“跳转”相关代码的选项块。如原创 2022-03-12 11:57:02 · 2293 阅读 · 0 评论 -
Vue富文本编辑器 Vue-Quill-Editor的使用
Vue轻量级富文本编辑器 Vue-Quill-Editorgit仓库地址使用步骤如下:下载安装 Vue-Quill-Editor 依赖包npm install vue-quill-editor --save在main.js 文件中引入并注册 Vue-Quill-Editorimport QuillEditor from 'vue-quill-editor'Vue.use(QuillEditor)在组件中使用 Vue-Quill-Editor<template>原创 2022-01-04 17:38:46 · 651 阅读 · 2 评论 -
Vue-MVVM设计模式
Vue-MVVM设计模式MVVM各部分含义:MVVM设计模式可以解读为如下:M: model 数据部分 dataV:view 视图部分 div容器,html页面中的元素。VM: view & model 视图和数据 的结合体,可以将model层中的数据显示在view层,在model中的数据发生变化时,能够实时地修改view层的数据。对应代码:...原创 2021-05-24 09:10:13 · 263 阅读 · 0 评论 -
vue 鼠标右击事件@contextmenu.prevent
vue 鼠标右击事件@contextmenu.prevent需求:阻止浏览器默认事件,添加自定义事件<div @contextmenu.prevent="rightClick"></div>自定义事件:methods:{ rightClick () { console.log("鼠标右击事件") },}...原创 2021-05-06 09:07:48 · 6948 阅读 · 1 评论 -
VueCli脚手架的使用详解
VueCli脚手架的使用详解介绍VueCLI 脚手架,可以把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给安装配置好,使得开发者可以把全部的注意力都集中在业务层面,明显提升开发效率,真实项目都要使用脚手架开发。依赖包:axios、vue等等都是依赖包,一个依赖包中有许多模块。安装安装vuecli:npm i -g @vue/cli # 全局安装上述依赖包通过全局方式安装,安装完毕后在系统任何目录都可以执行一个名称为vue的指令。依原创 2021-01-22 09:21:54 · 355 阅读 · 0 评论 -
vue.config.js文件常用配置详解
vue.config.js文件常用配置详解 使用vue-cli3.0搭建项目,会在根目录生成一个vue.config.js文件,可以对于一些基础配置和一些扩展配置进行配置。初始文件为:module.exports = { lintOnSave: false // 是否开启eslint保存检测,有效值:ture | false | 'error' // 设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。 // 默认情况下,警告仅仅会被输原创 2021-01-18 09:11:06 · 3828 阅读 · 0 评论 -
编程式导航的基本使用
编程式导航基本介绍导航: 一个路由被执行一次,就是一次导航。导航可以分为声明式导航和编程式导航。声明式导航: router-link 可以编译生成超链接按钮,单击按钮就可以切换路由并显示对应的组件,这个过程称为“声明式导航(静态)”。编程式导航: 有时由于业务需要,一个路由被切换执行并不方便通过声明式导航实现,相反是要通过程序代码的方式给实现出来,就是“编程式导航(动态)”。编程式导航的实现:路由对象.push(路由地址) // 根据路由地址执行导航路由对象.back()原创 2021-01-11 09:32:15 · 1447 阅读 · 0 评论 -
路由重定向redirect的基本使用
路由重定向redirect重定向:使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B。关键字:redirect。用户第一次访问网站页面("/根目录"首页)时,地址栏里边没有“#锚点”的信息,也就没有对应的组件用于显示,用户体验不好,现在可以通过重定向实现一种效果,即当浏览器没有任何 #锚点信息时,默认也给显示一个组件。语法:var router = new VueRouter({ routes:[ // {path:'/', redirect:'跳转到的路由地址原创 2021-01-08 09:17:32 · 33418 阅读 · 2 评论 -
路由通过children关键字设置子路由
路由通过children关键字设置子路由基本介绍子路由:通过children关键字给路由设置子路由。一般项目开发中,App.vue是根基组件(第1级别),内部可以有具体业务组件Home.vue,Music.vue,它们是第2级别,根据业务需要,业务组件内部还要做内容分级显示,例如音乐Music.vue下边要求显示台湾音乐,大陆音乐等,它们是第3级别组件。第3级别组件做应用的时候需要设置路由,并且与第2级别组件路由有形成父子关系,故称为子路由。子路由应用案例: 给Music组件创建子级组件原创 2021-01-07 09:15:46 · 1460 阅读 · 3 评论 -
vue路由传参详解
vue 路由传参基本介绍路由传参 : 项目中有应用场景是这样的: 电影列表页面中,每个电影项目都有详情页面,为了知道哪个电影被展示查看,需要在路由地址中额外设置电影的数字id信息(如下图),以便据此查询电影,这个电影id就是“路由传参”。语法使用实现案例效果: 单击电影列表项目,进入电影详情页面,并对当前电影项目的id信息传递接收。路由:/movie -------------Movie/detail --------------Detail声明路由参数:{ path: '/原创 2021-01-06 09:32:51 · 894 阅读 · 0 评论 -
vue路由守卫的基本使用
vue路由守卫的基本使用基本介绍路由守卫:每个路由在执行的时候都会经历一些"关口",关口可以决定是否 继续前进 或 执行其他路由 或 停止当前路由执行 ,关口就是守卫,有着一夫当关万夫莫开的效果。应用场景: 每个项目都要使用守卫,例如后台管理系统,很多组件页面要求只有处于登录状态的用户才可以访问,判断是否登录就是通过守卫做的。守卫使用语法:// 全局前置守卫,所有的路由在执行之前都会经过该守卫。router.beforeEach((to, from, next) => {原创 2021-01-05 09:31:29 · 445 阅读 · 0 评论 -
vue路由router的基本使用
vue路由router路由基本介绍路由:路由是一个js功能模块,用于解决SPA项目组件切换显示问题的,本身对组件切换的各个底层技术有做封装,是更成熟组件切换解决方案,使用起来更高级、方便。路由是开发SPA项目的必备技能。路由封装的元素有:#锚点超链接component 占位符标签window.onhashchangewindow.location.hash路由实现:路由安装在项目中安装路由有两种方式(两种方式本质完全一样):vuecli(脚手架)创建项目的时候(勾选Route原创 2021-01-04 09:19:30 · 169 阅读 · 1 评论 -
vue自定义指令directive
vue自定义指令directive基本介绍自定义指令:Vue框架给开发者提供了许多指令,例如v-if 、v-else、 v-html、v-show、v-text、v-model、v-bind等等,这些指令都是固定的,并不能任意满足开发需要,有时开发需要一个指令而框架还没有提供,就需要开发者自己定义,称为“自定义指令”。关键字:directive directives声明语法:// 1. 声明全局指令Vue.directive(指令名称,{ 配置对象成员 })// 2. 声明私有指令原创 2020-12-31 09:24:51 · 143 阅读 · 0 评论 -
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装。好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签,如果使用组件,就设置一个标签就可以了,明显提升开发效率。组件关键字:components、component私有组件声明私有组件语法:new Vue({ components:{ '组件的名称': { 配置对象成员 }, '组件的名称': { 配置对象成员 }... },原创 2020-12-25 09:14:18 · 15052 阅读 · 0 评论 -
vue按键修饰符详解
按键修饰符基本介绍按键修饰符:使得键盘事件只针对某个(或某几个)按键生效。应用中有许多键盘事件 (onkeyup、onkeydown、onkeypress、oninput等等),每个事件在执行的时候可以通过许多按键达成,有时要求只有按到某个按键时,才激活该事件。例如只有触碰回车键或ESC键才有效果,那么可以通过 按键修饰符 实现。按键描述oninput触碰键盘,给输入框做输入动作时会触发执行onkeyup键盘抬起触发执行onkeypress按下任何字母数字键原创 2020-12-24 09:26:14 · 1101 阅读 · 1 评论 -
vue生命周期详解
vue生命周期详解生命周期示意图生命周期:生命周期是指vue实例(或者组件)从创建到销毁所经历的各个阶段的总和。生命周期分为3个阶段,分别是创建、运行、销毁。创建阶段:由初始化vue对象、data/methods初始化、模板挂载、模板渲染等组成。运行阶段:分为 更新前 和 更新后 两部分。销毁阶段:分为 销毁前 和 销毁后。成员方法:各个阶段在Vue实例内部都有对应的成员方法,可以定义、执行、感知。 创建阶段:beforeCreate created beforeMoun原创 2020-12-23 09:22:45 · 184 阅读 · 1 评论 -
vue过滤器filters
vue过滤器 filters在项目应用中,同样一份数据信息,表现形式却有千差万别,例如时间信息可以是对象、时间戳、格式化等,字符串可以是大写的、小写的、首字母大写的等等,如果后台给提供的信息是其中一种形式,而前端需要的是另一种,在Vue中,可以通过 “过滤器” 进行转换处理。过滤器(filter)应用场景过滤器是Vue中实现数据格式转换的一种机制。本质就是函数。过滤器关键字:filter、filters。如下时间信息通过 对象形式或 时间戳方式显示都不合适,但是变为格式化时间就比较友好Th原创 2020-12-22 09:47:33 · 305 阅读 · 0 评论 -
vue双向数据绑定指令v-model
vue双向数据绑定指令v-modelv-model,被称为双向数据绑定指令,就是Vue实例对数据进行修改,页面会立即感知,相反页面对数据进行修改,Vue内部也会立即感知。v-model 是vue中唯一实现双向数据绑定的指令。v-bind(单向)数据绑定,Vue实例修改数据,页面会感知到,相反页面修改数据Vue实例不能感知。v-model(双向)数据绑定,页面修改数据,Vue实例会感知到,Vue实例修改数据,页面也会感知到。基本使用语法:<标签 v-model="data成员">原创 2020-12-21 09:28:47 · 2922 阅读 · 0 评论 -
vue遍历数组信息v-for指令
vue遍历数组信息v-for指令基本使用vue 使用v-for指令,遍历数组信息。语法:<标签 v-for="成员值 in 数组"></标签><标签 v-for="(成员值,下标) in 数组"></标签>示例:<div id="app"> <ul> <li v-for="item in color">{{item}}</li> </ul> <ul>原创 2020-12-18 09:17:32 · 1765 阅读 · 0 评论 -
vue元素绑定事件v-on @
v-on(@)事件绑定-基本使用使用v-on给标签绑定事件。web端网页应用程序开发,事件是一个不可或缺的技术。在vue中给元素进行事件绑定,需要通过v-on:指令实现,也使用@符号,@是v-on:的简写,使用更方便。事件类型:鼠标事件:onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等。键盘事件:onkeyup onkeydown onkeypress 等等。原创 2020-12-17 09:21:35 · 3435 阅读 · 0 评论 -
vue元素显示隐藏 v-if 和 v-show 指令
v-if 和 v-show在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果。语法:<标签 v-if="true/false"></标签><标签 v-show="true/false"></标签><!--true:显示 false:隐藏-->原理:v-if:通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符)。v-show:通过原创 2020-12-16 09:17:13 · 12762 阅读 · 0 评论 -
vue元素属性绑定v-bind
vue元素属性绑定v-bind属性绑定-基本使用使用 v-bind 指令对标签标准属性进行绑定。语法:<标签 v-bind:属性名称="表达式" ></标签><!-- 简易方式设置,推荐使用 --><标签 :属性名称="表达式"></标签> 注意:冒号(:)的简易设置推荐使用。如果有需要,绑定的内容可以进行变量、常量、算术运算、比较运算、逻辑运算、三元运算等技术应用。案例:通过v-bind对img标签的src、wid原创 2020-12-15 09:15:57 · 1097 阅读 · 1 评论 -
vue指令--v-text和v-html
v-text指令v-text与插值表达式{{}}的作用是一样的,都是操控标签的内容区域信息。语法:<标签 v-text="表达式"> </标签>注意:v-text 是通过标签的属性形式呈现。如果标签内容区域有默认信息,则会被v-text覆盖掉。v-text 可以进行 变量、常量、算术运算、比较运算、逻辑运算、三元运算符号等运算。示例代码:<div id="app"> <p>{{ city }}87</p> &原创 2020-12-14 09:08:52 · 682 阅读 · 0 评论 -
vue指令--插值表达式{{}}
vue指令——插值表达式{{}}基本使用vue中,使用{{}}双花括号,在html标签的“内容区域”中表现数据,这个技术称为插值表达式。语法:<标签> {{ 表达式 }} </标签><div> {{ city }}</div>表达式:变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。在JavaScript中,有返回实在信息的是表达式,没有返回实在信息(undefined)的是语句。使用示例:<div id原创 2020-12-11 09:22:19 · 8015 阅读 · 1 评论 -
vue.$set实现data对象下的属性深度监听,并触发视图的变化
vue.$setvue为了更加简洁,当data的数据是数组或者对象时,动态的添加、修改对象中的属性,视图不会响应式更新。 vue无法对data中对象下的属性深度监听,并触发视图的变化。vue在vm实例上提供了 $set方法,用于监听属性变化并更新视图。在Vue中,一般只有在data选项中声明的属性(或者是属性的属性)才是具有响应特性的。如果需要在data选项之外对已有属性添加(Vue 不允许动态添加根级响应式属性)具有响应特性的属性,需要用到Vue的set方法。官方API使用:vm.$s原创 2020-12-09 09:14:33 · 2998 阅读 · 0 评论 -
vue组件样式私有化scoped的实现原理
vue组件样式私有化scoped的实现原理在vue组件中,style标签上有一个特殊属性:scoped。当给一个style标签添加scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。scoped的实现原理vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用。vue组件中的scop原创 2020-12-07 09:20:04 · 738 阅读 · 0 评论 -
vue组件的data为什么必须是function
vue组件中data必须通过function/return声明vue组件中声明的data成员,值需要是一个function,内部通过return返回{}对象供使用,这个特性必须遵守。vue组件的data为什么必须是一个function:组件根据业务需要,可以被使用多次,function会使得每次组件使用的时候都亲自执行,并给当前应用分配一个独立的数据对象,这样多个组件的data数据是独立的,互相没有关联、牵扯,互相不会覆盖。如果直接通过{}对象 给data赋值,多次使用组件会造成组件之间的da原创 2020-12-04 09:14:17 · 1209 阅读 · 0 评论 -
vue 计算属性computed的应用
computed 计算属性应用computed 计算属性Vue本身支持模板中使用复杂表达式表现业务数据,但是这会使得模板内容过于杂乱,如果确有需求,可以通过computed 计算属性实现,computed 可以对其他data做复杂合成处理。语法:new Vue({ el:xx, data:xx, computed:{ // 属性名称:function(){} 普通函数赋值 // 属性名称(){} 简易成员函数赋值 属性原创 2020-12-03 09:24:10 · 606 阅读 · 0 评论 -
Vue插件的定义、配置和使用
Vue插件的定义、配置和使用Vue插件的基本使用规范定义插件export default () => { // return的函数本质上就是Vue插件 return (Vue) => { Vue.prototype.request = () => { // 这里实现调用接口的动作 console.log('request') } }}入口文件中配置插件// main.jsimport request from '@原创 2020-12-02 09:21:40 · 540 阅读 · 0 评论 -
vue2数据双向绑定原理之Object.defineProperty()监听对象属性的变化
Object.defineProperty()监听对象属性的变化Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。语法:Object.defineProperty(obj, prop, descriptor)// 参数:// obj: 要在其上定义属性的对象。// prop: 要定义或修改的属性名称。// descriptor: 要被定义或修改的属性描述符。/原创 2020-10-30 09:28:28 · 2428 阅读 · 0 评论 -
Vue缓存组件keep-alive的应用
缓存组件keep-alive什么是缓存组件keep-alive:vue.js本身提供了一个名为 keep-alive的缓存组件,其可以对目标组件的状态进行保存,即给缓存起来,当重复应用组件的时候,不会执行销毁、创建的程序,相反执行的是之前缓存的信息,既不用发送新请求耗费资源,同时用户显示速度很快,体验很好。keep-alive官网keep-alive的原理:组件缓存就是一旦组件被创建, 那么就不会被销毁, 不执行生命周期销毁钩子函数(beforeDestroy/destroyed),虽然跳转原创 2020-10-21 13:36:31 · 257 阅读 · 0 评论 -
Vue.nextTick使回调函数在数据变化DOM更新完成后调用
Vue.nextTick(callback)虽然 vue 是通过数据驱动视图, 但是数据变化之后,Vue 异步执行 DOM 更新,视图的更新并没有立即完成。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。nextTick官网this.$nextTick() 方法可以保证:数据变化、视图通过响应式完成页面更新后,调用回调函数。应用场景:Vue生命周期的created(原创 2020-10-21 09:25:38 · 1445 阅读 · 0 评论 -
vuex操作localStorage实现token数据管理
vuex管理token状态localStorage是浏览器技术,不是Vue的,其本身并没有“响应式”技术,故一个组件修改了localStorage的用户信息后,另外一个组件并不能马上get(获得)到 (除非页面刷新),用户体验不好。现在使用vuex技术,实现多个组件之间共享数据、更新数据,还有响应式效果,并且vuex的数据可以被vue很好的监听。vuex介入后的模式是:用户组件操控vuexvuex操控localStorage通过vuex操作localStorage实现token数据的管理。原创 2020-10-19 11:08:48 · 1963 阅读 · 1 评论 -
Vue子组件修改父组件传递的数据之sync应用
子组件修改父组件传递的数据子组件修改父组件传递来的数据,sync 应用。.sync官网详情方法1父组件:<com-button :yan="co"></com-button>子组件:<template> <div id="btn"> <button :style="{color:yan}">我是按钮</button> <button @click="yan='yellow'"&g原创 2020-10-15 14:28:54 · 861 阅读 · 0 评论