Vue的核心思想主要分为两部分: 1.数据驱动  2.组件系统

1.数据驱动

在传统的前端交互中,我们是通过Ajax向服务器请求数据,然后手动的去操作DOM元素,进行数据的渲染,每当前端数据交互变化时,可能要重新操作DOM元素,比较繁琐,容易出错;

而vue.js是一种基于MVVM思想的JavaScript库,他侧重于View层,利用Dircetives指令对DOM的操作进行了封装,从而简化了前端对于数据交换的操作。

当数据发生变化的时候,vue.js利用Dircetives指令去修改DOM,数据驱动DOM的变化,所以可以说DOM是数据的一种自然映射。

同时也通过DOM Listener来监听view视图的变化,当DOM发生变化时,被监听到之后,实现model的变化,从而实现了数据的双向绑定。

2.组件系统

扩展HTMl元素,实现了代码的封装复用,每一个组件都代表了一个单独ViewModel。每一个组件都对应一个工程目录,组件需要的各种资源在这个目录中进行维护,页面是组件的容器,而不同的组件相互嵌套组合可以组成一个完整的页面。

Vue的核心思想的更多相关文章

  1. Vue——核心思想--mvvm

    Vue的核心思想为数据驱动和组件化. 一.数据驱动——双向绑定 Vue是一种MVVM框架.而DOM是数据的一个种自然映射.传统的模式是通过Ajax请求从model请求数据,然后手动的触发DOM传入数据 ...

  2. Vue2.0的核心思想

    Vue的核心思想为数据驱动和组件化. 一.数据驱动——双向绑定 Vue是一种MVVM框架.而DOM是数据的一个种自然映射.传统的模式是通过Ajax请求从model请求数据,然后手动的触发DOM传入数据 ...

  3. vue.js学习笔记(一):什么是mvvm框架,vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  4. 浅谈Vue.js2.0核心思想

    Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动.组件系统. 数据驱动: Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProper ...

  5. Vue学习日记(二)——Vue核心思想

    前言 Vue.js是一个提供MVVM数据双向绑定的库,其核心思想无非就是: 数据驱动 组件系统 数据驱动 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单.在使用 jQu ...

  6. Vuejs核心思想学习笔记

    习Vue已经有一段时间了,但未对其核心思想作自己的总结和理解 Vue核心思想有两个 : 数据驱动和组件化(系统组件) 数据驱动 数据驱动目的是让数据和DOM保持同步, 只要修改了data数据,DOM就 ...

  7. Vue框架核心之数据劫持

    本文来自网易云社区. 前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需 ...

  8. Vue学习系列(一)——初识Vue.js核心

    前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...

  9. 《深入理解Spark:核心思想与源码分析》——SparkContext的初始化(叔篇)——TaskScheduler的启动

    <深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...

随机推荐

  1. css进阶 06-CSS开发积累

    06-CSS开发积累 #让flex盒子中的子元素们,居中 flex布局常用的三行代码: display: flex; justify-content: center; // 子元素在横轴的对齐方式 ( ...

  2. [IOI1994]The Castle

    开了博客之后一直没动今天水完题手痒想起这个就来水一篇陈年水题(雾 题目链接<< 题意:给一张n*m个格子的地图信息,求连通块个数以及最大连通块面积. 每个格子四个方向可以有墙,输入用一个十 ...

  3. Web服务器-服务器开发-返回固定页面的HTTP服务器(3.3.1)

    @ 目录 1.注意 2.代码 关于作者 1.注意 浏览器解析的时候偶\r\n才算一个换行符 发送的str要编码,这里使用的是utf8 其他的都和上一篇没有什么区别 这里主要返回的是固定的网址 2.代码 ...

  4. 每日CSS_发光文本效果

    每日CSS_发光文本效果 2020_12_22 源码 1. 代码解析 1.1 html 代码片段 <h1> <span>今</span> <span>天 ...

  5. Redis集群的分布式部署

    3.2.2:Redis Cluster: Redis  分布式部署方案: 1)  客户端分区:由客户端程序决定 key 写分配和写入的 redis node,但是需要客户端自己处理写入 分配.高可用管 ...

  6. openstack高可用集群17-openstack集成Ceph准备

    Openstack集成Ceph准备 Openstack环境中,数据存储可分为临时性存储与永久性存储. 临时性存储:主要由本地文件系统提供,并主要用于nova虚拟机的本地系统与临时数据盘,以及存储gla ...

  7. (第一篇)记一次python分布式web开发(利用docker)

    作者:落阳 日期:2020-12-23 在一次项目开发中,决定使用docker+nginx+flask+mysql的技术栈来开发,用此系列文章记录开发的过程. 系列文章,当前为第一篇,记录一次pyth ...

  8. Python进阶——为什么GIL让多线程变得如此鸡肋?

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 做 Python 开发时,想必你肯定听过 GIL,它经常被 Python 程序员吐槽,说 Pytho ...

  9. Autofac的基本使用---3、泛型类型

    Autofac的基本使用---目录 准备 使用的表是Teacher,创建相关的IDAL.DAL.IBLL.BLL层. 使用EF,创建一个Model层,存放edmx文件. 创建一个Infrastruct ...

  10. git文件锁定不更新和忽略

    git文件的忽略 新建未提交的文件直接添加.gitignore 提交之后的文件已被git追踪 这时需要清除git缓存 忽略文件 git rm --cached ./src/main/resources ...