<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>
<!--如果遍历集合数据类型-->
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{{索引变量 + 1}} {{变量名}}
</标签>备注：哪个标签要遍历v-for，就添加在哪个标签上，标签遍历多少次，就会在网页上生成多少个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}} <br>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
addrs:["北京","上海","西安"]
}
}
});
</script>
</body>
</html>效果展示：
4、Vue生命周期
生命周期的八个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<script>
new vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com",
count:3,
addrs:["北京","上海","广州"]
}
},
methods:{
show(){
alert("不要点我");
}
},
/\*原始写法：
mounted:function () {
}\*/
mounted(){
alert("加载完成");
}
})
</script>
</body>
</html>
案例演示：
使用的是上一篇文章的案例，详细步骤这里就不赘述了。
感兴趣的可以回看一下：✈️一文快速搞懂JSON
使用Vue优化后的代码：
brand.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示所有数据的也买你</title>
<!--引入axios.js库-->
<script src="../js/axios-0.18.0.js"></script>
<!--引入vue.js库-->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
<!--Vue需要表头，原生不需要，因为它是直接拼接字符串-->
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<!--使用v-for遍历tr-->
<tr v-for="(brand,i) in brands" align="center">
<td>{{i + 1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.statusStr}}</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
</table>
</div>
<script>
/\* 原始JS操作，拖沓冗长，含有大量重复的DOM操作，代码重复率高
//当页面加载完成后，发送AJAX请求
window.onload = function () {
//1、发送AJAX请求
axios({
method:"post",
url:"http://localhost:8080/day13\_brand-demo/selectAllServlet"
}).then(function (resp) {
//2、获取响应数据
let brands = resp.data;
//显示表头数据，表头不参与遍历
let tableData =
"<tr>\n" +
" <th>序号</th>\n" +
" <th>品牌名称</th>\n" +
" <th>企业名称</th>\n" +
" <th>排序</th>\n" +
" <th>品牌介绍</th>\n" +
" <th>状态</th>\n" +
" <th>操作</th>\n" +
" </tr>";
//3、遍历JSON字符串数组，获取数组中每一个brand对象
for (let i = 0; i < brands.length; i++) {
let brand = brands[i];
tableData += "\n"+
"<tr align=\"center\">\n" +
" <td>"+(i+1)+"</td>\n" +
" <td>"+brand.brandName+"</td>\n" +
" <td>"+brand.companyName+"</td>\n" +
" <td>"+brand.ordered+"</td>\n" +
" <td>"+brand.description+"</td>\n" +
" <td>"+brand.statusStr+"</td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
" </tr>";
}
//将数据在表格中显示
document.querySelector("#brandTable").innerHTML = tableData;//切记别给tableData加引号
});
}
\*/
/\*\*
\* 使用Vue优化DOM操作
\* 1、用一个id为app的div将所有body里面的html代码包裹起来
\*/
new Vue({
el: "#app",
//2、将对象变成模型（作用域提升成全局变量了），这样就能在html标签中使用了
data() {
return {
brands: []
}
},
mounted() {
//3、页面加载后，发送AJAX请求
//axios里面的this指的是Window对象，所以需要手动设置一个this变量
var \_this = this;//将Vue对象赋值给\_this变量
axios({
method: "post",
url: "http://localhost:8080/day13\_brand-demo/selectAllServlet"
}).then(function (resp) {
//4、将Servlet响应回来的数据展示到网页上
//axios里面的this指的是Window对象，因为axios由浏览器发送，我们需要的是Vue对象
//this.brands = resp.data;
\_this.brands = resp.data;
})
}
})
</script>
</body>
</html>这Vue用到也太爽了吧O(∩_∩)O
addBrand.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据添加页面</title>
<!--引入axios库-->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
状态：
<input type="radio" v-model="brand.status" name="status" value="0">禁用
<input type="radio" v-model="brand.status" name="status" value="1">启用<br>
<input type="button" id="btn" v-on:click="submitForm" value="提交">
</form>
</div>
</body>
<script>
/\*
//原生JS
//给按钮绑定一个点击事件，一旦点击提交按钮就发送给AJAX请求，实现局部刷星
document.querySelector("#btn").onclick = function () {
//0、将表单数据转换成JSON字符串
var formData = {
brandName : "",
companyName : "",
ordered : "",
description : "",
status : "",
}
//获取数据
let brandName = document.querySelector("#brandName").value;
let companyName = document.querySelector("#companyName").value;
let ordered = document.querySelector("#ordered").value;
let description = document.querySelector("#description").value;
let status = document.getElementsByName("status");//重点、难点！
//设置数据
formData.brandName = brandName;
formData.companyName = companyName;
formData.ordered = ordered;
formData.description = description;
for (let i = 0; i < status.length; i++) {
if(status[i].checked){
//被选中，获对应的值
formData.status = status[i].value;
}
}
console.log(formData.status);
//1、发送AJAX请求
axios({
method:"post",
url:"http://localhost:8080/day13\_brand-demo/addServlet",
data:{
brandName:formData.brandName,
companyName:formData.companyName,
ordered:formData.ordered,
description:formData.description,
status:formData.status
}
}).then(function (resp) {
//判断响应是否成功
if("success" == resp.data){
location.href = "http://localhost:8080/day13\_brand-demo/html/brand.html";
}else{
alert("数据添加失败，数据添不能为空！")
}
});
}
\*/
/\*\*
\* 采用Vue
\* 1、使用一个id为app的div将body里面的html的代码套起来
\* 2、使用v-on给提交按钮绑定点击事件
\* 4、使用v-model对标签进行数据的双向绑定
\*/
new Vue({
el: "#app",
//设置模型，将来自用户输入的数据和模型绑定，遮样可以使用Vue对象让axios访问，然后发送到Servlet
data(){
return{
brand:{}
}
},
methods:{
submitForm(){
//3、向Servlet发送AJAX请求
//将Vue对象转换成一个变量，方便在axios中访问，axios中的this对象是Window对象
var vue = this;
axios({
method: "post",
url:"http://localhost:8080/day13\_brand-demo/addServlet",
data:vue.brand
}).then(function (resp) {
//判断响应是否成功
if("success" == resp.data){
location.href = "http://localhost:8080/day13\_brand-demo/html/brand.html";
}else{
alert("数据添加失败，数据添不能为空！")
}
});
}
}
});
</script>
</html>效果展示：
PS：使用Vue的效果和原生JS也是一样的，但是使用Vue相对原生JS的DOM操作而言真的是太简便了，太爱了。而且我这还是一个简单的小案例，可想而知在真实的项目开发中，Vue能减少多少代码。真的是太佩服发明框架的那群（那个）大好人了p(≧▽≦)q(´▽`ʃ♡ƪ)
被这个XX（眼瞎+手抖）错误给搞吐了┭┮﹏┭┮（这个该死的错误还没有提示，只是提示submitForm未定义，问题是网上还有好多关于函数未定义的解决方案，我愣是试了好多遍，改bug要了我半条命）
初识ELment
1、Elment概述
- Element是什么？
是由饿了么前端开发团队提供的一套基于Vue2.0的网站组件库。
- Element的作用？
为开发着提供好看且实用的组件，帮助开发者更快地构建网站。
- Element的特点：
- 一致性 Consistency
- 反馈 Feedback
- 效率 Efficiency
- 可控 Controllability
2、Elment快速入门
#mermaid-svg-oMQaRAZKDczT3mxZ {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .error-icon{fill:#552222;}#mermaid-svg-oMQaRAZKDczT3mxZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-oMQaRAZKDczT3mxZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-oMQaRAZKDczT3mxZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-oMQaRAZKDczT3mxZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-oMQaRAZKDczT3mxZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-oMQaRAZKDczT3mxZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-oMQaRAZKDczT3mxZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-oMQaRAZKDczT3mxZ .marker.cross{stroke:#333333;}#mermaid-svg-oMQaRAZKDczT3mxZ svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-oMQaRAZKDczT3mxZ .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .cluster-label text{fill:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .cluster-label span{color:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .label text,#mermaid-svg-oMQaRAZKDczT3mxZ span{fill:#333;color:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .node rect,#mermaid-svg-oMQaRAZKDczT3mxZ .node circle,#mermaid-svg-oMQaRAZKDczT3mxZ .node ellipse,#mermaid-svg-oMQaRAZKDczT3mxZ .node polygon,#mermaid-svg-oMQaRAZKDczT3mxZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-oMQaRAZKDczT3mxZ .node .label{text-align:center;}#mermaid-svg-oMQaRAZKDczT3mxZ .node.clickable{cursor:pointer;}#mermaid-svg-oMQaRAZKDczT3mxZ .arrowheadPath{fill:#333333;}#mermaid-svg-oMQaRAZKDczT3mxZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-oMQaRAZKDczT3mxZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-oMQaRAZKDczT3mxZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-oMQaRAZKDczT3mxZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-oMQaRAZKDczT3mxZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-oMQaRAZKDczT3mxZ .cluster text{fill:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ .cluster span{color:#333;}#mermaid-svg-oMQaRAZKDczT3mxZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-oMQaRAZKDczT3mxZ :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}引入Vue的js库
引入Element的js文件
和Element的css文件
去官网拷贝代码
修改数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格组件的使用</title>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加数据对话框表单-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
align="center"
label="排序">
</el-table-column>
<el-table-column
prop="status"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
<script>
new Vue({
el: "#app",
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
// 查询方法
onSubmit() {
console.log(this.brand);
},
// 添加数据
addBrand(){
console.log(this.brand);
},
//分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
// 当前页码
currentPage: 4,
// 添加数据对话框是否展示的标记
dialogVisible: false,
// 品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
// 复选框选中数据集合
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}]
}
}
})
</script>
</body>
</html>3、Element标签、属性说明
想要说明组件就只需要将代码拷贝下来就行了，哪里不懂删哪里，修修改改就是我的了😆
3.1 按钮组件
<!DOCTYPE html>
<html lang="en">
<!--Element按钮组件演示-->
<head>
<meta charset="UTF-8">
<title>Element初体验</title>
<!--引入vue.js库-->
<script src="../js/vue.js"></script>
<!--引入element的js文件-->
<script src="../element-ui/lib/index.js"></script>
<!--element的css文件-->
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</body>
<script>
/\*\*
\* 1、引入Vue所需js库
\* 2、引入Element所需要的js和css文件
\* 3、创建一个id为app的div，代码写在该div中
\*/
new Vue({
el: "#app"
});
</script>
</html>
3.2 表格组件介绍
-
handleSelectionChange：复选框选中后执行的方法
给复选框绑定事件
→
编写事件方法
→
绑定数据
给复选框绑定事件\rightarrow{编写事件方法}\rightarrow{绑定数据}
给复选框绑定事件→编写事件方法→绑定数据
需要在模型中设置复选框选中后数据，这样当我们点击复选框是，复选框中所有的数据就能被Vue对象获取
示例：
3.3 表单组件
捋一捋表单提交的工作流程：表单绑定模型数据，当我们点击查询按钮，就会触发查询表单的
onSubmit事件，然后就会将页面上用书输入的数据传递给模型（视图绑定模型），然后通过Vue对象可以将模型数据传递给axios对象，然后通过axios对象将数据发送给对应的Servlet，Servlet（表现层）调用Service方法（业务逻辑层）的方法，业务逻辑层再调用Mapper接口（数据访问层）中的方法从数据库中获取数据，最终返回给Service（业务逻辑层），Service层将数据再传递给Servlet，最终Servlet将数据进行封装响应给HTML。
3.4 对话框组件
使用对话框，一般需要先设置一个按钮，由按钮触发对话框。
对话框中表单的表单信息：
绑定模型数据的目的，是为了让Vue对象能获取到表单中的数据，然后通过Vue将数据传递给axios
比如前面的案例演示，就是这里原理：
效果展示：
效果展示：
3.5 分页工具条组件
ng)
比如前面的案例演示，就是这里原理：
效果展示：
效果展示：
3.5 分页工具条组件
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
