一、步驟演示
1、 新建一個jsp文件
2、 把vue.js放到Web的js目錄下
3、 在jsp中引入vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
4、 創建一個view對象(DOM組件)
5、 定義一個javascript的model
6、 創建一個Vue對象(ViewModel對象)
參數為一個json對象（包含2個參數,el,data）
7、運行結果
8、在瀏覽器的控制台使用push方法添加
9、與之for each和c：forEach對比
二、代碼演示
<%@ 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>初步認識vue.js操作②</title>
</head>
<body>
<div id="myView">
<ol>
<!-- 配置為循環項 -->
<li v-for="student in studentList">{{student.name}}</li>
</ol>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel = {studentList:[{name:'小明'},{name:'小紅'},{name:'小剛'}]};
var myViewModel1 = new Vue({
el:'#myView',
data:myModel
});
</script>
</html>
