vue3学习笔记

vue3学习笔记

数据绑定 ‘v-bind’ 简写为’:'，语法v-bind:id=‘变量’

v-on 指令通过 v-on:event=“method” 语法工作，简写语法：@event=“method”

<form @submit="onSubmit">form>

v-model 绑定到你在其上设置的数据属性，并使其与 保持同步

v-model 适用于所有不同的输入类型，包括复选框、单选框和选择输入.

<input
  type="text"
  id="new-todo-input"
  name="new-todo"
  autocomplete="off"
  v-model="label"
/>

v-model修饰符.trim，将删除输入之前或之后的空格；.lazy 修饰符导致 v-model 使用 change 事件代替

当 v-model 同步文本输入的值时，此修饰符会发生变化。如前所述，v-model 同步通过使用事件更新变量来工作。对于文本输入，此同步使用 input 事件进行。通常，这意味着 Vue 在每次击键后都会同步数据。.lazy 修饰符导致 v-model 使用 change 事件代替。这意味着 Vue 只会在输入失去焦点或提交表单时同步数据。
要同时使用 .lazy 修饰符和 .trim 修饰符，我们可以将它们链接起来，例如 v-model.lazy.trim=“label”。

使用自定义事件将数据传递给父级

1. 自定义事件发射

this.$emit("todo-added",参数);

2. v-on监听事件

<<