代码改变世界

随笔分类 -  Vue3

【vue3】详解单向数据流，大家千万不用为了某某而某某了。

2024-08-02 10:30 by 金色海洋（jyk）, 1061 阅读, 收藏,
摘要： 【vue3】详解单向数据流，大家千万不用为了某某而某某了。 总览 Vue3 的单向数据流 尽信官网，不如那啥。 vue的版本一直在不断更新，内部实现方式也是不断的优化，官网也在不断更新。 既然一切皆在不停地发展，那么我们呢？等着官网更新还是有自己的思考？ 我觉得我们要走在官网的前面，而不是等官网更新后，才知道原来可以这么实现。。。 我习惯先给大家一个整体的概 阅读全文

【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

2022-07-17 09:22 by 金色海洋（jyk）, 1392 阅读, 收藏,
摘要： 上一篇介绍了表单控件，这一篇介绍一下表单里面的各种子控件的封装方式。 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface。 定义子控件的的 props。 定义 json 文件。 基于 UI库 进行二次封装，实现依赖 json 渲染。 通过 slot 、 “字典”，实现自定义 阅读全文

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

2022-06-29 19:43 by 金色海洋（jyk）, 2079 阅读, 收藏,
摘要： 前面说了列表的低代码化的方法，本篇介绍一下表单的低代码化。 内容摘要 需求分析。 定义 interface。 定义表单控件的 props。 定义 json 文件。 基于 el-form 封装，实现依赖 json 渲染。 实现多列、验证、分栏等功能。 使用 slot 实现自定义扩展。 自定义子控件。（ 阅读全文

用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。

2022-06-23 09:11 by 金色海洋（jyk）, 2283 阅读, 收藏,
摘要： Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等，想来大家都很熟悉了，本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 基础使用方法 Vue3对于表单的绑定提供了一种简单的方式：v-model。对于使用者来说非常方便，v-model="name" 就可以了。 自己 阅读全文

【摸鱼神器】UI库秒变LowCode工具——列表篇（二）维护json的小工具

2022-06-10 08:34 by 金色海洋（jyk）, 1211 阅读, 收藏,
摘要： 上一篇介绍了一下如何实现一个可以依赖 json 渲染的列表控件，既然需要 json 文件，那么要如何维护这个 json 文件就成了重点，如果没有好的维护方案的话，那么还不如直接用UI库。 所以需要我们做一个维护 json 文件的小工具，维护 json 有多方法： 最基础的方法就是手撸，显然这个是下下 阅读全文

【摸鱼神器】UI库秒变LowCode工具——列表篇（一）设计与实现

2022-06-06 12:11 by 金色海洋（jyk）, 1371 阅读, 收藏,
摘要： 内容摘要： 需求分析 定义 interface 定义 json 文件 定义列表控件的 props 基于 el-table 封装，实现依赖 json 渲染 实现内置功能：选择行（单选、多选），格式化、锁定等。 使用 slot 实现自定义扩展 做个工具维护 json 文件（下篇介绍） 管理后台里面，列表 阅读全文

【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs

2022-05-25 08:52 by 金色海洋（jyk）, 6380 阅读, 收藏,
摘要： 做一个管理后台，首先要设置路由，然后配置菜单（有时候还需要导航），再来一个动态tabs，最后加上权限判断。 这个是不是有点繁琐？尤其是路由的设置和菜单的配置，是不是很雷同？那么能不能简单一点呢？如果可以实现设置一次就全部搞定的话，那么是不会很香呢？ 我们可以简单封装一下，实现这个愿望。 定义一个结构 阅读全文

被迫开始学习Typescript —— vue3的 props 与 interface

2022-05-19 15:24 by 金色海洋（jyk）, 9209 阅读, 收藏,
摘要： vue3 的 props Vue3 的 props ，分为 composition API 的方式以及 option API 的方式，可以实现运行时判断类型，验证属性值是否符合要求，以及提供默认值等功能。 props 可以不依赖TS，自己有一套运行时的验证方式，如果加上TS的话，还可以实现在编写代码 阅读全文

被迫开始学习Typescript —— class

2022-05-16 09:03 by 金色海洋（jyk）, 581 阅读, 收藏,
摘要： TS 的 class 看起来和 ES6 的 Class 有点像，基本上差别不大，除了 可以继承（实现）接口、私有成员、只读等之外。 参考：https://typescript.bootcss.com/classes.html 基本用法 我们可以定义一个 class，设置几个属性，然后设置一个方法，封 阅读全文

被迫开始学习Typescript —— interface

