vue-个人杂记

vue-组件基础

一、什么组件组件(Component)是Vue.js的重要组成部分。能够让你在复杂的应用中拆分成独立模块。使用组件可以扩展HTML元素，封装可重用的代码，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。Vue提供一个组件系统，提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一
杨健kimyeung·2023-11-02 20:03

vue-浏览器安装Vue开发者工具

极简插件：下载->开发者模式->拖曳安装->插件详情允许访问文件网址：https://chrome.zzzmh.cn/index搜索VueDevtools下载下来的安装包先解压然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项，然后点进去管理扩展程序，进入后开启右上角的开发者模式将刚刚解压的CRX文件拖拽到扩展程序里点击详情，开启允许访问文件网址可以把vue拖拽到前面
小沐°·2023-11-02 14:22

vue-全局通讯层

今天分享的主题是复杂组件中的事件通讯，内容包括建立通讯层的出发点，建立过程中的方案确定，以及最终实现。建立通讯层的出发点我们来思考下复杂组件的业务场景，比如商品组件的商品卡片，组件拆分需要细致到商品图片，商品服务标签、氛围标签，商品价格，按钮等，很多触发事件都是指向跳转商祥页面，但是这些小组件的层级不是相同的而是存在嵌套关系，那就需要一个全局的通讯层，来接收共用的事件消息通知。通讯层方案装载/卸载
KIKIWS·2023-11-02 11:42

vue+springboot前后端分离集成ueditor，避坑之图片上传出错、无法回显

不管你从网上或者官方源码，你得获取一个ueditor的开发源码包，像下图这样的结构，vue-
nicohuhu·2023-11-01 20:18

VUE-首页导航+左侧菜单

1.Mock.js介绍前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：1.老大，接口文档还没输出，我的好多活干不下去啊！2.后端小哥，接口写好了没，我要测试啊！前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。众所周知Mock.
Quer.·2023-10-30 20:53

Vue（1登录注册、2.mockjs介绍，首页导航+左侧菜单、）

一、vue-登录注册目录1.搭建项目1.1使用vue-cli创建项目1.2通过npm安装element-ui1.3导入组件2创建登录页面2.1创建登录组件2.2引入css（css.txt）2.3配置路由
m0_l5z·2023-10-30 20:46

web页面国际化，web页面中英文切换，vue项目国际化----------vue-i18n详细用法。

1、下载vue-
果冻~·2023-10-30 14:10

Vue-懒加载(判断元素是否在可视区域内)

