草庐IT

Vue-Instant

全部标签

在Vue2和Vue3中JSX的使用集锦

Vue2安装JSX支持有时候,我们使用渲染函数(renderfunction)来抽象组件,而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大,体验不佳,这个时候就派JSX上场了。然而在Vue3中默认是带了JSX支持的,而在Vue2中使用JSX,需要安装并使用Babel插件:@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props安装脚本npminstall@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props配置.babelrc文件module.e

vue2配置IP地址访问项目

正常情况下,我们运行完项目都是这样的效果。上面的本地local地址下面是自己电脑本地ip的访问方式。无论哪种访问都可以打开项目,但有的项目中运行完只有local地址却丢失了本地ip地址,下面将介绍如何添加本地ip。在config.js文件中//host:'localhost'//将localhost进行替换成0.0.0.0host:'0.0.0.0',port:8080,package.json配置文件//在这句代码后面添加--host0.0.0.0"比如"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.c

vue3 生命周期

一、组件的生命周期1.组件运行的过程35.png组件的生命周期指的是:组件从创建——运行(渲染)——销毁的整个过程,强调的是一个时间段。2.如何监听组件的不同时刻vue框架为组件内置了不同时刻的生命周期函数,生命周期函数会伴随着组件的运行而自动调用。当组件在内存中被创建完毕之后,会自动调用created函数当组件被成功的渲染到页面上时,会自动调用mounted函数当组件被销毁完毕之后,会自动调用unmounted函数LifeCycle.vueLifeCycleexportdefault{name:"LifeCycle",created(){//组件在内存中创建完毕了console.log("我

Vue3.0 | vue3的新特性

Vue3的变化官网地址:https://v3.cn.vuejs.org/guide/migration/introduction.html一、对比vue2的变化1.优点vue3支持vue2的大多数特性,实现对vue2的兼容vue3对比vue2具有明显的性能提升打包大小减少41%初次渲染快55%,更新快133%内存使用减少54%更好的支持TypeScript使用Proxy代替defineProperty实现响应式数据2.性能提升的原因静态标记vue2从根节点开始对虚拟dom进行全量对比(每个节点不论写死的还是动态的都会一层一层比较)vue3新增了静态标记与上次虚拟dom对比的时候,只对比带有pa

Java SpringBoot Vue物联网系统

一个简单易用的物联网平台,可用于搭建物联网平台以及二次开发和学习。适用于智能家居、智慧办公、智慧社区、农业监测、水利监测、工业控制等。系统后端采用Springboot;前端采用Vue;消息服务器采用EMQX;技术栈服务端相关技术:Springboot、MyBatis、SpringSecurity、Jwt、Mysql、Redis、TDengine、EMQX、Netty等开发工具:IDEAWeb端相关技术:ES6、Vue、Vuex、Vue-router、Vue-cli、Axios、Element-ui等移动端:包含android和ios安装包系统功能权限管理:用户管理、部门管理、岗位管理、菜单管理

[VUE]Element_UI 实现TreeSelect 树形选择器

文章目录前言1、安装2、引用3、使用前言最近在做一个人员管理系统,在增改用户信息时,可能会设置用户所在的部门,因为部门是多级的,于是想到用Element_UI的TreeSelect组件实现效果:1、安装npminstall--save@riophae/vue-treeselect安装完成后,打开package.json可以看到@riophae/vue-treeselect的版本:2、引用在需要使用TreeSelect的组件中引入importTreeselectfrom"@riophae/vue-treeselect";import"@riophae/vue-treeselect/dist/vu

vue实现下载本地文件

//创建一个标签consta=document.createElement('a');//给a标签的href属性值加上地址,注意:这里是绝对路径,不用加点.a.href='/xxxTemplate.xlsx';//设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可a.download='xxx模板.xlsx';//障眼法藏起来a标签a.style.display='none';//将a标签追加到文档对象中document.body.appendChild(a);//模拟点击了标签,会触发标签的href的读取,浏览器就会自动下载了a.click();//一次性的,用

Vue-根据角色生成动态路由及菜单-1-vue脚手架创建项目

根据登录用户的角色,生成路由后addRoute、生成菜单栏基本思路:    1.用户在登录页输入用户名+密码请求后端 login接口 拿到 token 后保存到cookie或sessionStorage中;    2.接着携带拿到的token请求后端 userInfo 接口,获得用户基本信息及角色role;    3.前端维护路由表,除了不需要权限限定的页面外其余每个路由添加meta数据,格式如 meta:{role:['admin']},表示该路由页面可以被哪些角色访问;    4.用userInfo接口拿到的role数据,过滤出路由表中,当前用户能访问的路由并保存到Vuex中,使用Vue-

Vue.js基础-14-axios(json-server,get,post,put,delete,传参,Query,Params,Body)

引用:1.创建json-server(工具准备,非必要)创建一个json-server服务,以便为之后axios练习提供各种访问方法。1.1安装npminstall-gjson-server1.2启动服务配置服务创建shibi-test目录,并在目录下创建db.json文件,内容如下:{"xishu":[{"id":1,"name":"关羽","attack":93},{"id":2,"name":"张飞","attack":91},{"id":3,"name":"赵云","attack":95}],"dongwu":[{"id":1,"name":"吕蒙","attack":82},{"id

SpringBoot + Vue前后端分离项目接入CAS单点登录SSO(详细实现过程) - 踩坑记录,源码分析、扩展

目录前言背景实现分析实现步骤1.身份认证实现自定义的重定向策略应用自定义的重定向策略2.响应401前端拦截4013.票据检验实现自定义的票据校验过滤器应用自定义的票据校验过滤器4.效果演示附录:原理分析1.CAS身份认证关于ajax与重定向使用401响应来代替重定向2.CAS票据检验前言CAS(CentralAuthenticationServer)是Yelu大学研发单点登录解决方案。它包含Server端和Client端,Server一般是每个公司部署一个,Client端则由各个系统自行引入。本文是Java项目,所以本文讨论的都是CAS的Java客户端。CAS客户端主要做两件事,身份认证(默认