初识Vue.js

最新推荐文章于 2024-09-30 11:04:46 发布

new 杨海波

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量280

点赞数 2

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

本文链接：https://blog.csdn.net/bakelFF/article/details/122485835

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

官网文档地址：传送门

1、为什么学习Vue.js?

首先给大家说下MVVM模式

MVVM设计模式由Model（模型）、View（视图）、ViewModel（视图模型）三部分组成。

主要的目的是分离视图（View）和模型（Model），主要有以4个优点：

低耦合：View可以独立于Model的变化和修改，一个VIew Model可以绑定到不同的View上，当View变化时Model可以不变化，当Model变化时View也可以不用变化。

独立开发：开发人员更加专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于界面的设计。

可重复性：可以把一些视图逻辑放在一个ViewModel中，让更多的View重用这段视图逻辑。

可测试：现在测试人员可以针对ViewMdoel来写。
在这里插入图片描述

MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护View Model，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

而Vue.js就是一个MV VM的实现者，他的核心就是实现了DOM监听与数据绑定。

2、Vue的安装方式：

1.1 使用CDN方法(初学者使用)也可以直接使用CDN的方式引入，代码如下：

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

1.2下载官网Vue.js文件，相对位置引入到项目中

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

1.3Vue-cli脚手架
利用Vue-cli 脚手架构建Vue项目，在后面第七点详细讲解。(中大型项目中推荐使用)。

3、第一个Vue程序

说明:

view层只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来，即可实现数据绑定功能，也就实现了View Model层所需的效果，是不是和EL表达式非常像?

el: '#vue'：绑定元素的ID

data 用于定义属性，实例中有2个属性分别为：message1、message2

完整的HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例</title>
    <!-- 引入CDN开发版 -->
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
	<div id="vue_det">
		<h1>message1: {{message1}}</h1>
		<h1>message2: {{message2}}</h1>
	</div>
<!--创建一个Vue实例-->
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',//选择要传值的标签 
            /*Model：数据*/
			data: {
				message1: "Hello ",//给标签内传值
				message12: "Vue!"//给标签内传值
			}
		})
	</script>
</body>
</html>