Element：input 事件

当一个 input select 或 textarea 元素的 value 被修改时，会触发 input 事件。

事件的 target 为当前正在编辑的宿主。

每当元素的 value 改变，input 事件都会被触发。这与 change 事件不同。
change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

示例：

<input placeholder="输入一些文本" name="name" />
<p id="values"></p>

<script>
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
</script>

对于input, 在Leptos中强调了 value attribute 和 value property 的区别。许多前端框架会混淆这两者。
https://book.leptos.dev/view/05_forms.html

attribute用来设置初始值，而property 则是设置当前值。就是当用户在 input界面上输入过之后，只能用 property来修改

打开浏览器的 about:blank 页面， 用 Ctrl + Shift + I 调出 调试界面，在 控制台里 依次 输入下面四句（输入完一句，看一下效果）

const el = document.createElement("input");
document.body.appendChild(el);

el.setAttribute("value", "test"); el.setAttribute("value", "another
test");

页面最后会出现一个 输入框
在 input框中输入几个字符，或者删除几个字符。

el.setAttribute("value", "one more time?");

再用 setAttribute 就无法改变 input的内容了，只能用prop

el.value = "But this works";

它不仅仅是一个 常量集合，而是一个代数数据类型（algebraic data type, ADT）。
它可以有多个变体（variant），而且每个变体可以携带不同的类型和不同的数量的数据。

enum Message {
    Quit,                       // 不带数据
    Move { x: i32, y: i32 },    // 带命名字段 （struct-like)
    Write(String),              // 带一个值（tuple-like）
    ChangeColor(i32, i32, i32), // 带多个值（tuple-like）
}

Leptos 和 Trunk 在底层捆绑了一段 JavaScript 代码，用于加载 Leptos UI。
该 UI 已被编译为 WebAssembly，用于驱动您的 CSR（客户端渲染）网站的交互。

如果您希望使用功能更齐全的模板---如何设置您在真实的 Leptos 项目中会看到的一些基础知识，例如路由（后面的章节会介绍）、将标签注入页面头部，Title以及Meta一些其他细节，那么请使用start-trunk模板库来启动和运行。

先安装 trunk 和 cargo-generate

cargo install trunk
cargo install cargo-generate

然后使用模板来初始化你的项目

cargo generate --git https://github.com/leptos-rs/start-trunk

最后运行

trunk serve --port 3000 --open

在新创建的应用目录中，开始开发您的应用。Trunk 服务器会在文件更改时重新加载您的应用，从而使开发过程相对无缝。