JavaWeb03-Vue

Vue

什么是Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（http://cn.vuejs.org/）
- 构建用户界面
- 渐进式
- 框架：就是一套完整的项目解决方案，用于快速构建项目
  - 优点：大大提升前端项目的开发效率
  - 缺点：需要理解记忆框架的使用规则

1.Vue快速入门

准备
- 引入Vue模块
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素（div），被Vue控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue快速入门</title>
</head>
<body><div id="app"><h1>{{message}}</h1><h1>{{count}}</h1>
</div><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return {message:'Hello Vue',count:100}}}).mount('#app');
</script>
</body>
</html>

2.Vue常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
常用指令

案例：

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中定义；要想让哪个标签循坏展示多次，就在哪个标签上使用 v-for 指令。

<body>
<!-- 头部区域 -->
<div id = "container"><div class="header"><h1>Tlias智能学习辅助系统</h1><a href="#" class="logout">退出登录</a></div><!-- 搜索区域 --><div class="search-area"><label>姓名：</label><input type="text" placeholder="请输入姓名"><label>性别：</label><select><option value="">请选择</option><option value="1">男</option><option value="2">女</option></select><label>职位：</label><select><option value="">请选择</option><option value="1">职位1</option><option value="2">职位2</option></select><button>查询</button><button>清空</button></div><!-- 表格区域 --><div class="table-area"><table><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr v-for = "(e,index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1 ? '男' : '女'}}</td>
<!--        插值表达式是不能出现在标签内部的--><td><img class="avatar" src="{{e.image}}" alt="e.name"></td><td>{{e.job}}</td><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table></div><!--初始化Vue实例--><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return{empList:[{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-09-30T14:59:38"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2024-09-01T00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2024-09-01T00:00:00"}]}}}).mount('#container')</script>

效果：

v-bind

作用：动态为HTML标签绑定属性值，如设置herf，src，style样式等。
语法：v-bind：属性名 = “属性值”
```
<img v-bind:src="item.image" width="30px">
```
简化：：属性名=“属性值”
```
<img :src="item.image" width="30px">
```

注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据，必须在data中定义、

在上面我们提到插值表达式是不能出现在标签内部的

这时候就可以使用v-bind指令了上图我们知道图片无法显示，因为插值表达式用在了标签内部，将上面的代码稍加修改，改为：

<tr v-for = "(e,index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1 ? '男' : '女'}}</td><td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td><td>{{e.job}}</td><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr>

效果：

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
- 语法：v-if=“表达式”，表达式值为true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，适用于不频繁切换的场景
- 其他：可以配合v-else-if / v-else 进行链式调用条件判断
```
<span v-if="gender == 1">男生</span>
<span v-else-if="gender == 2">女生</span>
<span v-else>未知</span>
```
v-show
- 语法：v-show=“表达式”，表达式值为 true，显示；false，隐藏
- 原理：==基于CSS样式display来控制显示与隐藏
- 场景：适用于频繁切换显示隐藏的场景

注意：v-else-if必须出现在v-if之后，可以出现多个；v-else 必须出现在v-if/v-else-if之后。

展示职位：

<!--        v-if:控制元素的显示与隐藏--><td><span v-if="e.job == 1">班主任</span><span v-else-if="e.job == 2">讲师</span><span v-else-if="e.job == 3">学工主管</span><span v-else-if="e.job == 4">教研主管</span><span v-else-if="e.job == 5">咨询师</span><span v-else>其他</span></td>

<td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">讲师</span><span v-show="e.job == 3">学工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨询师</span></td>

可以观察到v-show通过将display属性置为none来管理是否显示该属性

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-momel=“变量名”

注意：v-model中绑定的变量，必须在data中定义。

首先在Vue实例中更新：

<script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return{empList:[{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-09-30T14:59:38"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2024-09-01T00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2024-09-01T00:00:00"}],searchForm:{ //封装用户输入的查询条件name:'',gender:'',job:''}}}}).mount('#container')</script>

可见我们添加了一个searchForm 用来封装用户输入的查询条件这个与上面的empList平级

然后我们用v-model来绑定数据

将封装的姓名性别职位从上面的搜索区域用v-model进行封装

我们可以

显示一下searchForm里面的内容

可以看到我们从视图中输入数据时，数据模型中的数据

发生变化；当我们从数据模型中输入数据时，视图中的数据也会发生变化。这就是v-model将数据进行了双向数据绑定！

v-on

作用：为html标签绑定事件（添加事件监听）
语法：
- v-on：事件名=“方法名”
- 简写为 @事件名=“...”
```
<div id="app"><button type="button" v-on:click="handle">点我</button><button type="button" @click="handle">再点我</button>
</div>
```
注意：methods 与 data平级

在相应按钮上添加v-on指令，指定哪个按钮，方法名为search
```
<button v-on:click = "search">查询</button>
```
编写对应方法：

可以看到，我们输入相应信息，点击查询后，右下角的控制台中出现了对应信息。

同样，将清空按钮添加指令：
```
<button @click = "clear">清空</button>
```