快速入门Vue（一）Vue入门

最新推荐文章于 2024-03-04 02:02:03 发布

恒哥~Bingo

最新推荐文章于 2024-03-04 02:02:03 发布

阅读量503

点赞数 2

分类专栏：前端文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/u013343114/article/details/111307767

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

超详细的Java知识点路线图

概述

Vue 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM模式

Vue基于MVVM模式，MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
在这里插入图片描述

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点：

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

Vue入门

安装Vue

两种方式安装：

下载vue.js到本地，再引入到JavaScript中

<script src="/js/vue.js"></script>

使用在线版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue的使用步骤

1）定义视图View——页面
2）定义模型Model——数据
3）定义视图模型ViewModel——Vue对象
案例：

<!DOCTYPE html>
<html>
<head>
	<title>使用Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!--这是View部分，绑定了Model的数据-->
	<div id="app">
		<p>{{name}}</p>
		<p>{{sex}}</p>
		<p>{{age}}</p>
	</div>
	<script type="text/javascript">
		//这是Model部分
		var person = {name:'张三',sex:'男',age:20};
		//这是ViewModel部分
		var vue = new Vue({
			el:'#app',
			data:person
		});
	</script>
</body>
</html>

运行效果：
在这里插入图片描述

代码讲解

这里的核心代码是创建一个Vue对象，该对象属于视图模型ViewModel，用于连接View和Model。Vue对象的参数el用于选择视图对象，这里使用ID选择器对DIV元素进行定位，data后面是视图绑定的数据对象。

动态绑定

Vue视图中绑定数据的语法是：{{属性名}}
不同于JSP，视图中的数据是固定的，必须重新查询后刷新页面才会修改；Vue的视图会随着模型中数据的更新而自动更新。
可以打开Chrome浏览器的控制台进行测试，输入person对象的相关数据后，页面内容自动更新了。

在这里插入图片描述

结束语

本文就到这里了，如果对你有用的话，就点个赞吧：）

大家如果需要学习其他Java知识点，戳这里超详细的Java知识点汇总

恒哥~Bingo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
快速入门Vue（一）Vue入门

概述Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。MVVM模式Vue基于MVVM模式，MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
复制链接

扫一扫