好程序员web前端分享MVVM框架Vue实现原理

  好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js和react.js更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。


1.什么是MVVM呢?

MVVM的简写是Model-View-ViewModel。

  在过去的10年里面,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么很多开发者使用框架。比如:angular.js、react.js、vue.js。有了这些框架之后,浏览器的兼容性问题已经不再是我们前端开发的阻碍。(这里应该有欢呼声,为什么要这么说,下次写浏览器兼容时再告诉你们)前端的项目体积不断的在加大,从一个简陋的小小的页面变成炫彩的页面需要成千上万的代码,这样导致了项目的可维护性和扩展性包括重要的安全性等成了最主要问题。

  这也是为什么有很多很多的开发人员使用框架,框架简洁,有API。在当年那个时代为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是JQuery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如说vue.js框架就是通过数据的双向绑定,极大了提高了开发效率。

  1. MVVM框架

Vue就是基于MVVM模式实现的一套框架,在vue框架中:

Model:指的是js中的数据,如对象,数组等等。

View:指的是页面视图

viewModel:指的是vue实例化对象,

  都说Vue.js是一个渐进式的javascript框架, 渐进式是什么意思?

  1.   假如你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分加入其中,带来更好的交互体验;
  2.   假如你想将更多的业务逻辑放到界面来实现,那么Vue可以满足你大部分的需求,(vue2.x+vue-router+axios+webpack)。和其它前端框架一样,VUE的优点在于可以很好的每一个功能、特效变成组件化,有更好的可维护性,也可以进行复用,每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方
  3. 如果我们构建一个大型的应用,在这一点上,vue有一个命令行工具,使快速初始化一个真实的工程变得非常简单(vue init webpack my-project)。我们可以使用VUE的单文件组件,它包含了各自的html、JavaScript以及带作用域的css或scss。

以上这三个例子,是一步步递进的,也就是说对Vue.js的使用可大可小,它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。Vue.js最独特的特性:当我们的数据变更时,Vue.js会帮你更新所有网页中用到它的地方。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU - 3516 Tree Construction

HDU - 3516 思路&#xff1a; 平行四边形不等式优化dp &#xff1a;&#xff09; 代码&#xff1a; #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #include<bits/stdc.h> using namespace std; #define y1 y11 #define fi first #define se…

各类总线传输速率

1. USB总线 USB1.1&#xff1a; -------低速模式(low speed)&#xff1a;1.5Mbps -------全速模式(full speed)&#xff1a; 12Mbps USB2.0&#xff1a;向下兼容。增加了高速模式&#xff0c;最大速率480Mbps。 -------高速模式(high speed)&#xff1a; 25~480Mbps US…

Activiti多人会签例子

Activiti中提供了多实例任务&#xff08;for-each&#xff09;将多实例应到到UserTask中可以实现会签功能。 Multi-instance (for each) Description A multi-instance activity is a way of defining repetition for a certain step in a business process. In programming …

Django 【认证系统】auth

本篇内容 介绍Django框架提供的auth 认证系统 方法&#xff1a; 方法名 备注 create_user 创建用户 authenticate 登录验证 login 记录登录状态 logout 退出用户登录 is_authenticated 判断用户是否登录 login_required装饰器 进行登录判断 引入模块 from django.…

儿科常见疾病的中成药疗法

孩子感冒&#xff0c;分清寒热是关键——儿童风寒感冒和风热感冒的中成药内服外治法 儿童不养儿不知父母恩&#xff0c;每个人恐怕都只有自己做了父母&#xff0c;才能感受到父母的爱。婴幼儿正处于最初的发育期&#xff0c;抵抗力弱&#xff0c;有个感冒发烧的也是常有的事儿。…

物化视图

有个项目因为有比较多的查询汇总&#xff0c;考虑到速度&#xff0c;所以使用了物化视图。简单的把用到的给整理了下。先看简单创建语句&#xff1a;create materialized view mv_materialized_test refresh force on demand start with sysdate nextto_date(concat(to_char( s…

为什么直接ping知乎的ip不能访问知乎的网站,而百度就可以?

结论&#xff1a; 简单的说&#xff0c;就是baidu有钱。 正文&#xff1a; 大型网站依靠自身稀稀落落的服务器很难满足网页“秒开”的用户需求&#xff0c;会加入CDN加速的队伍。 当用户访问 http://www.zhihu.com 时&#xff0c;域名解析到距离用户最近的CDN服务器的公网IP&am…

皮肤病

