svelte | 易学教程

蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解

阅读更多关于蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解

2020 年真的是灾祸频发，但是在各类前端框架上，依旧是在稳步的推进。近日 Vue 团队更新了关于 Vue 3 的最新状态，尤大新增了三个语法糖特性，它们将用于优化 SFC 的开发体验，你会有兴趣尝鲜试试么～登高远眺天高地迥，觉宇宙之无穷前端框架 Vue 3: 2020 年中的状态更新近日 Vue3 团队对 Vue 3 的状态进行了更新，介绍了各个主要工具的开发进度。整体计划是 7 月中旬推出 RC 版本，8 月早些时候能够推出正式版。在各工具在密锣紧鼓升级兼容 Vue3 的同时，受 Svelte 启发，尤大新增了三个语法糖特性用于优化 SFC 的开发体验，一起来了解一下吧～。设计哲学前后端一体化：前后端分离将死？天下大势，分久必合，合久必分，在几年前由于 NodeJS 等技术的蓬勃发展，业界涌现出前后端分离的技术架构体系，仿佛前后端分离，才是自然的法则。而如今，也是因为技术的不断发展，作者基于自身敏锐的观察，开始探索前后端一体化的架构，并列举了一系列关于前后端一体化即将到来的观点，非常值得学习、思考。不过，不管是哪种架构，都是为了在合适的时机出现，解决当下的问题，架构，没有终点。图形编程如何挑选数据可视化框架及平台在数字化成为趋势的今天，数据可视化需求也越来越常见。这篇文章挑选了市面上较活跃较稳定的框架进行了详细的测评，包含框架的发展历史、优劣势

Add onChange handler to input in svelte

阅读更多关于 Add onChange handler to input in svelte

问题 Im trying to add the asYouType function from libphonenumber-js to my svelte input using an onChange handler as I'm not sure how this can be done with 2 way binding. I have managed to implement this but it will only format the number onBlur instead of as the user types into the input as is expeccted behaviour as seen here libphonenumber-js How can I change my input so that it will format as the user types into it? <script> import { AsYouType } from "libphonenumber-js"; export let value = "";

How do you create routes with optional parameters in Sapper?

阅读更多关于 How do you create routes with optional parameters in Sapper?

问题 Let's say I have a /foo route. But sometimes people hit /foo with a language parameter: /fr/foo . And other times they might hit it with a language and a country: /ca/fr/foo So I need a routing table like [country]/[language]/foo [language]/foo /foo That all direct to the same page. Should I create a tree like this? src/routes └── [country] └── [language] └── foo.svelte If that's the answer then how do I direct [language]/foo to [country]/[language]/foo ? I don't see any optional params in

2020排行榜！Realworld前端框架的比较

阅读更多关于 2020排行榜！Realworld前端框架的比较

全文共1500字，预计学习时长6分钟图源：unsplash 过去的三年我们都探讨了这个话题，那么今年的情况会是怎样呢？首先声明，此文并不是关于未来前端选择的比较，而是从三个方面（性能，大小，相似应用下的代码行数）来进行小范围的简单比较。读者需要注意: · 本文是在比较Realworld软件——而不是正在研发中的软件，这些软件通常缺乏足够的知识和想法，因此难以实现。 · 由专家撰写或评审过——理想情况下，该技术领域的专家会评估此项目。 · 以某种方式标准化—— 一个符合特定规则的项目存在一种规范，提供后端API，静态标记和样式。正在比较哪些库/框架？撰写此文时，Realworld存储库中有24种conduit实现As，它们之间的从属地位并不重要，唯一的判定标准是看它是否出现在RealWorld repo page上。关注的是什么指标？性能—此应用程序需要多长时间才能显示内容并可用？大小—该应用程序有多大？我们将只比较已编译的JavaScript文件的大小。HTML和CSS对所有变体都是通用的，并且是从CDN（内容交付网络）下载的。所有技术都可以编译或转换为JavaScript，因此仅调整该文件的大小。代码行数—需要多少行代码才能基于规范创建RealWorld应用程序？某些应用程序很麻烦，但应该不会产生重大影响。我们量化的唯一文件夹是每个应用程序中的src /

Svelte application bug: converting string to boolean in the view fails

阅读更多关于 Svelte application bug: converting string to boolean in the view fails

问题 In a Svelte app, I have this array of countries: let countries = [ { name:"Alegeria", status: "1" }, { name:"Bulgaria", status :"0" } ] Note the status property is a string. I iterate the array this way: {#if countries.length > 0} <table class="table"> <thead> <tr> <th>Country</th> <th class="text-right">Status</th> </tr> </thead> <tbody> {#each countries as c} <tr> <td>{c.name}</td> <td class="text-right"><Switch bind:checked={Boolean(Number(c.status))} /></td> </tr> {/each} </tbody> </table

Cannot access 'variable_name' before initialization

阅读更多关于 Cannot access 'variable_name' before initialization

问题 When using reactive variables by declaring them using the $: syntax, you get the following error. Cannot access 'variable_name' before initialization Here is the code: App.svelte <script> import { ledzep, redhotchilis } from './data.js' $: bandmembers = [...ledzep, ...redhotchilis] let namesWithA = bandmembers.filter(d => { if (d.indexOf('a') > 0) { return true; } else { return false } }) </script> <h2>Band Members</h2> <ul> {#each bandmembers as member} <li>{member}</li> {/each} </ul> <h2

Cannot access 'variable_name' before initialization

阅读更多关于 Cannot access 'variable_name' before initialization

Svelte todo app bug: new todos id property is never greater than 2

阅读更多关于 Svelte todo app bug: new todos id property is never greater than 2

问题 I am working on a small ToDo application in Svelte for learning purposes (Im new to Svelte). I have this code for adding a new todo: <script> import { onMount } from "svelte"; let todos = []; onMount(async function() { todos.reverse(); }); function addTodo() { //Empty todo object let newTodo = {}; //Set new todo object's properties (id, title, completed) if (todos.length == 0) { newTodo.id = 1; } else { newTodo.id = todos[todos.length - 1].id + 1; } newTodo.title = document.querySelector('

Svelte route gives me 404

阅读更多关于 Svelte route gives me 404

问题 I created a simple router for my app in Svelte. It is working if I'm accessing the link from the nav bar. If I reload the page, it give me 404.. why ? <Router url="{url}"> <nav> <Link to="/">Home</Link> <Link to="charts">About</Link> </nav> <div> <Route path="charts" component="{About}" /> <Route path="/"><Home /></Route> </div> </Router> After reload: This localhost page can’t be found No webpage was found for the web address: http://localhost:5000/charts 回答1: You must make sure your server

Exporting Separate Custom Elements from Svelte Components

阅读更多关于 Exporting Separate Custom Elements from Svelte Components

问题 I'm trying to find out if it's possible to export each Svelte component as a separate Custom Element (with Shadow DOM) in its own js file (with imports for any child elements - i.e. dependencies aren't included in the same file). Is it even possible? Thanks 回答1: I'm assuming you're using rollup and rollup-plugin-svelte the way to do it is to use code splitting. You can define the inputs separately and that will create individual outputs. Instead of using a file name output, you would use an

订阅 svelte