Vue 基础:指令、事件与表单
Vue 基础:指令、事件与表单
vue是渐进式的javascript框架
vue核心特性对dom操作的依赖减少了
vite是前端构建工具
npm是node.js的包管理器
assets是物料包
默认插值会转义html 需要v-html标签
v-bind可以实现标签的属性绑定(如果标签有多个属性也可以分别绑定)
class可以有多个类名 空格隔开 这些类名都有效 为了复用样式
v-on绑定事件
常用的事件汇总
| 事件 | 触发时机 | 典型场景 |
|---|---|---|
click | 单击鼠标 | 按钮提交、跳转、开关 |
dblclick | 双击鼠标 | 编辑条目、放大图片 |
mouseenter | 鼠标进入元素（不冒泡） | 悬停显示提示、高亮 |
mouseleave | 鼠标离开元素（不冒泡） | 隐藏提示、取消高亮 |
mouseover | 鼠标进入元素（冒泡） | 与 mouseenter 类似但会冒泡 |
mouseout | 鼠标离开元素（冒泡） | 与 mouseleave 类似 |
mousemove | 鼠标在元素内移动 | 拖拽、绘图、跟随效果 |
mousedown | 鼠标按下（未松开） | 拖拽开始、按住连击 |
mouseup | 鼠标松开 | 拖拽结束 |
| keyup 是键盘事件，在用户松开键盘按键时触发 |
常用事件修饰符
.stop组织冒泡
.prevent组织默认行为
.once只触发一次
.enter按enter触发
botton
type
| 值 | 作用 | 典型场景 |
|---|---|---|
submit | 提交表单（默认值，在 <form> 内时） | 登录、注册、搜索 |
reset | 重置表单（清空所有表单字段） | 清空表单 |
button | 普通按钮（无默认行为） | 自定义交互、弹窗、跳转 |
disabled —— 禁用按钮
autofocus —— 页面加载时自动获得焦点
name —— 按钮名称（配合表单提交）
value —— 按钮的值（配合表单提交）
form —— 指定按钮所属的表单（即使不在表单内部）
formaction —— 覆盖表单的 action 地址
formenctype —— 覆盖表单的编码方式（文件上传时用）
formmethod —— 覆盖表单的提交方法
formnovalidate —— 跳过表单验证
formtarget —— 指定提交结果的打开位置
tabindex —— Tab 键切换顺序
v-model双向绑定
实际是把值赋给了value 同时监听了对应标签的事件
对于type="number" 需要v-model.number来绑定
表单元素共有属性（input、textarea、select、button 等）
| 属性 | 作用 | 示例 | 使用频率 |
|---|---|---|---|
name | 表单字段名称（提交时作为 key） | <input name="username"> | ⭐⭐⭐⭐⭐ |
value | 字段的值 | <input value="张三"> | ⭐⭐⭐⭐⭐ |
disabled | 禁用（不可交互） | <input disabled> | ⭐⭐⭐⭐ |
required | 必填（表单验证） | <input required> | ⭐⭐⭐⭐ |
autofocus | 页面加载后自动聚焦 | <input autofocus> | ⭐⭐⭐ |
autocomplete | 自动补全（on/off） | <input autocomplete="off"> | ⭐⭐⭐ |
form | 关联到指定表单（by id） | <input form="myForm"> | ⭐⭐ |
readonly | 只读（不可编辑，但可选中） | <input readonly> | ⭐⭐⭐ |
placeholder | 输入提示文本 | <input placeholder="请输入"> | ⭐⭐⭐⭐⭐ |
input的type
| type 值 | 作用 | 移动端键盘 | 使用场景 |
|---|---|---|---|
text | 单行文本输入（默认值） | 标准字母键盘 | 用户名、标题、地址 |
password | 密码输入（字符被掩码隐藏） | 标准字母键盘 | 登录/注册密码 |
email | 邮箱地址 | 字母键盘 + @ 和 . 快捷键 | 邮箱输入 |
tel | 电话号码 | 数字键盘 | 手机号、座机 |
url | 网址链接 | 字母键盘 + / 和 . 快捷键 | 网站地址输入 |
search | 搜索框（带清除按钮） | 标准字母键盘 + 搜索按钮 | 搜索功能 |
| type 值 | 作用 | 特点 | 使用场景 |
|---|---|---|---|
number | 数字输入框 | 有上下箭头按钮，移动端弹出数字键盘 | 年龄、数量、价格 |
range | 滑块 | 滑动选择数值，移动端触摸友好 | 音量、亮度、价格区间 |
| type 值 | 作用 | 显示效果 | 使用场景 |
|---|---|---|---|
date | 日期选择器（年-月-日） | 日历弹窗 | 生日、开始日期 |
datetime-local | 本地日期+时间 | 日期+时间选择器 | 会议时间、预约 |
month | 月份选择（年-月） | 月份选择器 | 账单月份 |
week | 周选择（年-第几周） | 周选择器 | 排期、计划 |
time | 时间选择（时:分） | 时间选择器 | 闹钟、时刻 |
| type 值 | 作用 | 特点 | 使用场景 |
|---|---|---|---|
checkbox | 复选框 | 可多选，选中提交 value 值 | 同意协议、多选爱好 |
radio | 单选框 | 同 name 组内互斥 | 性别、支付方式 |
| type 值 | 作用 | 特点 | 使用场景 |
|---|---|---|---|
file | 文件上传 | 可配合 accept 限制类型 | 头像上传、附件 |
image | 图片按钮（点击提交表单） | 可设置 src 显示图片 | 图形化提交按钮 |
color | 颜色选择器 | 弹出颜色面板 | 主题色、字体颜色 |
| type 值 | 作用 | 特点 | 使用场景 |
|---|---|---|---|
button | 普通按钮 | 无默认行为，需 JS 绑定事件 | 自定义交互 |
submit | 提交按钮 | 点击提交所在表单 | 表单提交 |
reset | 重置按钮 | 清空/重置表单所有字段 | 清空表单 |
image | 图片按钮 | 带图片的提交按钮（同 image） | 图标提交 |
key绑定item.id但是没有绑定index 因为 index 是动态变化的。当数组发生非末尾的插入或删除时，后面所有元素的 index 都会改变。Vue 在更新 DOM 时，会复用带有旧 index 的 DOM 元素，导致视图与数据不匹配（状态错乱），并且会触发不必要的 DOM 更新（性能浪费）。所以，必须使用数据中唯一且稳定的标识，比如后端返回的 id，来作为 key