小偏方治百病/《国医绝学健康馆》编委会编.—重庆&#xff1a;重庆出版社&#xff0c;2010.3&#xff08;国医绝学健康馆&#xff09; 湿疹 苦参汤熏洗治阴囊湿疹方 苦参、蛇麻子中药各50克&#xff0c;混合后&#xff0c;在晚上煎汤&#xff0c;可直接放在脸盆中煎。煎好后&am…

MySQL-ProxySQL中间件(一)| ProxySQL基本概念

目录 MySQL-ProxySQL中间件&#xff08;一&#xff09;| ProxySQL基本概念&#xff1a; https://www.cnblogs.com/SQLServer2012/p/10972593.htmlMySQL-ProxySQL中间件&#xff08;二&#xff09;| Admin Schemas介绍&#xff1a;https://www.cnblogs.com/SQLServer2012/p/109…

01 ftp上传简单示例服务端

import json import socket import structserver socket.socket() server.bind((127.0.0.1,8001)) server.listen() conn,addr server.accept()#首先接收文件的描述信息的长度 struct_data_len conn.recv(4) data_len struct.unpack(i,struct_data_len)[0]# 通过文件信息的…

标签td设置隐藏(hidden)

这样设置这个td就不会被其他的td给挤掉了! 还有一种方法就是把tr标签的solid设置为0px 这个方法把td标签的left,right,bottom,top的边框的solid全部设置为0px;转载于:https://www.cnblogs.com/tranquilityMan/p/10972811.html

Windows Server 2008 NFS

打开Windows Server 2008的Dos运行窗口&#xff08;不是powershell&#xff09;&#xff0c;然后键入&#xff1a; servermanagercmd.exe -install FS-NFS-Services 安装完毕之后&#xff0c;就要把NFS的存贮映射到Windows Server 2008上某个盘符以供使用&#xff0c;但为了…

金融反欺诈模型----项目实战--机器学习

机器学习&#xff1a;从源数据清洗到特征工程建立谈金融反欺诈模型训练 本文旨在通过一个完整的实战例子&#xff0c;演示从源数据清洗到特征工程建立&#xff0c;再到模型训练&#xff0c;以及模型验证和评估的一个机器学习的完整流程。由于初识机器学习&#xff0c;会比较多的…

快餐文化短视频源码行业竞争激烈,短视频发展任重道远

随着移动互联技术的兴起&#xff0c;形式多样的短视频源码软件为受众开辟了短视频时代&#xff0c;赋予视频以新的时代内涵。梨视频、美拍、快手、抖音等APP充斥了人们的生活&#xff0c;因此不少人群对视频软件产生了依赖感。短视频源码APP行业发展至今&#xff0c;产品和营运…

Win7下如何挂载NFS共享目录

NFS是Unix中广泛使用的文件共享协议&#xff0c;在Linux下得到了传承&#xff0c;使用简单&#xff0c;读写性能强大。过去Windows与Linux共享文件夹需要使用Samba&#xff08;CIFS&#xff09;协议&#xff0c;虽然定制性更高&#xff0c;但设置和使用都比较繁琐。Windows 7加…

使用Chrome浏览器自动下载文件并保存到指定的文件路径(使用Selenium更改Chrome默认下载存储路径)...

https://blog.csdn.net/zbj18314469395/article/details/81207268转载于:https://www.cnblogs.com/person008/p/10980964.html

vue 源码学习(一) 目录结构和构建过程简介

Flow vue框架使用了Flow作为类型检查&#xff0c;来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件&#xff0c;还有flow目录&#xff0c;指定了各种自定义类型。 在学习源码前可以先看下Flow的语法 官方文档 目录结构 vue.js源码主要在src下 src ├─…

count慢的问题解决

SELECT count(*) FROM (SELECT DISTINCT DMPNN.ID AS NEED_ID, V2 VDMPSX, DMPNN.DMP_NUM AS DMPNN_NUM, DTT.TASK_ID AS TASK_ID, /*任务ID*/ (SELECT NVL(TO_CHAR(workload),) FROM DMP_ALLOCATION_NEED_RESULT dnr WHERE dnr.anr_id DTT.Anr_Id ) GUIBANWORKLOAD, …

SpringBoot + MyBatis(注解版),常用的SQL方法

一、新建项目及配置 1.1 新建一个SpringBoot项目&#xff0c;并在pom.xml下加入以下代码 <dependency>    <groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.1</vers…

项目进行JVM调优 Jconsole

最近对公司的项目进行JVM调优&#xff0c;使用了JDK自带的jconsole查看Tomcat运行情况&#xff0c;记录下配置以便以后参考&#xff1a; 首先&#xff0c;修改Tomcat的bin目录下的catalina.bat文件&#xff0c;在JAVA_OPTS变量中添加下面四行&#xff0c;即可 set JAVA_OPTS %J…