一、vue.js的初步認識
<a href="
https://unpkg.com/vue ">vue.js下載</a>
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、所有的元素都是響應式的
二、vue.js的初步操作
1、 新建web項目
2、 新建一個jsp文件
3、 把vue.js放到Web的js目錄下
4、 在jsp中引入vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
5、 創建一個view對象(DOM組件)
注意：此view對象，可以包含n個數據,數據使用{{xxxx}}來描述。
6、 定義一個javascript的model
var myModel1 = {userName:'dqc',age:22};
7、 創建一個Vue對象(ViewModel對象)
參數為一個json對象（包含2個參數,el,data）
8、運行效果
三、代碼演示
<%@ 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="myDiv1">
<p>這里是mydiv1</p>
{{userName}}
{{age}}
</div>
<div id="myDiv2">
<p>這里是mydiv2</p>
{{age}}
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel1 = {userName:'dqc',age:22};
var myViewModel1 = new Vue({
el:'#myDiv1',
data:myModel1
});
</script>
</html>
