网页前端开发（基础进阶3--Vue）

Vue3

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

Vue由2部分组成：Vue核心包，Vue插件包

Vue核心包包含：声明式渲染，组件系统。

Vue插件包：VueRouter（客户端路由），Vuex/Pinia（状态管理），Webpack/Vite（构建工具）

Vue的开发形式分为2种：基于核心包的局部开发，整站开发。

基于核心包的局部开发：只使用Vue核心包的局部开发。

整站开发：使用整个Vue生态进行开发。

框架：一套完整的项目解决方案，用于快速构建项目。

框架的优点：提升前端开发效率。

框架的缺点：需要记忆框架的使用规则。

1.Vue快速入门

（1）准备工作

1.引入Vue模块

在html文件中

<body>

        ..........

.........

        <script type=‘module’>

import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        </script>

</body>

2.创建Vue程序的应用示例，控制视图的元素

在html文件中

<body>

        ..........

.........

        <script type=‘module’>

import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

                createApp({ })；

        </script>

</body>

3.准备元素（div），被Vue控制。

<body>

        ..........

.........

        <script type=‘module’>

import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

                createApp({ }).mount('#app'); // 只针对与id为app的元素进行挂载

        </script>

</body>

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue入门</title>
</head>
<body><div id="app"><h1>{{ message }}</h1><h1>{{ count }}</h1></div><h1>{{ count }}</h1><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {message: 'Hello Vue!',count:100}}}).mount('#app'); // 只针对与id为app的元素进行挂载</script></body>
</html>

运行结果：

2.Vue常用指令

在html标签上，不同指令实现不同功能。

1.v-for

用于列表渲染，遍历容器中的元素/对象。

使用方法：

<tr v-for="(item, index) in itemList" :key="item.id">{{item}}</tr>

遍历itemList数组

遍历出来的元素是item

元素的索引是index

:key为遍历出来的元素添加唯一标识

[ ]是数组

{ }是对象

示例

<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"><!-- index表示索引从0开始 序号表示从1开始 --><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.position}}</td> //需要条件判断 <td>{{e.entryDate}}</td><td>{{e.lastOpTime}}</td><td><button type="button">修改</button><button type="button">删除</button></td></tr></tbody></table><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:'',gender:'',position:''},empList: [ //定义数组{"id":1,  //定义一个对象"name":"张三","gender": '1',"avatar": 'img/y2.png',"position": '1',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":2,"name":"李四","gender": '2',"avatar": 'img/y2.png',"position": '2',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":3,"name":"王五","gender": '1',"avatar": 'img/y2.png',"position": '3',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'}]} },// data后面添加方法methods:{search:function(){// 将搜索条件输出到控制台console.log(this.searchFrome);},clear:function(){// 清空搜索条件this.searchFrome={name:'',gender:'',position:''};}}}).mount('#all'); // 只针对与id为all的元素进行挂载</script>

头像一栏显示不正确。原因：插值表达式，不能出现在标签内部。需要使用v-bind进行修饰。

职位一栏不能正确显示，性别一栏（只有男或者女）可以使用三元运算符，但是职业有5种，无法使用三元运算符，应使用v-if/v-else-if/v-else或者v-show进行处理。

2.v-bind

动态为标签属性绑定值（插值表达式，不能在标签内使用）

使用方法:

v-bind:属性="变量" :属性="变量"

<td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>

可保证图片的正确显示。

<!-- 表格主体内容 --><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"  v-bind:src="e.image" :alt="e.name"></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>

3.v-if/v-else-if/v-else

用来控制元素的显示与隐藏。

基于条件判断，来控制创建或移除元素节点（条件渲染）

使用场景：网页运行时进行处理，要么显示要么不显示。

示例：

<body><div id="container"><!-- 表格展示区 --><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"  v-bind:src="e.image" :alt="e.name"></td><!-- 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>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table>

v-else-if必须在v-if之后，可有多个v-else-if。

v-else必须在v-if/v-else-if之后。

4.v-show

用来控制元素的显示与隐藏。与v-if/v-else-if/v-else有所区别。

v-if/v-else-if/v-else和v-show的区别：

v-if网页运行时处理，不满足条件，直接不渲染此元素。

v-show通过css样式，渲染v-show的所有元素，满足条件显示，不满足条件隐藏。

基于css样式的display来控制显示与隐藏。

使用场景：频繁切换显示与隐藏两种状态；如：下拉框。

示例：

<body><div id="container"><!-- 表格展示区 --><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"  v-bind:src="e.image" :alt="e.name"></td><!-- v-show: 控制元素的显示与隐藏 --><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> <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>
</body>

5.v-model

v-model用于获取表单项数据。

v-on用于事件绑定。

通常v-model和v-on配合起来使用。

