Vue學習(一)-簡單入門實例

本文主要是對於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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章