百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

VUE简介

xsobi 2025-04-27 17:15 10 浏览

一.前后端分离

既然我们在开发中使用前后端分离模式,也就是前端拿到后端的数据时怎么处理,怎么输出都有前端自己来实现,这样就需要写大量的js代码,而为了简化js的代码,就衍生出了很多的框架,比如jquery,Angular,Vue,React等。

二 Vue.js介绍

1.什么是Vue.js

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2.Vue的特点

2.1 响应式编程

当数据发生改变时,自动更新视图。

2.2 组件化

UI页面映射出一个组件树
组件可重用,可维护性好。

3.Vue的优势

vue是轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快。

而且vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

4.Vue的响应式原理(MVVM)

Vue有一个重要特点是当数据发生变化时,可以自动更新视图,那这个是怎么实现的。这是因为Vue采用了MVVM架构模式。那什么是MVVM呢。

4.1MVC和MVVM结构对比

MVC模式结构图

MVVM模式结构图

Bash
可以看到MVVM是一个MVC的增强版,正式连接了视图和模型,将表示逻辑从Controller移出放到一个新的对象里,即ViewModel。它实现了View和Model的自动同步,即当Model的属性改变时,我们不用再自己手动操作Dom元素来改变View的显示,而是改变属性后该属性对应的View层显示会自动改变。

4.2 MVVM的组成部分

1.View

Bash
 View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建,为了更方便地展现 ViewModel 或者 Model 层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Thymeleaf 等等,各大 MVVM 框架如 Vue.js,AngularJS,EJS 等也都有自己用来构建用户界面的内置模板语言。

2.Model

Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

3.ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的.

比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示);

页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互).

视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定,ViewModel 的内容会实时展现在 View 层,这是激动人心的,因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新,真正实现 事件驱动编程。

View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

三 Vue.js基础语法

1 下载

方式1:

Vue官网下载:
https://cn.vuejs.org/v2/guide/installation.html

2 第一个入门程序

开发Vue的工具很多,这里我们先使用之前讲解web前端时使用的工具Hbuilder

Vue.js 的核心是实现了 MVVM 模式,它扮演的角色就是 ViewModel 层,那么我们的第一个应用程序就是展示她的 数据绑定 功能,操作流程如下:

2.1 在Hbuilder中创建一个web项目

创建出来的项目结构如下:

2.2 导入Vue.js

2.3 创建一个Vue实例 ,并将数据绑定到div中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="d1">
			{{message}}
		</div>
		
		<script type="text/javascript">
			
			var v=new Vue({
				
				el:'#d1',  //注意 这里el里面的是字符l 不是数字1   d1是上面div的id号 
				data:{
					message:'Hello Daimenglaoshi'  //初始数据
				}
				
			})			
			
			
		</script>		
		
	</body>
</html>

说明

new Vue:创建vue对象,里面的el和data是属性。

el:'#d1':绑定元素的 ID;

data:{message:'Hello Daimenglaoshi!'}:数据对象中有一个名为 `message` 的属性,并设置了初始值

{{message}}:在绑定的元素中使用 双花括号 将Vue创建的名为 message 属性包裹起来,即可实现数据绑定功能。不需要自己写js赋值。

2.4 运行测试

2.5 测试Vue的自动更新功能

Vue可以做到当数据发生改变时,自动更新视图

说明:

在之前的代码中,我们创建了一个名为 v 的 Vue 实例.
var v=new Vue({				
	el:'#d1',  
	data:{
		message:'Hello Daimenglaoshi'  
	}})	


此时就可以在控制台直接输入 v.message 来修改值,中间是可以省略 data 的,在这个操作中,我们并没有主动操作 DOM,就让页面的内容发生了变化,这就是借助了Vue的数据绑定功能实现的;MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定,以做到数据与视图的快速响应。

相关推荐

适合在企业网站展示企业发展历程的时间轴滑动特效源码

大家好,今天给大家介绍一款,JavaScript实现的适合在企业网站展示企业发展历程的滑动特效源码(图1)。送给大家哦,获取方式在本文末尾。可以用鼠标左右滑动查看,也可以点击左右按钮查看(图2)源码完...

别再花钱请人画了!一个工具就能把照片动漫化,小白也能轻松学会

