<%@ 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>
學習Vue.js ------ 如何操作View 與 Model
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。