v-model中绑定的变量必须在data中定义

v-model使用方法：

<body>

<script type="module">

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({

data() {

return {

searchFrome:{//封装用户输入的查询条件。

name:'',

gender:'',

position:''

}

}

}).mount('#all'); // 只针对与id为all的元素进行挂载

</script>

</body>

name<-->姓名

gender<-->性别

position<-->职位

具体代码：

<body>
<div id="all"><!-- 显示采集到的数据 --><!-- {{searchFrome}} --><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="请输入姓名"><label for="gender">性别：</label><select name="gender" id="genser" v-model="searchFrome.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select name="position" id="position" v-model="searchFrome.position"><option value=""></option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button></form><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:'',gender:'',position:''}} }}).mount('#all'); // 只针对与id为all的元素进行挂载</script>
</body>

在标签中使用：

<input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="请输入姓名">

将姓名文本栏中输入数据导入data中的searchFrome.name

在标签中使用：

<select name="gender" id="genser" v-model="searchFrome.gender">

将性别文本栏中输入数据导入data中的searchFrome.gender

在标签中使用:

<select name="position" id="position" v-model="searchFrome.position">

将职业文本栏中输入数据导入data中的searchFrome.position

效果如下：

6.v-on

使用方法：
v-on:click="函数名" 或

@click="函数名"

为html标签绑定事件（添加事件监听）。

通常与v-model配合使用。

 <button type="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button>

将查询与清空按钮绑定事件监听。

整体代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>员工管理</title><style>#all{width: 80%;margin: 0 auto;}.navbar{background-color: rgb(170, 170, 170);display: flex;/*弹性布局*/justify-content: space-between;/*左右对齐*/align-items: center;/*垂直居中*/padding: 5px;}.navbar h1{margin: 0;/*去掉h1标签的默认间距*/font-weight: bold;/*加粗*/color: white;/*白色文字*/font-family: "楷体";}.navbar a{color: white;font-weight: bold;/*加粗*/text-decoration: none;/*取消下划线*/align-items: center;/*垂直居中*/}.search-from{display: flex;flex-wrap: nowrap;/*换行*/align-items: center;/*垂直居中*/gap: 10px;/*间距*/margin-top: 10px;margin-bottom: 10px;}.search-from input,select{padding: 5px;width: 220px;}table{width: 100%;border-collapse: collapse;}th,td{border: 1px solid rgb(0, 0, 0);/*边框*/padding: 5px;text-align: center;}.footer{background-color: #b5b3b3;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}</style>
</head>
<body>
<div id="all"><div class="navbar"><h1>tlias 智能学习辅助系统</h1><a href="">退出登录</a></div><!-- 显示采集到的数据 --><!-- {{searchFrome}} --><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" v-model="searchFrome.name" placeholder="请输入姓名"><label for="gender">性别：</label><select name="gender" id="genser" v-model="searchFrome.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select name="position" id="position" v-model="searchFrome.position"><option value=""></option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button></form><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"><!-- index表示索引从0开始 序号表示从1开始 --><td>{{index+1}}</td>  <td>{{e.name}}</td><td>{{e.gender==1?'男':'女'}}</td><!-- 插值表达式，不能出现在标签内部 --><td><img class='avatar' v-bind:src="e.avatar" :alt='e.name'></td><!-- <td>{{e.position}}</td> //需要条件判断 --><td><span v-if="e.position==1">班主任</span><span v-else-if="e.position==2">讲师</span><span v-else-if="e.position==3">学工主管</span><span v-else-if="e.position==4">教研主管</span><span v-else-if="e.position==5">咨询师</span><span v-else>其他</span></td><td>{{e.entryDate}}</td><td>{{e.lastOpTime}}</td><td><button type="button">修改</button><button type="button">删除</button></td></tr></tbody></table><footer class="footer"><p>cyy有限公司</p><p>版权，时间2025.5.9</p></footer>
</div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({ data() {return {searchFrome:{//封装用户输入的查询条件。name:'',gender:'',position:''},empList: [ //定义数组{"id":1,  //定义一个对象"name":"张三","gender": '1',"avatar": 'img/y2.png',"position": '1',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":2,"name":"李四","gender": '2',"avatar": 'img/y2.png',"position": '2',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'},{"id":3,"name":"王五","gender": '1',"avatar": 'img/y2.png',"position": '3',"entryDate": '2020-01-01',"lastOpTime": '2025-01-01'}]} },// data后面添加方法methods:{search:function(){// 将搜索条件输出到控制台console.log(this.searchFrome);},clear:function(){// 清空搜索条件this.searchFrome={name:'',gender:'',position:''};}}}).mount('#all'); // 只针对与id为all的元素进行挂载</script></body>
</html>