使用eclipse初步認識與使用Vue.js

一.認識Vue.js

<a href="https://unpkg.com/vue ">Vue.js 下載</a> 

 

一、拋開手動操做DOM的思惟，Vue.js是數據驅動的，你無需手動操做DOM。

 

二、將DOM和數據綁定起來，DOM將和數據保持同步，
　　每當變動了數據，DOM也會相應地更新。

 

三、MVVM模式（Model-View-ViewModel）
　　ViewModel是如何和View以及Model進行交互的。
　　model放在data（可能多項）
　　view放在el（view裏面的{{ }}可能多項，跟model對應）

 

四、ViewModel是Vue.js的核心，它是一個Vue實例。
　　Vue實例是做用於某一個HTML元素上的，
　　這個元素能夠是HTML的body元素，
　　也能夠是指定了id的某個元素。

 

五、全部的元素都是響應式的

 

 

 

二 . 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

 

 

7. 建立一個Vue對象(ViewModel對象)

　　參數爲一個json對象（包含2個參數,el,data）

 

 

8.運行結果

9.在瀏覽器控制檯添加數據

　　用push方法添加數據

　　運行結果：

 

 10.for each循環  v-for循環和c:forEach循環的對比