Day54 Vue入门***

最新推荐文章于 2023-03-15 23:36:57 发布

翁老师的教学团队

最新推荐文章于 2023-03-15 23:36:57 发布

阅读量150

点赞数 2

文章标签： vue spring boot

本文链接：https://blog.csdn.net/u013621398/article/details/110261009

版权

2022就业班专栏收录该内容

208 篇文章 5 订阅

订阅专栏

学习目标

（1）vue快速入门
（2）vue语法
（3）生命周期与ajax异步请求
（4）vue案例

Vue介绍

Vue.js(读音 /vjuː/, 类似于 view)

（1）什么是Vue
是一套用于构建用户界面的渐进式框架
（2）Vue有什么特点？
》易用：在有HTML CSS JavaScript的基础上，快速上手。
》灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
》性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。 [4]

MVVM介绍

（1）MVVM是什么?
MVVM是Model-View-ViewModel的简写
它本质上就是MVC 的改进版
MVVM 由 Model,View,ViewModel 三部分构成
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来
ViewModel是一个同步View 和 Model的对象。

ViewModel对象

（1）ViewModel是什么?
vue的核心
》ViewModel 连接Model 和 View
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互
》ViewModel同步Model和View
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉

在这里插入图片描述

SpringBoot的resources目录

（1）Spring Boot默认将所有的静态资源映射到以下目录
classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

默认的目录下存放的文件，可以直接访问,，里面不包含templates

（2）测试static目录图片，css，js等
（3）测试public目录 index1.html
（4）测试template目录 index2.html

修改资源目录

（1）优先级
如果在上面4个默认的能访问的文件夹里如果有名字重复的静态资源那先访问那个呢？
/META-INF/resources/>/resources/>/static/>/public/
（2）修改资源目录
spring.resources.static-locations=classpath:/templates/,classpath:/static/

vue的入门案例

Vue对象：即ViewModel

（1）复制vuejs-2.5.16.js到项目js中
（2）复制html到项目template中
（3）页面引入js
<script src="js/vuejs-2.5.16.js"></script>

<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
						message:'hello Vue'
					}  //对应的数据
				}
		) //创建了MVVM中的VM对象
	</script>

翁老师的教学团队

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Day54 Vue入门***

学习目标（1）vue快速入门（2）vue语法（3）生命周期与ajax异步请求（4）vue案例Vue介绍Vue.js(读音 /vjuː/, 类似于 view)（1）什么是Vue是一套用于构建用户界面的渐进式框架（2）Vue有什么特点？》易用：在有HTML CSS JavaScript的基础上，快速上手。》灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。》性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。 [4]MVVM介绍（1）MV
复制链接

扫一扫