Vue.js入门笔记（一）--概述与快速入门

最新推荐文章于 2024-04-20 18:54:36 发布

java阳旭

最新推荐文章于 2024-04-20 18:54:36 发布

阅读量461

点赞数 6

分类专栏： Vue 文章标签： vue web java

本文链接：https://blog.csdn.net/gaoxiaokun4282/article/details/106290910

版权

Vue 专栏收录该内容

18 篇文章 7 订阅

订阅专栏

Vue.js介绍

Vue.js 是一个构建数据驱动的 Web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网：https://cn.vuejs.org/

MVVM 模式

MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model）。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
在这里插入图片描述

快速入门

在 IntelliJ IDEA 中创建项目

1、按照下面图片的流程创建一个 Maven 工程项目。
在这里插入图片描述

2、项目创建完成后，完善项目的目录结构。

在 main 文件夹下创建 java 和 resources 文件夹，在 src 文件夹下创建 test 文件夹。

在这里插入图片描述
将 java 文件夹标记为 Sources Root。

在这里插入图片描述
将 resources 文件夹标记为 Resources Root。

在这里插入图片描述
在 test 文件夹下创建 java 文件夹。

在这里插入图片描述
将 test 文件夹下的 java 文件夹标记为 Test Sources Root。

在这里插入图片描述
最后就可以在 webapp 文件夹下新建 html 文件来编写入门代码了。我在这里新创建了 demo1.html。

在这里插入图片描述

编写入门代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
        <!-- 1.引入vue.js文件，这个是开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 5.Vue的插值表达式，把data中定义的数据显示到此处-->
			{{message}}
			<!-- 三元运算符 -->
			{{false ? "OK" : "NO"}}
			<!-- 数学运算-->
			{{number*3.14}}
			<!--插值表达式不支持
			{{var a = 1;}}
			{{if(a = 10){}}}
			-->
		</div>
	</body>
	<script>
		
		//2.创建Vue对象
		new Vue({
            //3.由vue接管id为app的区域
			el:"#app",
            //4.填写相关的data
			data:{
				message:"Hello Vue!",//注意：此处不要加分号
				number:100
			}
		});
	</script>
</html>

将项目部署到 Tomcat 中运行。

在这里插入图片描述

在这里插入图片描述
在这里选择带 exploded 的 war 工程。

在这里插入图片描述
按照下图标记的地方，设置 Application context。

在这里插入图片描述
按照下图将 On ‘Update’ action 和 On frame deactivation 全都设置为 Update classes and resources。这样当 Tomcat 运行后，修改了 html 文件，可以直接在浏览器中刷新看到效果，而不用重启 Tomcat。