本文主要是对于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