首页 > 其他分享 >rust wasm sycamore demo

rust wasm sycamore demo

时间:2024-07-26 20:50:33浏览次数:13  
标签:sycamore demo button move wasm let click counter

Cargo.toml:

[package]
name = "wasmdemo"
version = "0.1.0"
edition = "2021"

[dependencies]
sycamore = "0.9.0-beta.2"

src/main.rs:

use sycamore::prelude::*;

#[component]
fn App<G: Html>() -> View<G> {
    let mut counter = create_signal(0i32);
    let increment = move |_| counter += 1;
    let decrement = move |_| counter -= 1;
    let reset = move |_| counter.set(0);
    view! {
        div {
            p { "Value: " (counter.get()) }
            button(on:click=increment) { "+" }
            button(on:click=decrement) { "-" }
            button(on:click=reset) { "Reset" }
        }
    }
}

fn main() {
    sycamore::render(App);
}

index.html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>My first Sycamore app</title>
</head>

<body></body>

</html>

run:

trunk serve

标签:sycamore,demo,button,move,wasm,let,click,counter
From: https://www.cnblogs.com/soarowl/p/18326230

相关文章

  • 8G 显存玩转书生大模型 Demo-任务一
    使用LMDeploy完成InternLM2-Chat-1.8B模型的部署,并生成300字小故事,记录复现过程并截图。详细步骤1.编写python文件2.执行(下载模型并运行)3.已命令行交互式运行4.生成300字小故事......
  • python cobs协议编解码算法demo
    1.SummaryCOBS(ConsistentOverheadByteStuffing)是一种算法,直译为一致的开销字节填充。简而言之,无论数据包的内容如何,都能通过产生高效可靠明确的数据包帧,从而使接受端能够从损坏的包中恢复。通常使用0x00来作为数据包的分隔符,即切割数据包的片分隔符。当使用0x00作为......
  • 【微信小程序开发】从0-1注册、下载、安装、开发保姆篇教程(附Demo源码)
    文章目录前期准备注册登陆下载安装创建项目项目结构版本管理程序页面生命周期新增页面功能实现本篇小结更多相关内容可查看前期准备要有前端开发基础,已安装NodeJS,若未安装请参考NodeJS安装并生成Vue脚手架(保姆级)可参考小程序开发官方文档进行学习,本文也是参考......
  • webpack入门最简单的demo
    1、在空文件夹下npminit-y2、npminstall--save-devwebpack3、新建src文件夹,在src里新建index.html,写入:<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>WebpackDemo</title></hea......
  • SELF-DEMOS: Eliciting Out-of-Demonstration Generalizability in Large Language Mo
    本文是LLM系列文章,针对《SELF-DEMOS:ElicitingOut-of-DemonstrationGeneralizabilityinLargeLanguageModels》的翻译。SELF-DEMOS:在大型语言模型中引入非演示泛化能力摘要1引言2相关工作3方法4实验5讨论6结论局限性摘要大型语言模型(LLM)已经显......
  • 新版网页无插件H.265播放器EasyPlayer.js如何测试demo视频?
    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,支持H.264与H.265编码格式,性能稳定、播放流畅;支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC、WS-FMP4、HTTP-FMP4等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时......
  • OpenCV开发笔记(七十八):在ubuntu上搭建opencv+python开发环境以及匹配识别Demo
    若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/140435870长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中…OpenCV开发专栏......
  • GLM-4-9B-Chat WebDemo 部署报错:ValueError: too many values to unpack
    用开源大模型食用指南self-llm项目的GLM-4-9B-ChatWebDemo部署文档部署时遇到如下错误:ValueError:toomanyvaluestounpack(expected2)Traceback:File"/root/miniconda3/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/script_runner.py",line552,......
  • Spring Boot集成grpc快速入门demo
    1.什么是GRPC?gRPC 是一个高性能、开源、通用的RPC框架,由Google推出,基于HTTP2协议标准设计开发,默认采用ProtocolBuffers数据序列化协议,支持多种开发语言。gRPC提供了一种简单的方法来精确的定义服务,并且为客户端和服务端自动生成可靠的功能库。在gRPC客户端可以直接调用不同......
  • 免费测试!身份证实名API示例demo
    今天推荐免费测试身份核验API类接口,可以免费试用,记得点赞收藏哈!接口名称:身份证二要素接口用途:输入姓名、身份证号,校验此两项是否匹配,同时返回生日、性别、籍贯等信息。首先打开阿里云,点击身份证实名验证接口,选择购买免费试用。然后点击卖家控制台,获取APPcode进行调试接口......