vue使用小记

1、controller：

@RequestMapping("/init.go")
public String init(@ModelAttribute B003015Bean b003015Bean, HttpServletRequest request, Model model) 
        HttpSession session = request.getSession();
        Map<String, Object> field = (Map<String, Object>) session.getAttribute("xxx");
        model.addAttribute("data_id", field.get("did").toString());
        return "/xxx/xxxx";
    }

2、jsp页面：

<%@ page language="java"  contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="st" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<%
String root = request.getContextPath();
String 	xxxAction = root + "/xxx/xxxx/xxx.go";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入vue.js -->
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="page-wrapper" class="gray-bg dashbard-1">
		<div class="ibox-content" >
			<div class="dataTables_paginate paging_simple_numbers"></div>
			<div id="myxxx">
				<div>
					<td style="vertical-align: middle">XXXXX</td>
					<td style="vertical-align: middle"><input class="form-control" id="rowNum" v-model.trim="cpdMarkBean.order" ></td>
				</div>
				<div >
					<td style="vertical-align: middle"><input class="form-control"  v-model.trim="sMarkBean[3].rowNumStr" id="TimeOrder" ></td>
					<td style="vertical-align: middle"><input type="radio" name="Radio" id="RadioTimeOrder" onchange = "xxxHigh(this)" /></td>
				</div> 
			</div>
		</div>
	</div>
</div>

	<script type="text/javascript">
	var modalVueAllPage = new Vue({
		el: '#myxxx',
		data: {
			sMarkBean: [],
			cpdMarkBean:{},
			data_id:'${data_id}',
		},
		methods: {
			doInit:function() {
				var self = this;
				$.ajax({
					type:"post",
					data:{data_id:this.data_id},
					url:"<%=xxxAction%>",
					success:function(result){ 
						self.sMarkBean = result.sMarkBean;
						self.cpdMarkBean = result.cpdMarkBean;
					}
				});
			},
		mounted: function () {
			<!-- 挂载完成执行方法 -->
			this.doInit();
		}
	});
	</script>
</body>
</html>

猜你喜欢