草庐IT

Vue-Instant

全部标签

学习vue3(一)-基本使用+router

1.生命周期和组合式api(CompositionAPI)在原有vue2的生命周期基础上在前缀加上on,例如:onMounted;使用组合式api的方法,生命周期函数需要引入使用import{onBeforeMount}from"vue";onBeforeMount(()=>{})Tips:setup是围绕beforeCreate和created生命周期钩子运行的,所以不需要显式地去定义。2.响应式赋值和写法使用ref,reactive来分别复制普通数据类型和复杂数据类型,使用组合式api写法,依然要进行引入。例如:import{ref,reactive}from"vue";letobj=re

vue3.2 setup 语法糖常用简介

提示:Vue3.2版本开始才能使用语法糖!在Vue3.0中变量必须return出来,template中才能使用;而在Vue3.2中只需要在script标签上加上setup属性,无需return,template便可直接使用,非常的香啊!提示:以下是本篇文章正文内容,下面案例可供参考只需在script标签上写上setup代码如下(示例):由于setup不需写return,所以直接声明数据即可代码如下(示例):import{ref,reactive,toRefs,}from'vue'constdata=reactive({patternVisible:false,debugVisible:fals

在Vue中获取DOM元素的实际宽高

最近使用D3.js开发可视化图表,因为移动端做了rem适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOMAPI的使用,避免遗忘这里总结一下。Vue&&DOM一、获取元素在Vue中可以使用ref来获取一个真实的DOM元素。为了保险起见,所有的DOM操作建议都放在$nextTick()方法中。exportdefault{mounted(){//获取DOM元素this.$nextTick(()=>{let$ele=this.$refs.wrap})},}.box{width:100%;height:200px;background-color:pink;}二、获取元素宽高使用offs

Instant-ngp linux训练数据集

本教程使用的环境及版本操作系统:Ubuntu18.04.5(无GUI)GPU:RTX3090cuda:11.3cmake:3.24GCC:7.5G++:7.5python:3.9OptiX:7.5COLMAPInstant-ngplinux环境部署参考地址:https://www.jianshu.com/p/02c3d3cce99bInstant-ngp官方文档地址https://github.com/NVlabs/instant-ngp/blob/master/docs/nerf_dataset_tips.md目的linux完成自有数据集训练及模型导出问题说明非GUI环境下,执行以下命令后,

Vue3写一个后台管理系统(4)RBAC权限受控体系的实现

一、RBAC权限控制体系要实现动态Menu,我们需要先来统一一下认知,明确项目中的权限控制系统。网上找了张图,我们可以大致的看下image.png从图中,我们可以简单的这样理解RBAC权限控制体系。用户:我们登录后台管理系统的账号。举个例子:张三这个人,我们可以认为他是一个用户角色:用户的“头衔”。张三是一个销售经理,那么“销售经理”,我们可以认为他是一个角色。权限:每个角色都有不同的权限。“销售经理”这个角色,可以查看、删除、编辑客户资料,那么张三就可以查看、删除、编辑客户资料,这时候如果有个李四,李四是普通的“销售”的角色,而普通的“销售”只能查看客户信息,不能删除、编辑客户信息,所以李四

一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)

目录一、前言完整内容请关注:开始前的准备: 二、slot插槽的基本使用子组件:父组件:展示效果:三、域名插槽的基本使用子组件:父组件:效果展示:注意:四、如何通过slot从子组件获取内容子组件父组件效果展示:五、作用域插槽案例子组件父组件效果展示:一、前言完整内容请关注:https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482开始前的准备:首先创建两

基于Java+SpringBoot+Vue前后端分离社区养老服务平台设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》​系统介绍:互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱,出

vue父子组件之间传值的方法

vue父子组件之间传值的方法一、基本父子传值父传子方式:props效果:把父组件的fatherName属性传入子组件,在子组件中使用父组件代码:父组件:{{fatherName}}子组件代码:子组件:{{fatherName}}exportdefault{props:['fatherName']}子传父方式:$emit效果:在子组件触发事件,修改父组件的fatherName属性父组件代码:父组件父组件:{{fatherName}}importSonVuefrom'./components/Son.vue';exportdefault{data(){return{fatherName:'yj'}

【Vue2+微信小程序】在微信小程序中嵌入webview并获取onMessage

前言实现在微信小程序中嵌入一个webview页面,并且在这个webview中进行操作后,能返回某些信息给到小程序中继续处理。使用:vue2+小程序原生开发。正文关于如何使用微信小程序访问外部链接,这篇文章说得很详细了。主要就是同域名下微信小程序新建嵌入webview的中间页web-viewsrc="url地址"bindmessage="onMessage">/web-view>jsPage({onMessage(e){console.log(e.detail.data);//e.detail.data就是vue里传来的参数,后续进行处理即可}});vue2index.html中引入sdk。sc

VUE屏幕整体滚动——滑动或滚轮(原生方法)

文章目录前言一、基础函数1、页面部分2、页面切换使用的函数二、鼠标的滚轮控制实现切换三、移动端触摸实现切换总结前言一年嗖的一下儿就过去了,最近几年很流行搞年终总结,因此也研究了一下相关的内容,主要记录一下手机端与电脑端分辨通过滑动与滚轮使得整个屏幕滚动的效果一、基础函数不论是使用滑动还是滚轮的方式基础的转换逻辑是相通的1、页面部分首先完成页面部分的搭建,@mousewheel、@DOMMouseScroll主要是为了监听滚轮的事件。@touchstart、@touchend、@touchmove为触摸事件。template>divclass="fullPage"ref="fullPage">d