首页 > TAG信息列表 > svelte

基于Svelte3.x桌面端UI组件库Svelte UI

Svelte-UI，一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui，一套svelte3开发的桌面端ui组件库。在设计及功能上借鉴了element-ui组件库。所以组件的使用方法也非常类似饿了么组件库。起因是想开发一个svelte后台管理系统，无赖发现没有比较合适的svelte组件库。于是

Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat

基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat。 基于svelte3+svelteKit+sass+mescroll.js+svelte-layer+svelte-scrollbar等技术搭建仿微信网页版聊天案例Svelte-Webchat。全新的Dock菜单(可拖拽排序/鼠标滚轮左右滚动)，整体MacOs风格毛玻璃背景虚化效果。

svelte组件：svelte3自定义桌面PC端对话框组件svelte-layer

基于Svelte3.x开发pc网页版自定义弹窗组件svelteLayer。 svelte-layer：基于svelte.js轻量级多功能pc桌面端对话框组件。支持多种弹窗类型、30+参数随意组合配置，整合了拖拽/四周缩放/最大化/记忆弹窗位置/全屏/自定义层级等功能。 svelteLayer功能效果上有些类似layer.js插件。 ◆

Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App

基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom。 svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+svelte-popup等技术搭建开发的仿微信app界面聊天项目。支持发送图文消息/gif动图、图片/视频预览、下拉刷新、红包及朋友圈等功能。 一、技术框架 编码器：V

Svelte 迷途求索（三） —— 生命周期

每个组件都有从创建到销毁的过程，这个过程被称为生命周期 生命周期可以解决一些业务上的需求，比如组件加载时请求数据、组件销毁时清除定时器 Svelte 提供了五个生命周期函数：组件加载 onMount、更新前 beforeUpdate、更新后 afterUpdate、组件销毁 onDestroy、tick 下面将介绍这

svelte内部原理的响应机制

网站参考 网站参考 使用svelte时，反应性会自动发生。在Svelte中，任何组件的单个片段都可以随时动态地重新生成！svelte精心管理每个片段（什么是一个片段?就是"代码段"，是指svelte再合适的时间也就是依赖状态发生变化时，被动管理和重新执行的任何js表达式。最终，片段用于提供我们的htm

Svelte + Vite 知识点一

SVELTE + VITE (一) Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。 与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样

Svelte 自定义组件属性统一设置与全部获取

1 前言 当一个组件具有过多 props 时，就渴望有一种统一设置的方法；当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？ 2 正文 首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 props 属性。 <script> expor

Svelte 怎样传入 props

1 前言 前端组件化开发，单向数据流，有了 state、props 和状态更新机制，也就能做简单的 web 应用啦~ 2 正文 props 在根组件上以 props 选项的形式声明，在嵌套组件树中，可以自由设置和传递。 先写一个子组件 Nested.svelte，该组件会在 App.svelte 中被引用，这里 export let name; 不

Svelte 中的列表渲染用法

