这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
vue3语法笔记
- mustache语法
{{variant}} - v-bind
:id :class - v-on
@click @input - v-model ==
:value @input - v-if v-else
- v-for 列表渲染
- watch 侦听器 onMounted()
- 组件
- props
- emits
<slot />
组件注册
全局注册 ： 在当前应用中的任何组件上都可以使用，而不需要额外再导入 方法 全局注册vs局部注册
推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。
直接在 DOM 中书写模板，模板的编译需要遵从浏览器中 HTML 的解析行为。在这种情况下，你应该需要使用 kebab-case 形式并显式地关闭这些组件的标签。 DOM模板注意事项
<template>
<!-- 如果是在 DOM 中书写该模板 -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</template>
事件
input | change | composition | keydown
input事件在用户行为导致input | select | textarea的value改变时触发。
change事件在用户行为导致input | select | textarea的value改变 && (失去焦点 || 回车)时触发。
composition事件在输入法编辑器输入字符后触发。数字输入不会触发
keydown事件在按下键盘按键后触发。
composition
由compositionstart、compositionupdate、compositionend组成的复合事件。会在输入法编辑器输入时触发。
对于中文来说，即从输入字母出现中文输入法到输出中文的过程。
这三个事件分别会在输入法输入时/输入中/输入完成触发。
如上图，输入数字并不会触发composition，有输入法编辑器时才会触发。
事件触发顺序
对于input[type="text"]当没有输入中文时，事件触发顺序为：
- keydown
- keypress
- beforeinput
- input
- keyup
- 失去焦点 change
当使用输入法输入w，并最终输出我时，事件触发顺序如图：
