<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="abc">
{{userName}},{{age}} <!-- 利用{{XXX}}格式解析出Model里面JSON格式的数据-->
</div>
</body>
<!--写上${pageContext.request.contextPath}可以定位到服务器当前运行的项目的根目录位置 -->
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel1 = {userName:'张三丰',age:19}; //装好的JSON格式数据
var viewmodel = new Vue({ //new 一个vue的对象 添加el，data两个参数，el对应的是匹配view要输出位置元素的id或者是其他选择器，data放的是json数据
el:'#abc',
data:myModel1
})
/*
1、抛开手动操作DOM的思维，Vue.js是数据驱动的，你无需手动操作DOM。
2、将DOM和数据绑定起来，DOM将和数据保持同步，
每当变更了数据，DOM也会相应地更新。
3、MVVM模式（Model-View-ViewModel）
ViewModel是如何和View以及Model进行交互的。
model放在data（可能多项）
view放在el（view里面的{{ }}可能多项，跟model对应）
4、ViewModel是Vue.js的核心，它是一个Vue实例。
Vue实例是作用于某一个HTML元素上的，
这个元素可以是HTML的body元素，
也可以是指定了id的某个元素。
5、所有的元素都是响应式的
*/
</script>
</html>