Vue3的Api变更
组件相关函数式组件functional attribute 在单文件组件 (SFC) <template> 已被移除{ functional: true } 选项在通过函数创建组件已被移除
123456789101112131415161718192021222324// 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的:// Vue 2 函数式组件示例export default { functional: true, props: ['level'], render(h, { props, data, children }) { return h(`h${props.level}`, data, children) }}// Vue 2 函数式组件示例使用 <template><template functional> &l ...
Vue中的provide和inject
官方文档链接Vue2 的 Provide/injectVue3 的 Provide/Inject组合式 API 中的用法
认识 provide 和 injectprovide 和 inject 是 Vue 中的一种组件间传值的解决办法解决了深层嵌套的组件之间的传值不方便问题先来看看这两个单词什么意思…
providevt. 提供; 供应; 给予; 规定
injectvt. (给…)注射(药物等); (给…)注射(液体); (给…)添加,增加(某品质)
从直译中,就可以知道 provide 提供了数据,将这个数据沿着组件向下传递而 inject 则是被注入了这个数据provide 用在遥远的父组件上…而 inject 用在遥远的子组件上…
这里的遥远指的是组件之间的关系:向下跨组件传递例如 Vue 官网给我们提供的组件结构
123456Root└─ TodoList ├─ TodoItem └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics
优点和缺点
优点方便,真 ...
Vue3不兼容v2的用法
vue3 中一些不兼容的小改变生命周期选项名称的变化12destroyed被重命名为unmountedbeforeDestroy被重命名为beforeUnmount
在 prop 的默认函数中访问 this生成 prop 默认值的工厂函数不能再访问 this
12345678910111213141516// vue3// 把组件接收到的原始prop作为参数传递给默认函数// inject API 可以在默认函数中使用import { inject } from "vue";export default { props: { theme: { default(props) { // props是传递给组件的原始值 // 在任何类型/默认强制转换之前 // 也可以使用inject来访问注入的property return inject("theme", "default-theme"); ...
Renpy学习:自定义开场画面
学习来源
自定义开场画面 1自定义界面SDK 版本 7.1.2
脚本标签 label特殊 label 标签脚本标签 label 可以用在任何 rpy 脚本文件中,可以理解为某一段脚本的索引新建工程会生成一个 start 的 label,在主菜单点击启动或开始后,就会从 start 开始顺序执行脚本
可用标签这个场景下可以使用的标签有三个
splashscreen
before_main_menu
main_menu
在开头先把文本标签写上
1234567891011# 开场画面label splashscreen: pass# 主菜单之前label before_main_menu: pass# 主菜单label main_menu: pass
在 script.rpy 中添加这些文本标签后会发现,开头的主菜单(main menu)被跳过了
在主菜单前显示一个 logo将需要显示的 logo 图片放在工程目录中的 images 子目录下,然后重命名为 logo.png(文件名不能用中文),修改 splashscreen 标签
1234label splashscreen: ...
Renpy学习:定义角色
学习来源
成功定义一个角色SDK 版本 7.1.2
定义一个角色(Character)和一小段对话(dialogue)12345# script.rpy里有这样一段define e = Character('艾琳')e "您已创建一个新的 Ren'Py 游戏。"e "当您完善了故事、图片和音乐之后,您就可以向全世界发布了!"
一般情况下,脚本中角色的每段话都会导致对话窗口内容更新并暂停, 需要一个鼠标点击事件继续
定制化角色角色对话内容可以进一步定制化1define e = Character("艾琳", who_color="#c8ffc8", window_background="frame.png")
这样定义角色的话,名字的文本颜色是#c8ffc8, 角色对话窗口背景使用图片”frame.png”更多配置参考文档
立绘1define e = Character('艾琳', image="eileen")
...
策略模式的表单校验
策略模式在表单验证中的应用最近想要封装一个校验表单的方法,没有什么很优雅的解决思路。今天偶然看到了这篇文章,学到了一种新的设计模式….实现也很容易理解。原文链接: http://hcysun.me/2016/02/21/%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F%E5%9C%A8%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8/作者: HcySunYang
代码12345678910111213141516171819202122232425262728293031323334353637383940414243function FormValidation(VerifiPolicy) { // 保存策略对象 this.strategies = VerifiPolicy; // 验证缓存 this.validationFns = [];}FormValidation.prototype.add = function (dom, rul ...
岛村抱月的一段话
どっちかなんて 聞かないで欲しい
こんなことが続いて 疲れないはずばない
私は少しずつ削れていて まもうしていく感じだ
でも 一人は退屈だ
それは孤独よりずっと辛いたいがたい病気だ
それに抵抗する薬は
人とのあいだに 生まれる見えないものしかないだろ
だがら私は これからもまもうしていく
自分を保つために すこしずつ失っていくのだ
うまくいかなくで たくさん傷づけても
恨まないで
安達としまむら
Mapbox难题解决记录
和后端一起遇到过的麻烦本来是想写在上一篇里面的,但是上篇已经写得很长了…
而且想到未来可能会遇到更多要解决的问题。就重新记录了一篇文章
优化初始地图打开速度数据量的问题通过分层解决,我们做了个全美人种分布的图层,首页显示了百万个点。这些点不仅影响了页面的打开速度,还对服务器造成了压力,同时浏览器渲染这些点也比较吃力
把后端做了多个 vector 源,前端写多个 layer,初始只展示数据量最小的源
接着把 script 标签从 api.mapbox.com 的 js 文件迁移到本地,从 network 里看到,mapbox-gl.js 这个文件的加载速度减少了好几秒
12345<!-- <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script> --><script src="/js/plugins/mapbox-2.3.1/mapbox-gl.js"></script><!-- ...
Mapbox使用笔记
什么是 mapbox近期公司有一个在地图上展示大量数据的项目。需要可以在国内访问国外的地图,同时可以累加开发
最后我们找到了一个相当靠谱但是也比较复杂的地图库,就是 mapbox
就记录一下自己看过和用过的吧
mapbox 中国
mapbox gl js
mapbox 文档
mapbox 中国也有文档,但是不是最新的,不过可以参考
mapbox GL 应该怎么用假设想搞出来这样一个东西,一个可以操作的地图上,有上亿的数据需要显示,这时候 mapbox gl 就非常合适
前端需要做的是根据mapbox gl js的文档完成地图上的一些交互功能,比如地图控件,地图层的控制,地图的缩放移动事件等等。后端需要准备一份数据,毕竟那么多的点点不是随机生成的呀,具体的细节我不太清楚,就只放一份文档在这里。地图的层数据,甚至地图的样式,都是一个链接。前端拿到这个链接之后就可以获取到数据,按照 mapbox 的约定将数据呈现地图里
先把地图搞出来上手最快的方法,就是看Examples
正确引入地图的 script 和 link 之后,和绝大多数地图一样,接管一个 html 元素,把地图 new 出来就 ...
7个作弊般的实用设计技巧(翻译)
原文链接:7 Practical Tips for Cheating at Design
原文作者:Adam Wathan & Steve Schoger
一篇讲程序员自己构建页面的技巧的文章,Tailwind CSS 作者写的。
这些技巧确实很实用
自己翻译的,英语水平很一般,查单词意思整理语言之后写下来的东西。不免有错误,欢迎指出
7 个作弊般的实用设计技巧用策略来改善你的设计,而不是用天赋。每个开发者都不可避免地会遇到需要自己去决定页面设计的场景,不论开发者们是否喜欢。
也许公司没有一个全职的设计师,或者你自己想做一些什么东西。也许你正在 hacking 一个项目,并且你喜欢这个项目比另一个 bootstrap 网站更好看。
这很容易让你甩甩手抱怨,_干哦,我这辈子估计都弄不好,我又不是个设计师_。但事实证明,有很多技巧可以让你快速地提升设计等级,而且不一定非得有平面设计师的背景。
今天,这儿有些简单的好点子可以该改善你的设计
1.使用颜色(color)和粗细(weight)来控制等级,而不是大小(size)
设计 UI 的时候,一个常见的错误是想把重要信息的字体大 ...