【Svelte】一个简单的前端框架

news2024/11/28 0:32:50

Svelte.js的学习成本高吗?

Svelte是新手编码初学者的完美平台。只需一个HTML/CSS和JavaScript技能组合,您就可以从头开始构建您的第一个网站,而无需额外的知识。 这使得学习曲线非常小,不像它的大多数替代方案。除此之外,Svelte 还提供可靠的学习资源,确保学习者在短短几天内掌握细节,而不是像React、Vue 或Angular 那样的数周或数月。

Svelte.js入门

到现在为止,我相信您已经想蠢案欲动,并开始写Svelte代码了 为此,我准备了一个初学者教程,向您展示如何使用 Svelte 组件创建待办事项列表。我们将构建一个交与式表单,您可以在其中将待办事项标记为已完成,也可以将不想要的待办事项删除 在开始编写这个《待办事项列表》应用前,我们先来学习一下Svelte的基本语法 假设,我不是一个做事有条理的人,需要建立一个待办事项程序,并希望这个待办事项程序能帮助逐一完成所有的事情所有大家和我一起,踏上这个Svelte开发之旅,让我们一起构建这个应用程序。

创建Svelte项目

步骤一:打开cmd输入该命令 npm create vite@latest

步骤二:输入项目名称

步骤三:选择Selvet框架

步骤四:选择语言(这里选的是Javascript)

7808860da88a4213b07e3e5b0966d24d.png

打开项目

输入 npm run dev 启动该项目,打开之后我们会看到页面如下(一个Vite和Svelte的大logo)

2388242b221a45bfb1e5194ccb32a4d3.png

 我们还可以进行一下编译,下面我们可以看到他的体积也才只有几kb

HELLO World

所有语言的第一个文件都离不开ta

我们打开App.svelte这个文件,清空掉里面的所有内容,我们只需写出下面的代码即可

be3c768ccce84cf384ac5cc43c57e3b3.png

 我们在script标签内声明的数据直接就是响应式的数据,不想vue等框架一样,需要ref/reactive一样声明一下才可以变成响应式的,而且在div大括号里面的式开辟的一个js的运行空间,所以我们呢可以使用js中的一些方法

c56f7c7eea1948b9a756805db2d1ca57.png

 bf45727b21e6425981d713d01f8eb6bc.png

 

img标签的使用

有两种方式可以。第一种直接就是src=‘图片地址’。第二种就是简写直接{地址},有的小伙伴可能进行保存的时候就直接 变为简写形式了

c5cd39797fdd4468b5f2104c49e39155.png

 5f1b20acc2db4a98a20313b95225e547.png

 

双向绑定

我们要先去main.js文件内修改一下要进行渲染的文件

6aec8d6f704e45fda3943519a8a98afd.png

 这里和vue中的v-module相似,只不过这里使用的是bind:value这种方式来进行双向绑定的

4d0645e7baee47b9988f4530268cdabf.png

 1e4f33fc4f164b11a3c648682a55ee66.gif

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/607722.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGLM-6b 多任务微调

ChatGLM-6b也是一种预训练模型,它也可以通过微调来适应下游任务。实验表明,使用ChatGLM-6b微调和Bert类预训练模型微调的效果相近。如果采用多任务设计,ChatGLM-6b的效果会更好。你可以在这里了解更多关于ChatGLM-6B的信息: ChatGLM-6Bhttps:…

边缘化中FEJ图例的理解

如图所示,在解释为什么需要FEJ(First Estimation Jacobian)时,通常会将这个图拿出来说事。但是,很多时候只是一笔带过,这个图看的云里雾里的,不是非常明白(可能是我理解力的问题),所以&#xff…

AngularJs学习笔记--bootstrap

AngularJs学习笔记系列第一篇,希望我可以坚持写下去。本文内容主要来自 AngularJS 文档的内容,但也加入些许自己的理解与尝试结果。 一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、An…

【云原生-K8s】k8s可视化管理界面安装配置及比较【Kubesphere篇】

总览 安装了k8s控制面板,方便日常的问题处理,查看资源状态信息,也可以增加子账号进行开放给其他人员使用,减少命令操作,提升工作效率 前置条件 须有一个正常使用的k8s集群附k8s v1.23版本搭建:https://…

JavaScript实例(Visual Studio Code)(一)

JavaScript程序本身不能独立存在 它是依附于某个HTML页面 在浏览器端运行的 基本语法&#xff1a; <script type"text/javascript" [src"外部js文件"]>... </script> 语法说明&#xff1a; script为脚本标记&#xff0c;它必须以<scri…

【小沐学Web】Rust实现Web服务器

文章目录 1、简介2、开发环境配置2.1 下载2.2 安装2.3 编辑工具2.4 构建工具2.5 自动化工具 3、Hello World4、TCP/UDP通信5、Web服务器结语 1、简介 https://www.rust-lang.org/ Rust: 一种使每个人都能够构建可靠且高效的软件的语言。 如今&#xff0c;全球有数百家公司在生…

谈谈Memcached与Redis

1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器。其本质上就是一个内存key-value数据库&#xff0c;但是不支持数据的持久化&#xff0c;服务器关闭之后数 据全部丢失。Memcached使用C语言开发&am…

【01】水仙花数算法

