目錄
一、概述
1、Vue 介紹
Vue 全稱爲 Vue.js，是一個構建數據驅動的 web 界面的漸進式框架，此框架是開源世界華人的驕傲，因爲它的作者是位中國人–尤雨溪（Evan You）。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁 定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。
- Vue 官網：https://cn.vuejs.org/
- Vue 學習官網：https://cn.vuejs.org/v2/guide/
2、MVVM 模式
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行爲 抽象化，讓我們將視圖 UI 和業務邏輯分開 MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注於View 層。它的核心是 MVVM 中的 VM， 也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端 開發更加高效、便捷。
二、Vue 入門
1、使用 IDEA 開發 Vue
【1】使用 web 骨架創建 Maven 工程
使用 idea 自帶的 web 骨架創建 Maven 工程，並設置相關目錄，引入 js，在 webapp 目錄下創建要編寫的 HTML 頁面，創建好後目錄結構如下：
【2】編寫第一個Vue程序
步驟如下：
- 導入vuejs：
- <script src="js/vuejs-2.5.16.js"></script>
- 定義 id 爲 app 的區域：
- <div id="app">
</div>
- <div id="app">
- 創建 vue 對象：
- new Vue({...});
- 將 id 爲 app 的區域給 vue 接管
- el:"#app"
- 定義數據：
- date:{
message:"hello onestar"
}
- date:{
- 將定義和顯示分離：
- 在app區域編寫插值表達式：{{message}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>oneStar</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} <!--將定義和顯示分離，編寫插值表達式-->
</div>
<script>
//view model
new Vue({
el:"#app", //將 id 爲 app 的區域給 vue 接管
data:{ //定義數據
message:"hello onestar"
}
});
</script>
</body>
</html>
【3】部署 Tomcat 訪問頁面
2、插值表達式
在剛剛的入門案例中，將定義和顯示分離，用到了插值表達式，插值表達式就是將數據進行綁定，數據綁定最常見的形式就是使用“Mustache”，也就是雙大括號的文本插值，Mustache 標籤將會被替代爲對應數據對 象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。
Vue.js提供了完全的 JavaScript 表達式支持：
{{number + 1}}
{{ok ? "yse" : "no"}}
這些表達式會在所屬 Vue 實例的數據作用域下作爲 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個 表達式，所以下面的例子都不會生效。
<!--插值表達式不支持-->
{{var a = 1;}}
{{if(a == 10){}}}
