1  学习目标

通过这一节,你会学会:

1.目前前端技术使用的趋势

2.什么是MVVM

3.Vue.js的两大核心

4.Vue.js的适用场景

 诞生背景

近几年来,得益于手机设备的普及和性能的提升,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页应用。

它们功能越来越复杂,交互也越来越酷炫,功能与效果越来越接近于原生的APP。

但是打开会有等待    用户体验不好   a标签链接需要等待   所以 为了解决这个  vue 开发 模式诞生了     另外还有最近你很多的 apicloud + vue + aui 的开发 虽然 有很多问题  但是用户体验 变的更好了  (废话不多说  先看vue 吧)

什么是MVVM

MVVM可以拆分成:View --- ViewModel --- Model三部分 ,看下面的视图:

那么,我们怎么理解MVVM呢?

上图中,左侧的View相当于我们的DOM内容,我们所看到的页面视图,右侧的Model相当于我们的数据对象,比如一个对象的信息

name: 张三
age:21

而中间的监控者就负责监控两侧的数据,并相对应地通知另一侧进行修改。比如:你在Model层中修改了name的值为:“李四”,那么View视图层显示的“张三”也会自动变成了“李四”,而这个过程就是有ViewModel来操作的,不需要你手动地去写代码去实现(你不用再手动操作DOM了)。

 Vue的核心

Vue的数据驱动:数据改变驱动了视图的自动更新,传统的做法你得手动改变DOM来改变视图,vuejs只需要改变数据,就会自动改变视图,一个字:爽。再也不用你去操心DOM的更新了,这就是MVVM思想的实现。

视图组件化:把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。看下图:

4 适用场景

如果你还在用jquery频繁操作你的DOM来更新页面的话,那么,你可以用Vue.js来解放你的DOM操作了。

如果你的项目中有多个部分是相同的,并可以封装成一个组件,那么,你可以试试用Vue.js。

此外,Vue.js的核心实现中使用了ES5的Object.defineProperty特性,IE8及以下版本浏览器是不兼容的,所以,你的项目需要兼容这些较低版本的浏览器的话,那么,Vue.js就不适用了。

毕竟,开发一个项目的目的不是为了使用某个框架。

vue 学前班001(基础概念)的更多相关文章

  1. vue初学:基础概念

    一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...

  2. 计算机系统4-> 计组与体系结构1 | 基础概念介绍

    在大二上学期学习数字逻辑的过程中,我对计算机如何运作产生了兴趣,因此开了这个系列来记录自己在这方面的学习过程,此前三篇分别是: 计算机系统->Hello World的一生 | 程序如何运行,从大 ...

  3. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  4. TCP/IP基础概念及通信过程举例

    TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...

  5. Jmeter基础之---jmeter基础概念

    Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...

  6. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  7. 理解 angular2 基础概念和结构 ----angular2系列(二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  8. JavaBean 基础概念、使用实例及代码分析

    JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...

  9. RabbitMQ基础概念详细介绍

    http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ...

随机推荐

  1. Codeforces 689B. Mike and Shortcuts SPFA/搜索

    B. Mike and Shortcuts time limit per test: 3 seconds memory limit per test: 256 megabytes input: sta ...

  2. NFS 挂载 + autofs

    NFS:Network File System RPC:Remote Procedure Call 一.手动挂载  (mount -t nfs 服务端IP:/共享目录  /本地挂载点) 客户端 1.安 ...

  3. C++加速程序的全局执行函数

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); C++的cin和cout在输入输出时,会先 ...

  4. 2018.08.22 NOIP模拟 or(线段树)

    or [描述] 构造一个长度为 n 的非负整数序列 x,满足 m 个条件,第 i 个条件为x[li] | x[li+1] | - | x[ri]=pi. [输入] 第一行两个整数 n,m.接下来 m ...

  5. HDU 3247 Resource Archiver (AC自动机+BFS+状压DP)

    题意:给定 n 个文本串,m个病毒串,文本串重叠部分可以合并,但合并后不能含有病毒串,问所有文本串合并后最短多长. 析:先把所有的文本串和病毒都插入到AC自动机上,不过标记不一样,可以给病毒标记-1, ...

  6. wordpaster更新说明

    官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/wordpaster/index.aspx 在线演示:FCKEditor2x示例 ...

  7. 通过wsdl生成client 的几种方式

    wsimport 位置 %JAVA_HOME%/bin/wsimport.exe 帮助 wsimport -help Usage: wsimport [options] <WSDL_URI> ...

  8. 反爬虫破解系列-汽车之家利用css样式替换文字破解方法

    网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...

  9. Center Alignment

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=93359#problem/B(456321) http://codeforces.com/ ...

  10. Andfix热修复技术使用

    AndFix,全称是Android hot-fix.是阿里开源的一个Android热补丁框架,允许APP在不重新发版本的情况下修复线上的bug.支持Android 2.3 到 6.0. andfix的 ...