Web开发系列-第3章 Vue2 + Element

pengzhuofan

于 2025-07-27 18:05:14 发布

阅读量713

点赞数 23

CC 4.0 BY-SA版权

文章标签： web 前端

本文链接：https://blog.csdn.net/weixin_66095070/article/details/149693586

第3章 Vue2 + Element

3.1 为什么使用Vue？

Vue的MVVM((Model-View-ViewModel))前端开发思想简化了数据绑定到视图的流程。

Model: 数据模型，特指前端中通过请求从后台获取的数据。
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据。
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上。

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

3.2 Vue指令

vue的常用指令，如下表所示：

指令	作用
v-bind/：	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on/@	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染(用于低频率切换元素)
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值(用于高频率切换元素)
v-for	列表渲染，遍历容器的元素或者对象的属性

v-if和v-show示例代码：

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

v-for指令遍历的语法格式如下：

 <tr align="center" v-for="(user,index) in users">
     <td>{{index + 1}}</td>
     <td>{{user.name}}</td>
     <td>{{user.age}}</td>
     <td>
         <span v-if="user.gender == 1">男</span>
         <span v-if="user.gender == 2">女</span>
     </td>
     <td>{{user.score}}</td>
     <td>
         <span v-if="user.score >= 85">优秀</span>
         <span v-else-if="user.score >= 60">及格</span>
         <span style="color: red;" v-else>不及格</span>
     </td>
</tr>

3.3 Vue生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

常用的是mounted阶段，用于在网页挂载后获取后台数据。

3.4 为什么使用Ajax & Axios

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

与服务器进行数据交换。
异步交互：在不重新加载整个页面时，与服务器交换数据并更新部分网页的技术，例如：Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新。

Axios：对AJAX进行封装，简化书写。提高了开发数据交换功能的效率。

Axios官网是：https://www.axios-http.cn

Axios使用步骤：

1.引入Axios依赖

2.编写Axios的发送请求方法

例如：发送post请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

针对不同请求的api：

方法描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求

示例代码：
```
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})
```

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

3.5 前端工程化

3.5.1 什么是前端工程化？

前端工程化包括如下4个特点

模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成

5.5.2 前端工程化分几步？

0.要安装NodeJS和安装Vue-cli，NodeJS为JavaScript提供了运行环境，Vue-cli是脚手架工具。

1.创建vue项目

命令行：直接通过命令行方式创建vue项目
```
vue create vue-project01
```
图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建
```
vue ui
```
vue项目的标准目录结构以及目录对应的解释如下图所示:

3.6 Vue项目开发流程

index.html 是默认首页；main.js是人口文件；App.vue是根组件。

对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
new Vue(): 创建vue对象
$mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
router: 路由，详细在后面的小节讲解
render: 主要使用视图的渲染的。

vue的组件文件包含3个部分：

template: 模板部分，主要是HTML代码，用来展示页面主体结构的
script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
style: css样式部分，主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例：

1669313699186

3.7 Vue组件库Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。

其官网地址：Element - The world's most popular Vue UI framework

3.7.1 使用Element组件库分几步？

1.安装ElementUI的组件库

命令行输入如下命令：
```
npm install element-ui@2.15.3 
```
具体操作如下图所示：

2.在main.js人口文件中中引入ElementUI的组件库，其代码如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体操作如图所示：

1669358935188

3.在src/views目录下创建一个新的组件文件XxxxXxxx.vue，并去ElementUI组件库粘贴、改造代码。

4.默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

1669360320983

3.7.2 Element组件库常用组件有哪些？

常用组件如下表格：

组件	作用
Button按钮	常用的操作按钮。
Form 表单	由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
Table 表格	展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Pagination分页	当数据量过多时，使用分页分解数据。
Dialog 对话框	在保留当前页面状态的情况下，告知用户并承载相关操作。
Container 布局容器	用于布局的容器组件，方便快速搭建页面的基本结构。

3.7.3 Vue项目的Axios使用

在vue项目中，对于axios的使用，分为如下2步：

安装axios: npm install axios；
需要使用axios时，导入axios: import axios from 'axios'。

3.7.4 如何修复后端数据的真实含义？

在数据标签中插入如下的自定义列内容。

如下：性别内容展示修复和图片内容展示修复

<el-table-column prop="gender"    label="性别" width="140">
     <template slot-scope="scope">
    	 {{scope.row.gender==1?"男":"女"}}
     </template>
</el-table-column>

<el-table-column prop="image"     label="图像" width="180">
    <template slot-scope="scope">
        <img :src="scope.row.image" width="100px" height="70px">
    </template>
</el-table-column>

3.8 如何进行导航跳转(Vue路由)？

vue官方提供了路由插件Vue Router,其主要组成如下：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

其工作原理如下图所示：

1669386261570

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击，发出路由请求;

接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；

最后VueRouter会切换<router-view>中的组件，从而进行视图的更新

3.8.1 开发Vue路由功能分几步？

1.安装vue-router插件，可以通过如下命令

npm install vue-router@3.5.1

或者在创建项目时，选择路由功能

2.在src/router/index.js文件中自定义路由表，根据其提供的模板代码进行修改，最终代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

3.导航栏中添加超链接，例：修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为router-link,其代码如下：

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
</el-menu-item>

4.在App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：

<template>
  <div id="app">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import EmpView from './views/tlias/EmpView.vue'
// import ElementView from './views/Element/ElementView.vue'
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

5.默认路由路径重定向，下面是示例代码：

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  },
]