1.v-html
| 作用 | 动态解析标签 |
|---|---|
| 语法 | v-html = "表达式 " 动态设置元素innerHTML |
代码展示 v-html 动态解析标签
2.v-show
| 作用 | 控制元素显示隐藏 |
|---|---|
| 语法 | v-show="表达式" 表达式值 true显示，false 隐藏 |
| 原理 | 切换display:none; 控制显示隐藏 |
| 场景 | 频繁切换显示隐藏 |
代码展示 v-on + v-show 控制元素频繁切换显示与隐藏
3.v-if
| 作用 | 控制元素显示隐藏(条件渲染) |
|---|---|
| 语法 | v-if="表达式" 表达式值 true显示，false 隐藏 |
| 原理 | 基于条件判断，是否 创建 或 移除 元素节点 |
| 场景 | 要么显示，要么隐藏，不频繁切换场景 |
代码展示 v-if 条件判断控制元素创建 或 移除
4.v-else v-else-if
| 作用 | 辅助 v-if 进行判断渲染 |
|---|---|
| 语法 | v-else v-else-if="表达式" |
| 注意 | 需要紧挨着 v-if 一起使用 |
代码展示 v-if v-else-if v-else 条件判断控制元素创建 或 移除
5.v-on
| 作用 | 注册事件 = 添加监听 + 提供处理逻辑 |
|---|---|
| 语法 | v-on:事件名="内联语句" v-on:事件名="methods中的函数名" |
| 简写 | @事件名 |
代码展示 v-on 内联语句操作dom
代码展示 v-on methods处理函数，调用传参
6.v-bind
| 作用 | 动态的设置html的标签属性 => src url title |
|---|---|
| 语法 | v-bind:属性名="表达式" |
| 简写 | :属性名="表达式" |
代码展示 v-bind 动态控制背景色
7.v-for
| 作用 | 基于数组循环，多次渲染整个元素 ->数组、对象、数字... |
|---|---|
| 语法 | v-for="(item,index) in 数组" ，item 每一项，index 下标， |
| 简写 | 省略index的写法：v-for= "item in 数组" |
8.v-for 中的 key
| 作用 | 给元素添加的唯一标识，便于vue进行列表项的正确排序复用 |
|---|---|
| 语法 | v-for="(item,index) in 数组" :key="唯一值" |
| 注意点 | key值必须具有唯一性，只能是字符串或数字类型 |
| 注意点 | key值推荐使用id作为key(唯一),不推荐使用index作为key(会变化，不对应) |
| v-for中不加key | v-for的默认行为会尝试 原地修改元素 （就地复用） |
代码展示 v-for 书架的基本渲染
删除功能->用filter根据id从数组中删除对应项后得到新的数组
9.v-model
| 作用 | 给表单元素使用，双向数据绑定 ->可以快速获取或设置 表单元素内容 |
|---|---|
| 1 | 数据变化->视图自动更新 |
| 2 | 视图更新->数据自动更新 |
| 语法 | v-model="变量" |
代码展示 v-model 模拟登录操作
10.综合案例 -竹烨的记事本
| 功能需求 | 功能实现 |
|---|---|
| 列表渲染 | v-for key的设置 {{}}插值表达式 |
| 删除功能 | v-on调用传参 filter过滤 覆盖修改原数组 |
| 添加功能 | v-model绑定 unshift 修改原数组添加 |
| 底部统计和清空 | 数组.length累计长度、覆盖数组清空列表、v-show控制元素显示隐藏 |
代码展示 竹烨记事本
11.指令修饰符
| 作用 | 通过 '.'指明一些指令 后缀， 不同 后缀 封装了不同的处理操作 ->简化代码 |
|---|---|
| 1 | 按键修饰符 |
| @keyup.enter | 键盘回车监听 |
| 2 | v-model修饰符 |
| v-model.trim | 去除首尾空格 |
| v-model.number | 转数字 |
| 3 | 事件修饰符 |
| @事件名.stop | 阻止冒泡 |
| @事件名.prevent | 阻止默认行为 |
代码展示 v-model 竹烨记事本优化
12.v-bind控制样式
| 作用 | 为方便开发者进行样式控制，v-bind可针对class类名和style行内样式进行控制。 |
|---|---|
| v-bind对样式控制- 操作class | |
| 语法 | :class="对象/数组" |
| 1对象 | 键就是类名，值就是布尔值。如果值为true，有这个类，否则没有这个类 |
| :class="{类名1:布尔值,类名2:布尔值}" | |
| 适用场景 | 一个类名，来回切换 |
| 2数组 | 数组中所有的类，都会添加到盒子上，本质上就是一个class列表 |
| :class="[类名,类名2,类名3]" | |
| 适用场景 | 批量删除或删除类 |
代码展示 动态控制class 京东秒杀tab导航高亮
