1、数据驱动

只要改变数据，Vuejs会通过Directives指令对DOM进行封装，当数据发生变化，会通知相应的DOM进行变化

Vuejs会对DOM进行监听，通过DOMListeners监听视图的变化，通知数据进行改变，这样就实现了数据的双向绑定

数据相应原理

现在有一份a.b的数据，当vue对象实例化的时候，会通过es5的Object.defineproperty创建setter和getter方法，vuejs编译模板生成指令对象（黄色部分），每个指令对象都会关联一个watcher。当我们对指令的a.b做求值时，会触发getter方法；（绿色部分）把依赖设置到了Watcher，当a.b数据发生改变时，会触发setter，通知到对应关联的watcher，watcher会对a.b进行求值，计算对比新旧值，发现值改变了，watcher会通知到指令，调用指令的update方法，由于指令是对DOM的封装，所以指令会通过原生DOM的方法，更新视图

2.组件化

组件设置原则

页面上每个独立的可视/可交互区域视为一个组件

每个组件对应一个工程目录，组件所需要的各种资源在这个目录就近维护（包括JS ,CSS等）

页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

vue系列之核心思想的更多相关文章

  1. vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想

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

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

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

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

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

  4. Vue学习日记（二）——Vue核心思想

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

  5. Vue的核心思想

    Vue的核心思想主要分为两部分: 1.数据驱动  2.组件系统 1.数据驱动 在传统的前端交互中,我们是通过Ajax向服务器请求数据,然后手动的去操作DOM元素,进行数据的渲染,每当前端数据交互变化时 ...

  6. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  7. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  8. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  9. Vuejs核心思想学习笔记

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

随机推荐

  1. vuejs怎么在服务器部署？（知乎）

    作者:知乎用户链接:https://www.zhihu.com/question/46630687/answer/157166318来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  2. sudALSA lib dlmisc.c:236:(snd1_dlobj_cache_get) Cannot open shared library /usr/lib/alsa-lib/libasound_module_pcm_pulse.so

    我使用的系统是kali,默认的浏览器为iceweasel.默认的浏览器很好用!! 但是,给浏览器安装flash后,播放视频,会报错:有视频,无声音. 下面给出我的解决方案:

  3. python爬虫-采集英语翻译

      http://fanyi.baidu.com/?aldtype=85#en/zh/drughttp://fanyi.baidu.com/?aldtype=85#en/zh/cathttp://fa ...

  4. JAVA记录-消息队列介绍

    1.JMS概述 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  5. Gym - 100851F - Froggy Ford（dijkstra）

    题目链接 参考   http://blog.csdn.net/KIJamesQi/article/details/52214990 题意 蛤蛤要从这岸去到对岸,河中有n块石头,现可以在河中添加一块石头 ...

  6. MySQL事物(一)事务隔离级别和事物并发冲突

    数据库的操作通常为写和读,就是所说的CRUD:增加(Create).读取(Read).更新(Update)和删除(Delete).事务就是一件完整要做的事情.事务是恢复和并发控制的基本单位.事务必须始 ...

  7. buildroot构建项目（六）--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之三

    一.内存控制器 在关闭了MMU和caches 之后 就进入lowlevel_init 函数,对内存控制器进行初始化.lowlevel_init.S (board\samsung\mini2440) 1 ...

  8. C++内存管理（转）http://www.cnblogs.com/qiubole/archive/2008/03/07/1094770.html

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  9. 多文档界面QMdiArea

    当使用多文档界面功能时,我们是将QMdiArea作为主窗口的中央部件,然后在这个中央部件中,我们可以同时打开很多个子窗口QMdiSubWindow 样式: import sys from PyQt5. ...

  10. 列表视图QlistView

    列表视图QlistView要配合setModel模型一起使用 例子一 QStringListModel()  字符串列表模型 import sys from PyQt5.QtWidgets impor ...