本文主要是對於Vue非常淺顯的知識進行介紹,並不深入瞭解,只接觸表面,對一些較複雜的內容也不過多描述。如文中有錯誤之處,望不吝賜教,謝謝~
一、Vue簡介
Vue 是一套用於構建用戶界面的漸進式JavaScript框架,和其他JavaScript框架一樣,可以很好的整理JavaScript代碼使其不再零亂,在Java web開發中,通過vue可以更好的實現前後端分離。
學習vue,還需要了解一種開發模式:MVVM(Model-View-ViewModel)。它本質上就是mvc 的改進版。mvvm 就是將其中的View 的狀態和行爲抽象化,讓我們將視圖 ui和業務邏輯分開。而vue正是符合mvvm模式的框架。
二、Vue簡單入門實例
(1)新建spring boot項目
(2)導入vuejs-2.5.16.js文件(vue庫)
鏈接:vuejs-2.5.16.js
提取碼:e9yh
(3)新建html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--導入vue庫-->
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--vue插值-->
{{message}}
</div>
<script>
//創建vue對象
new Vue({
el:"#app",
data:{
message:"hello world"
}
});
</script>
</body>
</html>
(4)運行程序並在瀏覽器中輸入
http://localhost:8080/html1.html
可得到如下畫面
說明通過vue,成功將獲取到了message裏面的內容。
2020.04.05