人人澡视频,日本精品人妻一二三区

1.1 Vue介紹

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。

說的通俗點就是用于展示數(shù)據(jù)的js框架，Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

Vue的主要特點：
1、簡潔
2、輕量
3、快速
4、數(shù)據(jù)驅(qū)動
5、模塊友好
6、組件化

官網(wǎng):https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的簡寫。它本質(zhì)上就是MVC 的改進版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務邏輯分開。
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）
Vue.js 是一個提供了 MVVM 風格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數(shù)據(jù)的一致性，這種輕量級的架構讓前端
開發(fā)更加高效、便捷。

image.png

1.3 VueJS 安裝

下載地址：https://cn.vuejs.org/v2/guide/installation.html 推薦使用開發(fā)版本

image.png

也可以使用在線文件
對于制作原型或?qū)W習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

對于生產(chǎn)環(huán)境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

1.4 VueJS 快速入門

利用intellijidea實現(xiàn)vue
新建工程從原型創(chuàng)建，選中maven-archetype-webapp

image.png

自行填入GroupId和ArtifactId

image.png

在工程結構中添加Directory
1）main下的java和resource
2）test下的java
3）webapp下的js

image.png

做好對應的標記

image.png

js下放入vue.js

webapp下添加自己的html文件
demo1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入門</title>
      <script src="js/vue.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}<!--Vue的插值表達式，將data中定義的數(shù)據(jù)顯示到此處-->
      </div>
   </body>
   <script>
      //view model
      //創(chuàng)建Vue對象 內(nèi)部是json格式，所以是大括號
      new Vue({
         el:"#app", //由vue接管id為app區(qū)域
         data:{
            message:"Hello Vue!"http://注意：此處不要加分號
         }
      });
      
   </script>
</html>

啟動tomcat，添加Artifacts。
artifact是一種用于裝載項目資產(chǎn)以便于測試，部署，或者分布式軟件的解決方案。例如集中編譯class，存檔java應用包，web程序作為目錄結構，或者web程序存檔等。