（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>