（2）svelte 教程：点击操作，输入框和数据绑定

最新推荐文章于 2024-09-21 18:32:34 发布

coderpai

最新推荐文章于 2024-09-21 18:32:34 发布

阅读量735

点赞数 8

分类专栏： svelte 文章标签： svelte

本文链接：https://blog.csdn.net/CoderPai/article/details/139383740

版权

svelte 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

（2）svelte 教程：点击操作，输入框和数据绑定

点击操作

以下是对这段代码的逐行解释：

<script>
    export let name;
    let beltColour = "black";

    const handleClick = () => {
        beltColour = "orange";
    };
</script>

这段代码是 Svelte 组件中的脚本部分，用于定义组件的逻辑和状态。

export let name;：这行代码声明了一个名为 name 的变量，并将其导出，使其成为一个可由父组件传递的属性。也就是说，父组件可以通过传递 name 属性来为这个变量赋值。
let beltColour = "black";：这行代码声明了一个名为 beltColour 的变量，并将其初始值设置为 "black"。这个变量用于保存腰带的颜色。
const handleClick = () => { beltColour = "orange"; };：这行代码定义了一个名为 handleClick 的函数，当该函数被调用时，会将 beltColour 变量的值更新为 "orange"。

<main>
    <h1>Hello {name}!</h1>
    <p>{beltColour} belt</p>
    <button on:click={handleClick}>update belt colour</button>
</main>

这段代码是 Svelte 组件的模板部分，用于定义组件的 HTML 结构和绑定的动态内容。

<main>：这是一个 HTML <main> 元素，用于包裹组件的主要内容。
<h1>Hello {name}!</h1>：这是一个 HTML <h1> 标题元素，使用 {name} 表达式将 name 变量的值插入到标题中。这意味着当 name 变量的值改变时，标题的内容也会动态更新。
<p>{beltColour} belt</p>：这是一个 HTML <p> 段落元素，使用 {beltColour} 表达式将 beltColour 变量的值插入到段落中。这意味着当 beltColour 变量的值改变时，段落的内容也会动态更新。
<button on:click={handleClick}>update belt colour</button>：这是一个 HTML <button> 按钮元素，使用 on:click={handleClick} 绑定点击事件。当按钮被点击时，会调用 handleClick 函数，从而更新 beltColour 变量的值。

完整的代码结合了脚本部分和模板部分，实现了一个可以响应用户交互（点击按钮）并动态更新界面内容（腰带颜色）的 Svelte 组件。

输入框

好的，这里是综合了所有解释的完整代码逐行解释：

<script>
    export let name;
    let beltColour = "black";

    const handleInput = (e) => {
        beltColour = e.target.value;
    };
</script>

export let name;：声明一个名为 name 的变量，并将其导出，使其成为一个可由父组件传递的属性。
let beltColour = "black";：声明一个名为 beltColour 的变量，并将其初始值设置为 "black"。
const handleInput = (e) => { beltColour = e.target.value; };：
- e：这是事件对象（event object），它包含了与事件相关的所有信息。在这里，e 代表输入事件（input event）。
- e.target：这是事件对象的一个属性，指向触发事件的元素。在本例中，e.target 指的是触发 input 事件的 <input> 元素。
- e.target.value：这是事件目标元素的 value 属性，表示输入框中当前的文本值。通过 e.target.value 可以获取输入框中的最新内容。

<main>
    <h1>Hello {name}!</h1>
    <p>{beltColour} belt</p>
    <input type="text" on:input={handleInput} value={beltColour}> 
</main>

<main>：HTML <main> 元素，用于包裹组件的主要内容。
<h1>Hello {name}!</h1>：HTML <h1> 标题元素，使用 {name} 表达式将 name 变量的值插入到标题中。这意味着当 name 变量的值改变时，标题的内容也会动态更新。
<p>{beltColour} belt</p>：HTML <p> 段落元素，使用 {beltColour} 表达式将 beltColour 变量的值插入到段落中。这意味着当 beltColour 变量的值改变时，段落的内容也会动态更新。
<input type="text" on:input={handleInput} value={beltColour}>：
- <input type="text">：这是一个文本输入框，用户可以在其中输入文本。
- on:input={handleInput}：这是 Svelte 的事件绑定语法，表示当输入框内容发生变化时，调用 handleInput 函数。
- 当用户在输入框中输入文本时，会触发 input 事件，并将事件对象 e 传递给 handleInput 函数。函数通过 e.target.value 获取输入框中的当前值，并将其赋值给 beltColour 变量。
- value={beltColour}：将输入框的初始值设置为 beltColour 变量的当前值，并使输入框中的值与 beltColour 变量保持同步。

综上所述，当用户在输入框中输入文本时，handleInput 函数会被调用，更新 beltColour 变量的值为输入框中的当前文本内容，从而动态更新页面上显示的腰带颜色。

数据绑定

好的，这里是对这段代码的逐行详细解释：

<script>
    export let name;
    let beltColour = "black";
</script>

<script>：这个标签包含了 Svelte 组件的脚本部分，用于定义变量和函数。
export let name;：声明一个名为 name 的变量，并将其导出，使其成为一个可由父组件传递的属性。这意味着父组件可以通过传递 name 属性来为这个变量赋值。
let beltColour = "black";：声明一个名为 beltColour 的变量，并将其初始值设置为 "black"。这个变量用于保存腰带的颜色。

<main>
    <h1>Hello {name}!</h1>
    <p style="color: {beltColour}">{beltColour} belt</p>
    <input type="text" bind:value={beltColour}>
</main>

<main>：HTML <main> 元素，用于包裹组件的主要内容。
<h1>Hello {name}!</h1>：HTML <h1> 标题元素，使用 {name} 表达式将 name 变量的值插入到标题中。{} 内的内容是 Svelte 的模板语法，表示插值（interpolation），用于将变量的值动态插入到 HTML 中。这个标题将显示为 “Hello [name]!”，其中 [name] 是传递给组件的 name 属性的值。
<p style="color: {beltColour}">{beltColour} belt</p>：HTML <p> 段落元素，使用 {beltColour} 表达式将 beltColour 变量的值插入到段落中，并将该值用作段落文本的颜色样式。这意味着当 beltColour 变量的值改变时，段落的文本内容和颜色都会动态更新。例如，如果 beltColour 是 "black"，段落将显示为 “black belt” 并且文本颜色为黑色。
<input type="text" bind:value={beltColour}>：HTML <input> 输入框元素，使用 bind:value 进行双向绑定（two-way binding）：
- type="text"：表示这是一个文本输入框，用户可以在其中输入文本。
- bind:value={beltColour}：将输入框的值与 beltColour 变量进行双向绑定。这意味着当用户在输入框中输入文本时，beltColour 变量的值会自动更新为输入框中的内容；同时，当 beltColour 变量的值发生变化时，输入框中的值也会自动更新为 beltColour 的新值。

总的来说，这段代码实现了一个简单的 Svelte 组件，它包含一个标题，一个显示腰带颜色的段落，以及一个文本输入框。用户可以通过输入框改变腰带的颜色，段落的文本内容和颜色样式也会相应更新。

完整代码

APP.svelte

<script>
	export let name;
	let beltColour = "black";

	// const handleClick = () => {
	// 	beltColour = "orange";
	// };

	// const handleInput = (e) => {
	// 	beltColour = e.target.value;
	// };
</script>

<main>
	<h1>Hello {name}!</h1>
	<p style="color: {beltColour}">{beltColour} belt</p>
	<!-- <button on:click={handleClick}>update belt colour</button> -->
	<!-- <input type="text" on:input={handleInput} value={beltColour}>  -->
	<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>