按键修饰符

官网链接
非兼容：不再支持使用数字 (即键码) 作为 v-on 修饰符
非兼容：不再支持 config.keyCodes

<!-- 键码版本 -->
<input v-on:keyup.13="submit" /><!-- 别名版本 -->
<input v-on:keyup.enter="submit" />

键码版本已经废弃；依旧可以使用别名版本来绑定键盘事件

建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称。

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">

语法的限制导致某些特定字符无法被匹配，比如 "、’、/、=、> 和 .。对于这些字符，你应该在监听器内使用 event.key 代替。
如下

 <input @keydown="keyDown" v-on:keyup.enter="enter"/>keyDown(event){console.log('event=========',event);//"="对应的key是Processif(event.key == "Process"){alert("keyDown=")}},

v-model

官网链接
v-model 双向数据绑定 ：value和@input两个在起作用
v-model只是一个语法糖
在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：

或者通过v-bind.sync来进行操作

v-bind.sync类似自定义事件，只不过事件命默认定义为update:myPropName
也无需在组件调用出监听自定义事件如下

this.$emit('update:title', newValue)<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

可以写为

<ChildComponent :title.sync="pageTitle" />
update:title是是自定义事件命
title是子组件porp

下面是自定义事件的方式实现双向绑定

<my-input v-model="msg" @change2="change"></my-input>change(val){console.log('val=========',val);this.msg = val;
},

子组件这样写

    <input type="text" :value="title" @input="changeSon">changeSon(val){console.log('this.title=========',val.target.value);this.$emit("change2",val.target.value)},
changeSon事件触发后定义change2事件，在组件调用处监听change2事件更新新值

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event"
/>

若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代：

<ChildComponent v-model:title="pageTitle" /><!-- 是以下的简写: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：