2022-05-14 10:11 by 金色海洋（jyk）, 537 阅读, 收藏,
摘要： 一开始以为，需要使用 class 来定义呢，学习之后才发现，一般都是使用 interface 来定义的。 这个嘛，倒是挺适合 js 环境的。 参考：https://typescript.bootcss.com/interfaces.html 简单接口 我们先来定义一个简单的接口 interface 阅读全文

结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

2022-05-11 13:46 by 金色海洋（jyk）, 847 阅读, 收藏,
摘要： 一开始学习了一下 Vuex，感觉比较冗余，就自己做了一个轻量级的状态管理。 后来又学习了 Pinia，于是参考 Pinia 改进了一下自己的状态管理。 结合 Vuex 和 Pinia， 保留需要的功能，去掉不需要的功能，修改一下看着不习惯的使用方法，最后得到了一个满足自己需要的轻量级状态管理 —— 阅读全文

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

2022-05-09 13:20 by 金色海洋（jyk）, 6817 阅读, 收藏,
摘要： webpack、vite、vue-cli、create-vue 这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。 先看这个表格： 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生 阅读全文

从 jQuery 到 Vue3 的快捷通道

2022-05-01 09:23 by 金色海洋（jyk）, 1852 阅读, 收藏,
摘要： 当初使用 jQuery 做了几个简单的项目，算是有一点点了解，现在学习Vue3，发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目！ CDN方式 jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。 而 Vue3 也支持直接用 阅读全文

简单了解一下pinia的结构

2022-03-25 13:51 by 金色海洋（jyk）, 1014 阅读, 收藏,
摘要： 随着 Vue3 的正式转正，Pinia 也渐渐火了起来。所以要更新一下自己的知识树了。这里主要是看看新的状态是什么“形态”。 状态的容器还是“reactive” 按照官网教程，做一个简单的例子： import { defineStore } from 'pinia' export const use 阅读全文

nf-Press —— 在线文档也可以加载组件和编写代码

2022-03-21 12:30 by 金色海洋（jyk）, 558 阅读, 收藏,
摘要： 如果帮助文档可以加载组件，那么在介绍的同时就可以运行演示demo，是不是很酷？ 如果可以在线修改运行代码，那么是不是更容易理解？ 上一篇 https://www.cnblogs.com/jyk/p/15994934.html 介绍了一下基本功能，这里介绍一下关于代码方面的功能。 源码和演示 http 阅读全文

vite2 打包的时候vendor-xxx.js文件过大的解决方法

2022-03-20 10:03 by 金色海洋（jyk）, 4130 阅读, 收藏,
摘要： vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some 阅读全文

基于 vite2 + Vue3 写一个在线帮助文档工具

2022-03-11 18:40 by 金色海洋（jyk）, 1641 阅读, 收藏,
摘要： 提起帮助文档，想必大家都会想到 VuePress等，我也体验了一下，但是感觉和我的思路不太一样，我希望的是那种可以直接在线编辑文档，然后无需编译就可以直接发布的方式，另外可以在线写（修改）代码并且运行的效果。 VuePress 是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成 阅读全文

通过UI库深入了解Vue的插槽的使用技巧

2022-01-17 18:10 by 金色海洋（jyk）, 1316 阅读, 收藏,
摘要： Vue官网对于插槽的介绍比较简略，插槽本身也比较“烧脑”，很容易看晕，我就一直没看懂，直到 使用了element-plus的组件的插槽。 其实我们可以换一个角度来理解插槽，就会豁然开朗了。 技术栈 vite vue3 element-plus 从父子组件的传值开始 父子组件传值可以通过 prosp 阅读全文

如何优雅的设置UI库组件的属性？

2022-01-05 16:05 by 金色海洋（jyk）, 797 阅读, 收藏,
摘要： UI库提供了很多组件，组件又带有很多属性，有一些常用属性我们可以记住并且手撸，但是有些不常用的属性，或者需要设置多个属性，这样的情况下写起来就麻烦了，有时候还要打开帮助文档看看属性是怎么设定的，需要设置什么样的属性值。 那么有没有优雅的方式来设置组件的各种属性呢？我做了一个在线小工具，可以方便的设置 阅读全文

彻底搞清楚 JavaScript 的原型和原型链

2021-12-02 13:43 by 金色海洋（jyk）, 1004 阅读, 收藏,
摘要： JavaScript真的挺无语的，怪不得看了那么多的介绍文章还是一头雾水，直到自己终于弄懂了一点点之后才深有体会： 先从整体说起吧，发现没有基础做依据，那都是空中楼阁； 先从基础开始介绍吧，又发现基础是个蛇头咬蛇尾的圆环，无从下手，应该先整体介绍。 于是介绍本身就成了一个死循环。。。 还是尝试着从基 阅读全文
1 2 3 下一页
2