水仙花数 是指一个n位数&#xff08;n ≥ 3&#xff09;&#xff0c;它的每个位上的数字的n次幂之和等于该数本身。换句话说&#xff0c;对于一个三位数而言&#xff0c;如果它满足条件&#xff1a;各个位上的数字的立方和等于该三位数本身&#xff0c;那么这个数就被称为水仙花…

chatgpt赋能python:Python操作——去除非字母元素优化SEO

Python操作——去除非字母元素优化SEO 介绍 在做SEO优化时&#xff0c;处理关键词是必不可少的环节。我们需要对关键词进行一些处理&#xff0c;使其更加规范、简洁、且易于搜索引擎的识别和分类。其中一个重要的环节&#xff0c;就是去除非字母元素&#xff0c;即去除关键词…

大模型训练和部署的关键技术

自2016年至今&#xff0c;模型大小每18个月增长40倍&#xff0c;自2019年到现在&#xff0c;更是每18个月增长340倍。 然而相比之下&#xff0c;硬件增长速度较慢&#xff0c;自2016年至今&#xff0c;GPU的性能增长每18个月1.7倍&#xff0c;模型大小和硬件增长的差距逐渐扩大…

LeetCode110. 平衡二叉树

题目 leetcode110. 平衡二叉树 思路 只有每个节点的左右子树高度差不超过1才是平衡二叉树&#xff0c;因此可以递归解决。 递归的2要素&#xff1a; ①终止条件&#xff1a;当左右子树高度差超过1时返回false&#xff1b;递归到空节点和叶子节点时&#xff0c;由于空节点和…

每日学术速递5.31

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Prompt-Free Diffusion: Taking "Text" out of Text-to-Image Diffusion Models 标题&#xff1a;无提示扩散&#xff1a;从文本到图像扩散模型中提取“文本” 作者&…

单片机GD32F303RCT6 (Macos环境)开发 (三十五)—— 数字加速度计 (ADXL345 ) 使能中断获取运动与静止状态

数字加速度计 &#xff08;ADXL345&#xff09;- 使能中断获取运动与静止状态 1、几个与运动、静止检测相关的寄存器 a、寄存器 0x24—THRESH_ACT(读/写) THRESH_ACT寄存器为8位寄存器&#xff0c;保存检测活动的阈 值。数据格式无符号&#xff0c;因此&#xff0c;活动事件…

从零开始 Spring Boot 35:Lombok

从零开始 Spring Boot 35&#xff1a;Lombok 图源&#xff1a;简书 (jianshu.com) Lombok是一个java项目&#xff0c;旨在帮助开发者减少一些“模板代码”。其具体方式是在Java代码生成字节码&#xff08;class文件&#xff09;时&#xff0c;根据你添加的相关Lombok注解或类来…

冈萨雷斯DIP第9章知识点

文章目录 9.1 预备知识9.2 腐蚀和膨胀9.3 开运算与闭运算9.5 一些基本的形态学算法9.8 灰度级形态学 9.1 预备知识 形态学运算是用 集合 来定义的 。 在图像处理中 使用两类像素集合的形态学&#xff1a;目标元素 和 结构元 SE 。 通常目标定义为前景像素集合&#xff0c;结构…

计算机基础--->操作系统(2)【线程和进程、死锁】

文章目录 线程和进程线程和进程的区别&#xff1f;有了进程为什么还需要线程&#xff1f;为什么使用多线程&#xff1f;线程间的同步方式进程控制块&#xff08;PCB&#xff09;进程有哪几种状态&#xff1f;进程间的通讯方式有哪些&#xff1f;进程常见的调度算法有哪些&#…

冈萨雷斯DIP第2章知识点

文章目录 2.1 视觉感知要素2.2 光和电磁波谱2.3 图像感知与获取2.4 图像取样和量化2.4.1 取样和量化的基本概念2.4.2 数字图像表示2.4.4 空间分辨率和灰度分辨率2.4.5 图像内插 (image interpolation)2.5 像素间的一些基本关系 2.6 数字图像处理所用的基本数学工具介绍2.6.3 算…

基础查询 — 投影、选择

准备 数据查询操作均采用的是MySQL。示例数据库采用的是northwind 示例数据库。数据库导入手册 关于northwind 示例数据库 查询数据库中的表 show tables;查询表的表属性 desc xxx(表名);投影操作 1.语法 投影运算&#xff1a;选择表中的全部或者部分列。 语法 select 字段…

Jeston Orin Nano 离线烧写系统到NVME存储

大家好&#xff0c;我是虎哥&#xff0c;Jeston Orin nano 8G模块&#xff0c;我自己也玩了一段时间&#xff0c;在Orin 系列&#xff0c;官方提供了一种新的烧写方式&#xff0c;也就是离线烧写&#xff0c;就是你在主机&#xff0c;挂载存储后&#xff0c;直接烧写系统到这个…

Maven高级——继承与聚合——聚合实现

为什么要聚合 分模块开发之后一个项目会被拆分成多个模块。多个模块之间还会有依赖关系。 在一些大型项目中模块比较多&#xff0c;模块之间的依赖关系也会变得错综复杂。 并且在打包的时候还会有一个新的问题&#xff0c;在打包的时候我们要打包的是Springboot项目&#xf…