一、Vue是什么
Vue是一款用于构建用户界面的渐进式的JavaScript框架。
官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
其核心特性包括：
- 响应式数据绑定：通过 Vue 的响应式系统，数据变化会自动反映到视图，减少手动 DOM 操作。
- 组件化开发：将界面拆分为独立可复用的组件，便于维护和协作。
- 虚拟 DOM（Virtual DOM）：通过 JavaScript 对象模拟 DOM 结构，减少真实 DOM 操作，提升性能。
- 渐进式集成：可从一个组件开始逐步扩展，也可与其他库（如 React 生态工具）结合使用。
二、Vue的使用
1、 操作步骤：
准备一个html文件，引入Vue模块 （参考官方文档 ）【注意：模块化的js，引入时，需要设置
type="module"】创建Vue程序的应用实例
准备元素（div），交给Vue控制
<body><div id="app"><h2>{{ message }}</h2></div><!-- 引入 Vue 3 --><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'// 创建 Vue 应用实例并挂载到 #app 元素上createApp({data() {return {message: 'Hello, Vue 3!'};}}).mount('#app');</script>
</body>
注意：
Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。
插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会无效显示 。
Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在
<div id="app">...</div>的里面 。
二、Vue指令
指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能 。
| 指令 | 作用 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
| v-if/v-else-if/v-else | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
1、v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
参数：
items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始 ；可以省略，省略index语法：
v-for = "item in items"key：
作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
注意：遍历的数组，必须在data中定义.
操作如下表的数据
上图的数据使用数组来存放数据：
<!-- vue数据绑定 --><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {users: [{ id: 1, name: '徐帆', images: 'https://picsum.photos/30/30?random=1', gender: '1', position: '1', hireDate: '2024-06-09', lastActive: '2024-07-30 14:59:38' },{ id: 2, name: '崔威威', images: 'https://picsum.photos/30/30?random=2', gender: '1', position: '2', hireDate: '2025-05-09', lastActive: '2025-07-01 00:00:00' },{ id: 3, name: '张翠花', images: 'https://picsum.photos/30/30?random=3', gender: '2', position: '2', hireDate: '2024-05-15', lastActive: '2024-06-18 09:30:15' }]};}}).mount('.container');</script>再遍历每一条数据：
<tbody><!-- 数据加载tr... --><tr v-for="(user,index) in users" :key="user.id"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.gender==1?'男':'女'}}</td><!--插值表达式不能直接使用在标签中--><td><img src="{{user.image}}" class="avatar" alt="{{user.name}}"></td><td>{{user.position}}</td><td>{{user.hireDate}}</td><td>{{user.lastActive}}</td><td><button class="action-btn">编辑</button><button class="action-btn">删除</button></td></tr></tbody>
2、v-bind
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值" <img v-bind:src="item.image" width="30px">
简化：
:属性名="属性值"<img :src="item.image" width="30px">
注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。
<!--动态为HTML标签绑定属性值--><td><img v-bind:src="user.images" class="avatar" :alt="user.name"></td>
3、v-if& v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
如职位判断操作：
<!--v-if..v-else-if..v-else 来控制元素的显示或隐藏--><td><span v-if="user.position == '1'">班主任</span><span v-else-if="user.position == '2'">讲师</span><span v-else-if="user.position == '3'">学工主管</span><span v-else-if="user.position == '4'">教学主管</span><span v-else-if="user.position == '5'">咨询师</span><span v-else>未知职位</span></td>再通过右键 | 审查元素 查看Element：
总之：使用v-if确实是根据条件判断，是否渲染这个元素节点，条件成立才会渲染。
v-show语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景
如职位判断操作：
<!-- 使用v-show来显示职位 --><td> <span v-show="user.position == '1'">班主任</span><span v-show="user.position == '2'">讲师</span><span v-show="user.position == '3'">学工主管</span><span v-show="user.position == '4'">教学主管</span><span v-show="user.position == '5'">咨询师</span></td>再通过右键 | 审查元素 查看Element：
总之：使用
v-show指令来渲染展示，所有元素都会渲染，只不过是通过控制display这个css样式，来决定元素是展示还是隐藏。
4、v-model
作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示 。 视图中的输入的数据变化，也会影响Vue的数据模型 。
注意：v-model 中绑定的变量，必须在data中定义。
如搜索栏的表单项，绑定数据：
<form class="search-form"><div class="form-group"><label for="name">姓名</label><input type="text" id="name" v-model="findForm.name" placeholder="请输入姓名"></div><div class="form-group"><label for="gender">性别</label><select id="gender" v-model="findForm.gender"><option value="">全部</option><option value="1">男</option><option value="2">女</option></select></div><div class="form-group"><label for="position">职位</label><select id="position" v-model="findForm.position"><option value="">全部</option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教学主管</option><option value="5">咨询师</option><option value="6">其他</option></select></div><button class="btn btn-primary">查询</button><button class="btn btn-secondary">清空</button></form>测试
安装vue插件：极简插件 - 搜索插件 - vue
打开谷歌浏览器| 完成更新
将下载的文件解压，再拖拉到这里，再添加
注意：单击详情，修改一下启用状态
操作如下：
5、v-on
作用：为html标签绑定事件（添加时间监听）
语法：v-on:事件名="方法名"
<input type="button" value="查询" v-on:click="searchUsers">
简写 @事件名="…"
<input type="button" value="清空" @click="clearForm">
<button class="btn btn-primary" v-on:click="searchUsers">查询</button><button class="btn btn-secondary" @click="clearForm">清空</button>运行如下：
注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。