1 前言 Svelte 中条件渲染使用{#if ...} ... {/if} 声明，那列表渲染是不是类似：{#for ...} ... {/for}？ 2 正文 Svelte 中的列表渲染使用跟条件渲染类似的语法，不过关键字换成了 each，item 可以解构，这样看起来比较清晰。 <script> const list = [ { name: "lilei", age: 21 },

Svelte 模板中条件渲染写法

1 前言 模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if 2 正文 <script> let counter = 0; const increment = () => { counter++; }; </script> <button on:click={increment}>increment</button> {#if count

怎样在 Svelte 列表渲染块中指定 key 和 引用 index

key 值也存在于 Svelte 中，它在列表渲染区块中作为最后一个参数存在，使用括号包裹。 <script> let list = [ { name: "lilei", age: 21 }, { name: "hanmeimei", age: 24 }, { name: "lihua", age: 18 }, { name: "zhangsan", age: 22 },

怎样使用 Svelte 中的异步块

正文 因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。 <script> import AppBackup from "./AppBackup.svelte"; let promise = null; // 异步块需要的 Promise 对象 /

Svelte 中的事件修饰符

正文 React 中没有事件修饰符，Vue 用的说 @click.once 语法，Svelte 用的是 on:click|once 语法。 <script> const clickHandler = (foo) => alert(foo + "trigger"); </script> <!-- once --> <div> <button on:click|once={clickHandler}>只触发一次:

完了，又火一个项目

又一个前端超新星项目 ？ 大家好，我是鱼皮。 今天逛 GitHub 的时候，在趋势榜上看到一个项目，竟然短短一天的时间内，涨了 1000 多个星星！ 就是这个名为 solid 的项目： 要知道日增上千 star 可是非常难得的，我不禁感到好奇，点进去看看这个项目到底有啥牛逼的？ 啥是 Solid？ 这是一个国外的前端

你问的Svelte来了--静态编译、直出DOM、独立分发Web Components、位掩码变化追踪

Svelte Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM

怎样在 Svelte 中自定义 store

正文 我们拿一个计数器举例，count 变量存在 store 中，我们用 count.set() 重置，用 count.subscribe() 订阅，用 count.update() 更新，一切看起来都很 OK，但实际上，如果想要更好的可维护性，这个 count 应该继续定义它的行为逻辑，也就是预定义好它的更新是怎样的、它的重置是怎样的。这样看起

Svelte 生命周期：挂载与卸载

正文 Svelte 作者是怎么想到的呀，居然把 onMount 和 beforeDestroy 合起来了：当 onMount 返回一个函数时，该函数会在组件销毁时调用，只能说NB.. 下面是子组件 Child.svelte，会发现在 onMount 函数内返回了一个 function： <script> import { onMount } from "svelte"; // life cycle

Svelte 绑定尺寸属性

正文 类似 clientWidth、clientHeight 这类属性，想要实时获取它们的值需要进行事件监听，但借助 Svelte 强大的数据绑定功能，可以做到对这一类属性的绑定与即时获取。 <script> let clientWidth, clientHeight; </script> <div bind:clientWidth bind:clientHeight> {clientWidth

在 Svelte each 块中使用双向数据绑定

正文 下面是一个位于 each 块中的一组 input 输入框，可以通过 bind:value 实现数据的双向绑定。 <script> let list = ["eat morning."]; const add = () => { list = [...list, ""]; }; </script> <header> <button on:click={add}>Add new<

Svelte 对数组和对象操作时的响应式

1 前言 Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。 2 正文 Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似obj.a = 2 这种操作也是无法监听的，因为在 Svelte 中，被更新的变量的名称必须出现在赋值语句的左侧。 <

Svelte 中的计算属性：反应性声明

1 前言 不知道为什么翻译成“反应性”，而不是“响应式”，因为不是选项式 API，计算属性在 Svelte 中的写法会是怎样的呢？ 2 正文 Svelte 中的计算属性使用 $: 起手作变量声明，它会在等号右边依赖的值变化时自动计算。 <script> let count = 3; $: dbCount = count * 2; // here co

JavaScript2020调查：Angular满意度低，Svelte出线

喜欢就关注我们吧！ StateOfJS 已发布了 2020年的 JavaScript 现状调查报告。今年的 JavaScript 现状调查是该调查的第五版，覆盖了来自 137 个国家的 23,765 位受访者；其中，大约 91％ 的受访者被确定为男性，三分之一的受访者年收入在 50,000 美元至 100,000 美元之间。 JavaScript 2020 大

全新DHTMLX甘特图：可用于纯React，Svelte和Vue.js中Web开发

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务

svelte项目中使用scss写样式时，VS Code报错解决办法

按官方文档配置scss后，VS Code会报如图所示错误，如图 解决办法： 原因是使用node-sass时需配置node路径，首先在cmd上输入where node(windows) | which node(Mac,Linux)，找到node路径 C:\Users\xixi> where node C:\Program Files\nodejs\node.exe 进入VS Code设置搜索svelte，填入