![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3基础
文章平均质量分 96
VillanelleS
Und wenn du lange in einen Abgrund blickst, blickt der Abgrund auch in dich hinein.
Friedrich Nietzsche
展开
-
Vue进阶之Vue无代码可视化项目(五)
全部代码:LayoutView.vue全部代码:stores/debug.ts全部代码:stores/editor.ts跨模块的数据需要存在store中AppNavigator.vue全部代码:全部代码:store/editor.ts全部代码:LeftPanel.vue全部代码:LayoutView.vue全部代码:原创 2024-06-24 16:42:17 · 943 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(四)
创建LeftPanelLayoutView.vuebase.css全部代码:LeftPanel.vue分类:流式、自由、grid、retoolpackage.json:创建文件componentsSmoothDndSmoothDndContainer.ts - 容器SmoothDndDraggable.ts - 拖拽对象utils.tsSmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLe原创 2024-06-05 00:20:12 · 797 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(三)
stores/counter.ts创建editor.ts文件LayoutView.vueicon-park githubicon-park官网store/debug.ts创建debug.ts文件src/components/AppNavigator.vuesrccomponents_test_AppNavigator.tsAppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式创建rese原创 2024-06-02 16:41:04 · 1058 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(二)
创建ActionsView、DataSourceView、LayoutView三个文件。删除示例文件AboutView、AboutAboutView、HomeView三个文件。原创 2024-06-01 22:04:29 · 862 阅读 · 0 评论 -
Vue进阶之Vue无代码可视化项目(一)
eslint跑起来的过程中需要指定一个env环境,这个千万不要忘记了。除了已有的基础架子之外,还要在这基础上再加一些规范化的产物。.vue,.js相关的内容用eslint做规范检查。git commit -m “规范化相关内容”全程参与了 - 把控/管控App的生命周期。创建stylelint.config.cjs。创建custom-words.txt。stylelint检查样式相关的。像这样就是暂时没大问题了。设置npm官方下载源。原创 2024-05-31 00:51:59 · 819 阅读 · 0 评论 -
Vue进阶之Vue项目实战(四)
编辑器 -> 管理端发布上线 ->应用端但是一般很多公司产品的管理端和应用端结合,进行高度复用。这是因为,在管理端进行拖拽的时候,是比较消耗性能的,要更好的考虑性能,所以很多产品都会用 canvas,用画布的形式画、绘制 对齐的网格线,或者编排过程中的辅助线;但是在渲染过程中,在应用端是没有任何的辅助线和网格线,所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用,但是在页面中,编排引擎,渲染器方面,他们俩不是高度复用illaretool。原创 2024-05-29 00:07:56 · 1038 阅读 · 1 评论 -
Vue进阶之Vue项目实战(三)
package.json:图表渲染器(图表组件)一般负责:基于数据协议的图表渲染逻辑渲染逻辑:通用渲染逻辑、特殊渲染逻辑BarRenderer.vue、LineRenderer.vue,统一在ChartsRenderer.vue中进行分发渲染(在这一层将不同的图表类型差异磨平)图表的事件处理图表举例:创建 ChartsRenderer.vuecomponentsChartsRenderer.vueApp.vue项目中:ChartsDataTransformer.t原创 2024-05-23 23:55:24 · 768 阅读 · 2 评论 -
Vue进阶之Vue项目实战(二)
使用代码分割来解决。不管是useForm,还是自己去封装表单,表格的插件,都需要将UI层(组件)和状态层(CompositionAPI负责产出的状态数据)分离,在用的地方,使用useForm,useTable等等解构出来。1.设计理念比较好 基于hooks实现的/CompositionAPI实现的,能够解决很多事情,例如,表单类型校验规则,动态表单,表单间联动,统一的表单状态处理等等。如果组件多了,渲染引擎变得慢或卡,一家公司的商城,首页用了无代码平台来搭建,首页要等一会才出来,这个如何解决?原创 2024-05-07 00:44:44 · 681 阅读 · 0 评论 -
Vue进阶之Vue项目实战(一)
git hooks提供的pre-commit等,可以在开发的时候,在提交对应的时机,发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下,失败的话全部打回,不会提交。husky是一个钩子工具,但是钩子本身不是husky的,钩子是属于git的。加依赖,devDependencies加。以后写脚本的时候可以尝试用zx写。node版本:20.11.1。pnpm版本:9.0.4。帮助轻松拦截hooks。原创 2024-05-03 14:30:30 · 1264 阅读 · 0 评论 -
Vue3技术8之Fragment、Suspense、Vue3中其他的改变
什么是Teleport?——Teleport是一种能将我们的组件html结构移动到指定位置的技术< teleport to = " 移动位置 " > < div v-if = " isShow " class = " mask " > < div class = " dialog " > < h3 > 我是一个弹窗 < button @click = " isShow=false " > 关闭弹窗原创 2023-04-25 18:15:31 · 834 阅读 · 2 评论 -
Vue3技术7之toRaw与markRaw、customRef、provide与inject、响应式数据的判断、组合式API的优势分析
Demo.vue案例:(并且还具备防抖功能)set执行修改数据的过程:定时器实现防抖功能原理:实现祖孙组件间通信Child.vueSon.vue(2)后代组件中:响应式数据的判断App.vue使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改更加优雅的组织代码,函数。让相关功能的代码更加有序的组织在一起。原创 2023-04-25 16:15:47 · 1414 阅读 · 0 评论 -
Vue3技术6之toRef和toRefs、shallowReactive与shallowRef、readonly与shallowReadonly
作用:创建一个ref对象,其value值指向另一个对象中的某个属性应用:要将响应式对象中的某个属性单独提供给外部使用时toRefs与toRefshallowReactive:只处理对象最外层属性的响应式(浅响应式)shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理什么时候使用?(1)如果有一个对象数据,结构比较深,但变化时只是外层属性变化 ===> shallowReactive。原创 2023-04-24 10:56:23 · 453 阅读 · 0 评论 -
Vue3技术5之watchEffect函数、Vue3生命周期、自定义hook函数
watch的套路是:既要指明监视的属性,也要指明监视的回调watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像computed(1)但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值(2)而watchEffect更注重的是过程(回调函数的函数体), 不用写返回值//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 watchEffect(() => {原创 2023-04-20 09:54:08 · 629 阅读 · 0 评论 -
Vue3技术4之watch监视属性、watch时value问题
exportdefaultname'App'components原创 2023-04-18 18:03:47 · 774 阅读 · 0 评论 -
Vue3技术3之setup的两个注意点、computed计算属性
setup执行的时机在beforeCreate之前执行一次,this是undefinedsetup的参数(1)props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性(2)context:上下文对象① attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于②slots:收到的插槽内容,相当于③emit:分发自定义事件的函数,相当于this.$emit与Vue2.x中computed配置功能一致写法import {原创 2023-04-13 15:40:29 · 731 阅读 · 1 评论 -
Vue3技术2之ref函数、reactive函数、Vue3中的响应式原理
ref函数1. 作用:定义一个响应式的数据2. 语法:const xxx=ref(initValue)(1)创建一个包含响应式数据的`引用对象(reference对象,简称ref对象)` (2)JS中操作数据: xxx.value(3)模板中读取数据:不需要.value,直接:\{{xxx}}\3. 备注:(1)接收的数据可以是:基本类型、也可以是对象类型(2)基本类型的数据:响应式依然是靠Ob原创 2023-04-12 16:55:50 · 1008 阅读 · 0 评论 -
Vue3技术1之Vue3简介、创建Vue3工程、分析工程结构、安装开发者工具与初识setup
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)理解:Vue3.0中一个新的配置项,值为一个函数setup是所有Composition API(组合API)“表演的舞台”组件中所用到的:数据、方法等等,均要配置在setup中setup函数的两种返回值:(1)若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用(重点关注!(2)若返回一个渲染函数,则可以自定义渲染内容(了解)注意点:(1)尽量不要与Vue2.x配置混用。原创 2023-04-11 15:23:01 · 739 阅读 · 0 评论