前阵子公司里一个妹子的微信换了个新头像,是用把本人的照片动漫化,有点像抖音爆火的那种漫画脸特效。我感觉很不错,既保留了自己的外貌,也挺有个性的。本来以为是她自己做的,没想到她居然告诉我是花钱请人画的...

手机如何制作变年轻特效?手把手教你这几个实用方法

现在的图片特效是越来越丰富,我们可以通过各种软件把一张照片上玩出各种花样。特别是最近流行的时光穿梭机特效,能让我们看到从年轻到变老的自己。那么你们知道时光穿梭机特效如何制作吗?下面我就来告诉你们3个很...

如何快速查看自己的网站是否被入侵

要快速查看自己的网站是否被入侵,可采取以下步骤:一、检查网站内容查看网站主页及其他重要页面,确认是否存在未经授权的更改,如新链接、广告或内容。二、使用在线工具利用第三方服务,如360网站安全检测平...

10个免费pr模板下载网站,不用AE也能解决你的片头片尾难题

之前有人问我AE太难了,PR能不能做效果,我就推荐了几个小教程,尴尬的是,他说就想用来做片头片尾,emmm……那我就来推荐几个PR模板下载网站吧。以下是我整理的一共有10个PR模板下载网站,其中全站免...

高质量特效视频素材,累积14套507.6GB,必备影视后期素材库!

收藏一时爽,一直收藏一直爽!欢迎来到宝藏后期资源系列,这是一期非常全面的特效素材,都是好莱坞大片级的特效。这是一期期待已久的特效素材资源,来自知名Bigfilms素材网站。在此之前已经安利了13套...

CSS 3.0+HTML5.0制作各种网页特效

1、C33实现点击图片渐渐放大特效2、CSS3实现图片全屏背景特效3、CSS3实现的鼠标移动到图片上不规则放大3、jQuery+CSS3模拟苹果桌面系统4、CSS3+jQuery照片...

太优秀了!高逼格的动画效果,只用 PPT 就能做出来

如果你需要做一场演讲、一个述职汇报,又或者是一个毕业答辩,可能都会尝试用PPT做一份演示文稿,来辅助表达。但是,想想开会时,老板在屏幕前做的演示稿,是不是一点也不想看:因为,大多数人做的PPT可能是这...

分享7个关于AE的网站

今天我分享几个和ae有关的好的网站,希望给对ae有兴趣但却还没入门的人一个帮助。1、http://www.lookae.com/这是一个简洁而美观的网站,提供AE、PR、C4D等的软件、插件、模板的...

Gif已out !三分钟教你做动图特效

360搜索前段时间推出过一款“拍题神器”,引发广泛反响,包括央视、北京卫视等主流媒体相继对此功能进行了报道,正值外界还在对“拍题神器”激烈讨论之际,360移动搜索再推新功能,“玩图”一经推出之后便迅速...

推荐几个神级的特效网站

随机粒子http://www.spielzeugz.de/html5/liquid-particles-3D对称光绘http://weavesilk.com高亮流体https://paveldogre...

让网站动起来的js库,真漂亮,再也不用写复杂的动画了~wow.js

前言越来越多的网站特效很漂亮,其中就有一种我很喜欢的动画,就是当滑动到某个元素的时候,元素就是出现动画效果,如:缩放、旋转、滑动等。感觉很漂亮,之前在做企业站的时候,基本上都是自己手写的,有点麻烦而且...

垃圾回收日志记录是否会影响应用性能?

尽管性能成本极低,但垃圾回收日志提供了宝贵的见解,说明JVM如何在运行时动态管理内存。译自DoesGarbageCollectionLoggingAffectAppPerforman...

73人死亡!墨西哥炼油厂发生爆炸!目击者:偷油者当场烧成灰

据新华社消息,墨西哥中部伊达尔戈州一处输油管道18日遭遇“偷油”后发生爆炸。截至小编发文,该爆炸造成的死亡人数已升至73人。▲图片截取自CNN;《墨西哥油管爆炸至少73名人员丧生,数十位受伤》这次严重...

Net平台GC VS JVM垃圾回收

前言不知道你平时是否关注程序内存使用情况,我是关注的比较少,正好借着优化本地一个程序的空对比了一下.Net平台垃圾回收和jvm垃圾回收,顺便用dotMemory看了程序运行后的内存快照,生成内存快照后...