Vue框架+Element组件库

目录

1.Vue框架&快速入门 

1.1 Vue常用指令

1.1.1 v-bind&v-model

1.1.2 v-on 

1.1.3 v-if&v-else&v-else-if&v-show 

1.1.4 v-for 

1.2 Vue生命周期

1.3 Vue案例

2.Element前端组件库概述&使用&布局

3.基于Vue+Element的一个分页查询案例

4.前端代码优化（扩展）

---

1.Vue框架&快速入门 

 

 划线部分要一一对应，{{}}内的是插值表达式，即绑定的值

---

1.1 Vue常用指令

---

1.1.1 v-bind&v-model

示例：

 划线部分要对应

---

1.1.2 v-on 

方法写在methods里

---

1.1.3 v-if&v-else&v-else-if&v-show 

---

1.1.4 v-for 

示例：

定义数组

 

 i为索引，效果如下：

---

1.2 Vue生命周期

 一般掌握mounted方法即可

---

1.3 Vue案例

html代码：

  

注意对应关系关系即可

---

2.Element前端组件库概述&使用&布局

 

 官网：组件 | Elementhttps://element.eleme.cn/#/zh-CN

Vue+Element使用理解：去Element官网获取组件搭建页面，在组件标签中使用v-model绑定模型，在<script>的Vue中设置el（绑定范围）、data（）{return{}}中设置绑定数据，method：{}中设置方法。

---

3.基于Vue+Element的一个分页查询案例

PageBean代码：

Mapper代码：

Service代码：

ServiceImp代码：

 

Servlet代码：

HTML代码：

method：

Vue类方法代码：

Element组件库代码：  

 

data代码： 

---

4.前端代码优化（扩展）

 

可以等效替换为（少处理了this关键字）：

---