【Vue.js】001-Vue.js概述及入门

最新推荐文章于 2024-06-12 08:41:10 发布

訾博ZiBo

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量251

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_29689343/article/details/107945098

版权

Vue.js 专栏收录该内容

110 篇文章 21 订阅

订阅专栏

一、Vue.js介绍

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

二、MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
抽象化，让我们将视图 UI 和业务逻辑分开；
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）；
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端
开发更加高效、便捷；

参考链接：前后端分手大师——MVVM 模式

三、入门

1、vue官网地址

https://cn.vuejs.org/v2/guide/

2、下载版本

开发下载开发版，使用下载生产版（压缩版）；

下载地址：

https://cn.vuejs.org/v2/guide/installation.html

3、推荐编辑器

HBuilder X！！！

官网地址：

https://www.dcloud.io/

4、引入到项目

方式一（本地引入）：

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

方式二（引入CDN地址）：

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

5、简单使用

index.xml代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- Vue插值表达式，把data中定义的数据显示至此 -->
			{{ message }} 
		</div>
		<script>
			var app = new Vue({
				//el即element元素，用于指定元素
				//此处使用id选择器，阶段div区域
				el:"#app",
				//data用于存储数据
				data:{
					//键值对形式进行存储
					message : "Hello Vue!"
				}
			});
		</script>
	</body>
</html>