(3)svelte 教程:响应式

2024-06-02 11:28
文章标签 教程 响应 svelte

本文主要是介绍(3)svelte 教程:响应式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

(3)svelte 教程:响应式

什么是 Reactive Value 和 Reactive Statement

Reactive Value(响应式值)
响应式值是指在 Svelte 中,当变量的值发生变化时,Svelte 会自动检测到变化并更新所有依赖于该变量的部分。这使得开发者可以轻松地管理状态,并让UI自动反映这些状态的变化。

Reactive Statement(响应式语句)
响应式语句是一种特殊的语法,通过 $: 前缀标识。当任何响应式语句中依赖的变量发生变化时,该语句会重新执行。这可以用来自动更新某些计算值或执行一些副作用(如日志记录)。

逐行解释代码

<script>export let name;let beltColour = "black";let firstName = "Jimi";let lastName = "Hend";$: fullName = `${firstName} ${lastName}`;$: {console.log(beltColour);console.log(fullName);}
</script>
  • export let name;

    • 声明一个名为 name 的变量,并将其导出,使其成为一个可由父组件传递的属性。name 是响应式的,当父组件改变 name 的值时,Svelte 会自动更新使用 name 的地方。
  • let beltColour = "black";

    • 声明一个名为 beltColour 的变量,并将其初始值设置为 "black"。这是一个响应式值,当 beltColour 发生变化时,所有依赖它的地方都会自动更新。
  • let firstName = "Jimi";

    • 声明一个名为 firstName 的变量,并将其初始值设置为 "Jimi"。这是一个响应式值。
  • let lastName = "Hend";

    • 声明一个名为 lastName 的变量,并将其初始值设置为 "Hend"。这是一个响应式值。
  • $: fullName = \${firstName} ${lastName}`;`

    • 使用 $: 前缀声明一个响应式语句,计算 fullName 的值。当 firstNamelastName 发生变化时,这个语句会重新执行,更新 fullName 的值。
  • $: { console.log(beltColour); console.log(fullName); }

    • 这是一个块级的响应式语句,当任意依赖的响应式值发生变化时,整个块会重新执行。这里会打印 beltColourfullName 的当前值。当 beltColourfullName 发生变化时,控制台会显示相应的日志信息。
<main><h1>Hello {name}!</h1><p style="color: {beltColour}">{fullName} {beltColour} belt</p><input type="text" bind:value={firstName}><input type="text" bind:value={lastName}><input type="text" bind:value={beltColour}>
</main>
部分
  • <h1>Hello {name}!</h1>

    • 一个 HTML <h1> 元素,使用 {name} 表达式将 name 变量的值插入到标题中。当 name 变量的值变化时,标题会自动更新。
  • <p style="color: {beltColour}">{fullName} {beltColour} belt</p>

    • 一个 HTML <p> 元素,使用 {fullName}{beltColour} 表达式将 fullNamebeltColour 变量的值插入到段落中,同时将 beltColour 作为段落文本的颜色样式。当 fullNamebeltColour 变量的值变化时,段落的内容和样式会自动更新。
  • <input type="text" bind:value={firstName}>

    • 一个 HTML <input> 元素,类型为文本输入框。使用 bind:value 语法将输入框的值与 firstName 变量进行双向绑定。当用户在输入框中输入内容时,firstName 变量会自动更新;反之,当 firstName 变量的值变化时,输入框的内容也会自动更新。
  • <input type="text" bind:value={lastName}>

    • 一个 HTML <input> 元素,类型为文本输入框。使用 bind:value 语法将输入框的值与 lastName 变量进行双向绑定。其行为与 firstName 的输入框相同。
  • <input type="text" bind:value={beltColour}>

    • 一个 HTML <input> 元素,类型为文本输入框。使用 bind:value 语法将输入框的值与 beltColour 变量进行双向绑定。当用户在输入框中输入内容时,beltColour 变量会自动更新;反之,当 beltColour 变量的值变化时,输入框的内容也会自动更新。

这个 Svelte 组件展示了如何使用响应式值和响应式语句来管理状态,并让 UI 根据数据的变化自动更新。

APP.svelte 完整代码如下:

<script>export let name;let beltColour = "black";let firstName = "Jimi";let lastName = "Hend";$: fullName = `${firstName} ${lastName}`;// $: console.log(beltColour);$: {console.log(beltColour);console.log(fullName);}// const handleClick = () => {// 	beltColour = "orange";// };// const handleInput = (e) => {// 	beltColour = e.target.value;// };
</script><main><h1>Hello {name}!</h1><p style="color: {beltColour}">{fullName} {beltColour} belt</p><!-- <button on:click={handleClick}>update belt colour</button> --><!-- <input type="text" on:input={handleInput} value={beltColour}>  --><input type="text" bind:value={firstName}><input type="text" bind:value={lastName}><input type="text" bind:value={beltColour}>
</main><style>main {text-align: center;padding: 1em;max-width: 240px;margin: 0 auto;} h1 {color: #ff3e00;text-transform: uppercase;font-size: 4em;font-weight: 100;}@media (min-width: 640px) {main {max-width: none;}}
</style>

这篇关于(3)svelte 教程:响应式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1023830

相关文章

Linux搭建Mysql主从同步的教程

《Linux搭建Mysql主从同步的教程》:本文主要介绍Linux搭建Mysql主从同步的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux搭建mysql主从同步1.启动mysql服务2.修改Mysql主库配置文件/etc/my.cnf3.重启主库my

SpringBoot操作MaxComputer方式(保姆级教程)

《SpringBoot操作MaxComputer方式(保姆级教程)》:本文主要介绍SpringBoot操作MaxComputer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录引言uqNqjoe一、引入依赖二、配置文件 application.properties(信息用自己

Tomcat的下载安装与使用教程

《Tomcat的下载安装与使用教程》本文介绍了Tomcat的下载、安装和使用方法,包括在本机和云服务器上部署Tomcat的过程,以及解决启动失败问题的方法... 目录Tomcat的下载安装与使用Tomcat的下载与安装Tomcat在本机运行使用Tomcat在php云服务器上的使用总结Tomcat的下载安装与

SpringBoot基于沙箱环境实现支付宝支付教程

《SpringBoot基于沙箱环境实现支付宝支付教程》本文介绍了如何使用支付宝沙箱环境进行开发测试,包括沙箱环境的介绍、准备步骤、在SpringBoot项目中结合支付宝沙箱进行支付接口的实现与测试... 目录一、支付宝沙箱环境介绍二、沙箱环境准备2.1 注册入驻支付宝开放平台2.2 配置沙箱环境2.3 沙箱

IDEA接入Deepseek的图文教程

《IDEA接入Deepseek的图文教程》在本篇文章中,我们将详细介绍如何在JetBrainsIDEA中使用Continue插件接入DeepSeek,让你的AI编程助手更智能,提高开发效率,感兴趣的小... 目录一、前置准备二、安装 Continue 插件三、配置 Continue 连接 DeepSeek四

jdk21下载、安装详细教程(Windows、Linux、macOS)

《jdk21下载、安装详细教程(Windows、Linux、macOS)》本文介绍了OpenJDK21的下载地址和安装步骤,包括Windows、Linux和macOS平台,下载后解压并设置环境变量,最... 目录1、官网2、下载openjdk3、安装4、验证1、官网官网地址:OpenJDK下载地址:Ar

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

springMVC返回Http响应的实现

《springMVC返回Http响应的实现》本文主要介绍了在SpringBoot中使用@Controller、@ResponseBody和@RestController注解进行HTTP响应返回的方法,... 目录一、返回页面二、@Controller和@ResponseBody与RestController

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J