VUE
文章平均质量分 70
dualven_in_csdn
布道者;创造者;
Mr writer。
目前博客内容主要偏重于个人技术记录,后面希望多些系列知识的整理。
展开
-
【vue ts Refactoring】vue前端知识整理与工程重构实践
将修改与变更的地方抽象出来,如果有需要增加的,只需要做最简单的类目的添加(在类目的变量里添加即可),而不需要修改js ,html代码。文件:src/views/auth/system/home/index.vue。节省代码:162+ 49=211行。(2)html的各项。原创 2023-02-01 14:04:51 · 148 阅读 · 0 评论 -
ts里引用js 兼容问题
虽然ts是 javascript的未来,在很多场景还是避免不了,有人在使用js.比如vue2+js, vue3+js;而你使用的vue3+ts,如果想借用下别人的组件,有时候需要把它引入进来。js的写法太粗矿,有很多不符合ts写法的,一个个去修改,没有耐心 ,有时候一个组件如果很复杂,你不敢确认修改的是否正确。所以,简单而直接的兼容很重要。原创 2022-12-21 13:34:27 · 1746 阅读 · 0 评论 -
培训设计相关整理
原创 2021-12-03 11:15:33 · 200 阅读 · 0 评论 -
前后端分离布署下,Nginx获取客户端IP实现
一、前言前文Nginx 解决WebApi跨域二次请求以及Vue单页面问题当中虽然解决了跨域问题带来的二次请求,但也产生了一个新的问题,就是如果需要获取用户IP的时候,获取的IP地址总是本机地址。二、原因由于Nginx反向代理后,在应用中取得的IP都是反向代理服务器的IP,取得的域名也是反向代理配置的Url的域名。三、解决方案解决该问题,需要在Nginx反向代理配置中添加一些配置信息,目的将客户端的真实IP和域名传递到应用程序中。同时,也要修改获取IP地址的方法。但是需要...原创 2021-05-11 09:59:33 · 884 阅读 · 0 评论 -
Vue3 ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,分享一下个人的理解。一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数,返回一个具有响应式状态的副本。获取数据值的时候直接获取,不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const state = reactive({ count: 0})// 打印count的值console.log(state.count)二、r.原创 2021-04-26 17:06:12 · 970 阅读 · 0 评论 -
详解vue生命周期(含有vue3说明)
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉:可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed先来一波代码,各位复转载 2021-04-26 16:05:46 · 559 阅读 · 0 评论 -
vue传值方式总结
一.父传子传递(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}代码示例://父组件<template> <div> <i>父组件</i> <!--页面使用--> <son :data='name'></son>转载 2021-04-26 14:00:16 · 202 阅读 · 0 评论 -
项目集成javamelody页面(‘X-Frame-Options’ to ‘sameorigin’)
项目集成javamelody页面springboot项目中整个javamelody监控,前端页面需要嵌入监控页面使用iframe报Refused to display in a frame because it set ‘X-Frame-Options’ to 'deny’的问题1.通过springboot整合javamelody向项目中引入依赖即可 <!-- javamelody监控 http://localhost:8080/monitoring--> ...原创 2021-04-20 16:56:33 · 470 阅读 · 0 评论 -
vue插槽(slot)详解
最近被问起是否了解vue的插槽(slot),咋一想发现,似乎很少用到这玩意。所以整理了下slot的一些用法。slot (父组件 在子组件<slot> </slot>处插入内容)Vue 实现了一套内容分发的 API,将<slot>元素作为承载分发内容的出口,这是vue文档上的说明。具体来说,slot就是可以让你在组件内添加内容的‘空间’。举个例子://子组件 : (假设名为:ebutton)<template> <div class=原创 2021-03-26 17:10:03 · 268 阅读 · 0 评论 -
如何使用proxyTable
1)为何要使用proxyTable 在VUE的这种项目里,一般前端用webpack进行开发与打包;后端使用express ,koa等框架。不管前端的代码是否与后端代码,物理上是否是同一个工程,不能逃避的是,前端在开发的时候,要调用后端的接口。但开发与生产调用的后端地址不同: 开发时,是分别启动的服务与端口;生产状态时,前端的代码已经打包放在服务端的工程里一起发布,作为同一个工程的...原创 2019-03-19 17:14:42 · 5735 阅读 · 0 评论 -
lavas自动创建目录及说明
lavas init 命令创建工程后,目录 如下。相应的目录说明,下文给出。├── assets│ ├── css│ ├── fonts│ └── stylus├── components------------被core/app.vue使用。│ ├── AppHeader.vue│ ├── AppSidebar.vue│ ├── ProgressBar.vue│ ├─...原创 2018-03-23 16:29:20 · 537 阅读 · 0 评论 -
vue页面与现有工程的几种集成方法
Vue是一种很优秀的语言,使用它,简单快捷。 生产出一些好的页面后,如何与现有的工程进行结合呢。以express工程为例(1) 页面很多,自成体系。 且页面是通过vue的脚手架工程里编译而成的。编译后的工程放在这个目录 /dist/将此目录作为静态目录,可以直接访问app.use(express.static(path.join(__dirname, 'dist原创 2018-01-09 17:51:55 · 4320 阅读 · 0 评论 -
spa ssr区别
https://www.cnblogs.com/tiedaweishao/p/6644267.html里面的关键语句为:"我们并没有多余的dom元素,就只有一个div,那么页面要怎么呈现呢?答案是js append,对,下面的那些js会负责innerHTML。而js是由浏览器解释执行的,所以呢,我们称之为浏览器渲染,这有几个致命的缺点:js放在dom结尾,如果js文件过大,那么必然...原创 2019-01-04 16:39:12 · 3187 阅读 · 0 评论