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

发布了82 篇原创文章 · 获赞 91 · 访问量 9499

猜你喜欢

转载自blog.csdn.net/ataraxy_/article/details/105328109