上公式：元素距离顶部高度（elOffsetTop）>=dom滚动高度（docScrollTop）并且元素距离顶部高度（elOffsetTop）importDefectFlightPatternChartfrom'~/components/metrics/defect-flight-pattern-chart'exportdefault{components:{DefectFlightPattern
ZHero_·2023-10-30 11:30

在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统---(一)UI界面搭建之head头部

本文需要有一定的前端基础和封装思想提示：以下是本篇文章正文内容，下面案例可供参考一、准备工作首先，你得使用创建一个vue-
火锅店在逃毛肚·2023-10-29 04:41

基于vue3+ts+scss的后台管理系统(一)

Node.js版本>=12.0.0安装方式（不使用模板）：#使用NPM:npminitvite@latest#yarn【推荐】yarncreatevite#pnpmpnpmcreatevite填写项目名->选择vue
烧脑的小白·2023-10-27 12:41

vue-计算属性computed如何传参

在vue中，其实计算属性computed是不能直接传参的，如果你直接往计算属性里的方法传参，会报错如下：其实针对简单的计算使用方法methods同样可以实现效果，但是我们知道，计算属性computed是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。但是如果使用方法methods，就会出现每当触发重新渲染时，调用方法都会再次执行函数；所以我们还是更倾向于使用计算属性；
初心w50t2·2023-10-27 10:25

Vue + TypeScript 实战（五）全局设置

一般用于部署测试生产环境：发布到线上的版本1.1配置启动命令配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等在package.json文件中这样设置："scripts":{"serve":"vue
Yushia-Lin·2023-10-26 08:57

Vue学习

Vue-渐进式JavaScript框架介绍vue中文网vuegithubVue.js是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？
weixin_30500105·2023-10-26 05:43

vue-表格树结构-懒加载-解决子节点修改删除后，不刷新的问题

问题：子节点修改删除后，子节点视图不刷新初次解决办法：exportdefault{inject:['sizeReload'],}子节点变化后执行：this.sizeReload()子节点变化后，进行页面的刷新操作，但是刷新后，节点会自动折叠，且全部刷新用户体验不好。最终解决办法：效果图：data：
ccc_cccc_ccc·2023-10-26 02:59

vue-计算属性与钩子函数

计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：{{message.split('').reverse().join('')}}在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你
qq_42438026·2023-10-26 00:28

Vue-单文件组件使用说明

.vue文件.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js.vue文件由三部分组成：、、htmlcssjsvue-loader浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader类似的loader还有许多，如：html-loader、css-loa
刘远山·2023-10-24 16:09

粤嵌实训医疗项目day02（Vue + SpringBoot）

目录一、创建vue项目并运行二、vue-cli中的路由使用三、element-ui框架、实现页面布局以及vue-路由四、前端登录页面五、user登录后端接口完善【后端】六、user登录前端-请求工具-请求发起
Alphamilk·2023-10-23 17:55

vue-复用混合

混合对象概念一个对象。可以包含任意组件选项,用于分发Vue组件中可复用的功能。减少了代码的书写。定义//定义varmyMixin={created:function(){this.hello()},methods:{hello:function(){console.log('hellofrommixin!')}}}//使用varComponent=Vue.extend({mixins:[myMix
一点金光·2023-10-23 10:43

Vue 图片懒加载怎么做？

vue-lazyload插件：npminstallvue-lazyload2.在main.js中引入vue-lazyload，并进行配置：importVuefrom'vue'importVueLazyloadfrom'vue
喵喵酱仔__·2023-10-22 22:10

Vue-计算属性和侦听器

章节目录：一、计算属性二、侦听器三、过滤器四、计算属性vs侦听器五、结束语一、计算属性某些结果是基于之前数据实时计算出来的，我们可以利用计算属性（computed）。在data.computed属性中进行计算的过程构造。计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。基于此对于任何复杂逻辑，你都应当使用计算属性，而如果你不希望有缓存，就请用方法（method
饺子泡牛奶·2023-10-22 19:41

Vue-多个实例对象

Vue.js{{title}}{{greet}}{{title}}{{greet}}改titlevara=newVue({el:"#vue-app-one",data:{title:"one"},methods:{},computed:{greet:function(){return"111";}}});varb=newVue({el:"#vue-app-two",data:{title:"two
linlu_home·2023-10-19 17:56

【Vue】v-if和v-show的区别

v-if：按条件渲染，判定为true时渲染，否则不渲染v-show：按条件展示，区别在于切换的是display属性的值Vue-指令-v-if与v-show年龄经判定,为:年轻人(35及以下)35&&age
have_to_be·2023-10-19 08:52

手撕Vue-数据驱动界面改变下

经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到Nue中，实现数据驱动界面改变。在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二步就是在第一步的基础上，给所有属性都添加观察者对象，当数据发生变化时，发布订阅触发观察者对象的回调函数重新渲
Jonathan丶BNTang·2023-10-19 03:20

手撕Vue-监听数据变化

经过上一篇的介绍，已经实现了将模板编译成具体数据，接下来要介绍的是如何监听数据的变化，本章主要完成这个需求即可。在我们文章的开始，我写了一个Vue双向数据绑定原理的文章当中封装了一个Observer类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。所以我先将这个类拿过来，稍微修改一下，没有这个类的源码可以去我之前的文章中查看，或者我这里也贴一下：class
Jonathan丶BNTang·2023-10-19 03:20

手撕Vue-编译模板数据

经上一篇编译指令数据后，我们已经可以将指令数据编译成具体需要展示的数据了，上一篇只是编译了指令数据，还没有编译模板数据，这一篇我们就来编译模板数据。也就是{{}}这种模板的形式我们该如何编译，其实和指令数据编译的思路是一样的，废话不多说，直接上代码。改造一下buildText方法，让它支持编译模板数据，调用CompilerUtilcontent方法，传入模板数据，返回编译后的数据，然后再将编译后的
Jonathan丶BNTang·2023-10-19 03:20

手撕Vue-数据驱动界面改变上

经过上一篇的介绍，已经实现了监听数据的变化，接下来就是要实现数据变化后，界面也跟着变化，这就是数据驱动界面改变。想要实现数据变化之后更新UI界面，我们可以使用发布订阅模式来实现，先定义一个观察者类,再定义一个发布订阅类,然后再通过发布订阅的类来管理观察者类。接下来我们就来实现这个代码。定义一个观察者类，观察属性的变化，当属性变化时，触发回调函数。classWatcher{constructor(v
Jonathan丶BNTang·2023-10-19 03:18

vue-路由篇页面跳转和页面参数传递

简介：路由文件内容介绍目录简介：路由文件内容介绍一.页面跳转二.页面传参，获取页面传递过参数三.路由导航待整理定义了需要跳转的文件位置映射关系，每一个路由对应一个组件。/***@file主路由配置页*/importVuefrom'vue'importRouterfrom'vue-router'//懒加载，可以节省收屏加载时间constloadingModule=()=>import('@/comp
qq_35321405·2023-10-18 16:52

vue-复制功能实现--clipboard.js

官网：clipboard安装依赖包装npminstallclipboard--save需求实现页面单个复制//vue中复制//js中importClipboardfrom"clipboard";//初始化---created生命周期中varclipboard=newClipboardJS('.btn')//成功之后的操作clipboard.on('success',function(e){Toas
hyduan200·2023-10-18 14:26

手撕Vue-编译指令数据

经过上一篇的分析，完成了查找指令和模板的功能，接下来就是编译指令的数据了。所以本章节主要处理的方法则是buildElement方法，我们先分析一下我们所拿到的数据在进行编码，这样会更加清晰一些。我将name,value打印出来，分别对应的值是name:v-model,value:name，在今后我们的命令中可不止只有v-model，还有v-text、v-html、v-on等等，所以我们需要对这些指
Jonathan丶BNTang·2023-10-17 11:59

vue-实例方法 / 事件

vm.$on(event,callback)参数：{string|Array}event(数组只在2.2.0+中支持){Function}callback用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。示例：vm.$on('test',function(msg){console.log(msg)})vm.$emit('test','h
JK丶帝·2023-10-16 21:01

vue-按键修饰符

按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数v-on:keyup.修饰符.修饰符】、.enter.tab.delete(针对delete和backspace两个按键).esc.space.esc.space.up.down.left.right系统修饰符必须按下才触发.ctrl.alt.shift.meta:mac针对的是command键盘，windows针对的windows
wuhuhuan·2023-10-16 13:12

vue-下载图片和word（兼容IE9+）

背景：下载图片和word，接口返回的图片是base64，word返回的是文件流（后台java要用apache的base64转图片，不能用java自带的base64解析图片）针对IE9已上代码参考IE9参考针对谷歌火狐谷歌火狐代码参考：if(navigator.userAgent.indexOf("MSIE9.0")>0){layer.msg('抱歉，此功能仅支持IE10及以上');return}l
Miamin·2023-10-15 23:37

Vue-组件自定义事件

父组件使用props传递数据给子组件，子组件给父组件通信除了通过父组件提前给子组件传递一个函数，子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中，这里再提供一种方法：Vue的自定义事件，本文将详细介绍Vue自定义事件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定自定义事件的方式❤️第一种方式❤️在父组件中：或methods
奶茶丶·2023-10-14 22:03

VUE-组件以及插槽父子间传递（更新版）

目录一、1.vue组件二、全局组件定义的四种方式注意！！！！！！！template标签中只能有一个根标签注意:不能使用内置或保留的HTML元素作为组件id名称三、组件中展示数据和响应事件1.在组件中，data需要被定义为一个方法，其目的是为了实现数据隔离2.在组件中同样拥有生命周期3.通过component标签加is属性的方式来确定显示的是哪个组件4.transition实现动画,加上mode属性
前端小菜凯·2023-10-13 08:20

vue配置@根目录

vue-配置-@根目录在日常开发中，我们导入文件写的是相对位置，和绝对位置但是有些人可能知道@/store是什么意思，但是自己启动一个自己的vue项目却发现不可以？？！！什么情况？这是玄学吗？！不！
厚渡·2023-10-13 03:43

Vue-脚手架初始化电商后台

1电商后台管理系统的技术选择前端项目技术栈VueVue-routerElement-uiAxiosEcharts2项目初始化2.1通过可视化面板创建项目win+r=>cmd=>vueui2.2选择项目的存储目录2.3项目名称2.4手动配置项目2.5安装Babel、Router、Linter/Formatter2.6最后一个配置2.7创建项目保存为新预设2.8配置Element-ui组件库选择插件=
tzforevereer·2023-10-12 22:45

vue 初始化请求例子_vue-简单例子初始化(示例代码)

1.vue(function(global,factory){//根据当前环境中用的ADM或COMMONJS格式的模块规范或者未用模块管理规范，将Vue(函数)对象返回给对应变量属性(或全局变量)，typeofexports===‘object‘&&typeofmodule!==‘undefined‘?module.exports=factory():typeofdefine===‘functio
Alysa其诗闻·2023-10-12 22:15

vue 初始化请求例子_vue-简单例子初始化

1.vue(function(global,factory){//根据当前环境中用的ADM或COMMONJS格式的模块规范或者未用模块管理规范，将Vue(函数)对象返回给对应变量属性(或全局变量)，typeofexports===‘object‘&&typeofmodule!==‘undefined‘?module.exports=factory():typeofdefine===‘functio
powerelectricdog·2023-10-12 22:13

vue-（2）Vue_Cli/router

03-Vue_Cli1、什么是VueCLICLI俗称脚手架。VueCLI是一个官方发布vue.js项目脚手架，可以快速搭建Vue开发环境以及对应的webpack配置。2、使用2.1、安装淘淘镜像npminstall-gcnpm--registry=https://registry.npm.taobao.orgnpm全称：NodePackageManager2.2、webpack全局安装(-g表示全
sc_deams·2023-10-12 22:39

vue-实例方法 / 数据

vm.$watch(expOrFn,callback,[options])参数：{string|Function}expOrFn{Function|Object}callback{Object}[options]{boolean}deep{boolean}immediate返回值：{Function}unwatch用法：观察Vue实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新
JK丶帝·2023-10-12 14:08

Vue-组件及组件间的通信方式

定义组件的方式1）什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（也相当于对象）2）定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件//方式1先创建组件构造器，然后由组件构造器创建组件//1.使用Vue.extend创建一个组件构造器varMyComponent=Vue.extend({templat
刘远山·2023-10-12 05:59

vue-组件

文章目录1.组件使用1.1组件创建1.2组件注册（局部和全局）2.组件通信（传值）2.1父传子（使用prop）2.2子传父（ref）2.3自定义事件（即事件车，$emit触发，v-on监听）2.4非父子组件传值（$emit$on,newVue()）3.插槽（slot）3.1(无名)插槽3.2具名插槽（name='',v-slot:）4.动态组件5.异步组件1.组件使用1.1组件创建创建所需的vue
闵农·2023-10-12 05:50

Vue-组件通信6种方式

目录组件通信6种方式1.props2.自定义事件3.全局事件总线$bus4.pubsub-js5.Vuex6.插槽自定义事件深入v-model深入v-model基本使用：收集表单数据v-model实现原理：:value+@input深入学习v-model，实现父子组件数据同步（父子组件通信）属性修饰符sync\$attrs与$listeners\$children与$parentref$child
七里香777·2023-10-12 00:01

前端-Vue-开发指南

VueJS开源文档拉入vscode安装node.js安装vue脚手架components:组件router：路由创建新组建：assets：系统图片存放地址main.js：vue脚手架对象存放地（新的包要放在里面）属性computedslot插槽errorStringsmustusesinglequotequotes前端框架——Vue小驿站（1）Vue数据驱动的概念模型Vue常用指令-----元素S
amingMM·2023-10-11 08:55

VUE-基础指令

第一节、vue提供的指令所谓的指令：就是以v-开头的命令，每一个指令都有自己的功能位置：标签内部（同属性）比如：{{name}}改变exportdefault{data(){return{name:"张三",}}}注意：1tempalte中是可以使用data定义的变量具体：{{变量}}或者指令的引号中="变量"2指令中默认也是需要写变量，非要写常量，也需要添加’‘，和{{}}类似3无论是{{}}还
巷子里有条狗·2023-10-11 06:10

解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

如果所示：当我利用html2canvas转换成图片后,然后使用print-js打印多张图片,第一张会出现空白页打印组件可参考这个:Vue-使用html2canvas和print-js打印组件解决:因为是使用
Sunny·2023-10-10 21:08

vue-实战记录-前端导出excel文件、pdf文件、word文件

一、excel文件导出1、引入npm包npminstall--savetable-xlsx@pengchen/xlsx第三方包文档：https://pengchen96.github.io/table-xlsx/docs/tutorial-basics/start表格支持行/列合并2、定义导出函数/***exporttable*@paramdata表格数据*@paramcolumns表格表头*@p
前端不加班·2023-10-10 18:16

Vue-纯前端导出word文档

在项目中，我们可以借助后端返回文件流实现文件下载。如果前端有数据，也可以借助前端框架进行下载。本文将介绍如何在前端纯js实现word文档导出。1.组件介绍要实现前端纯js导出word文档，我们需要用到docxtemplater，jszip-utils，file-saver三个组件，接下来简要的介绍以下三个组件。1.1docxtemplaterdocxtemplater使用JSON数据格式作为输入，
yichen_china·2023-10-10 14:30

（一）Vue-路由

路由使用静态路由//路由规则constroutes=[{path:'/',name:'Index',component:Index},{path:'/blog',name:'Blog',//routelevelcode-splitting//thisgeneratesaseparatechunk(about.[hash].js)forthisroute//whichislazy-loadedwhe
JerrySi·2023-10-10 12:54

VUE-阿里云OSS上传组件

根据项目需求封装的一个阿里云OSS上传组件，可进行图片上传和视频上传。上组件代码：uploadImageOrVideo(file)">uploadImageOrVideo(file)">选择视频视频上传中...取消上传视频预览//下载oss模块后，引入使用importOSSfrom'ali-oss'letclientArr=[]exportdefault{props:{uploadType:{//
wumin_12345·2023-10-10 04:12
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他