前言

Vue.js是一个提供MVVM数据双向绑定的库，其核心思想无非就是：

  • 数据驱动
  • 组件系统

数据驱动

Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用 jQuery 手工操作 DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

本人在阅读vue.js源码的时候，也发现了vue的数据驱动无非就是利用的是ES5Object.defineProperty和存储器属性，个人觉得也是vue比较轻便和灵活的原因之一。

getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

附：vue.js源码图在github上vue打包好的dist文件下面的vue.js可以找到（该图与核心技术无关，只是说明vue使用这个属性）

这个存储器属性也就是vue的核心，也是比jq好的地方之一，jq是通过绑定事件来进行操作dom，而vue和react是通过操作obj的属性来重新渲染dom

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <!--

        对入输入框input输入的内容都在output里面输出

     -->

    <input type="text" id="input">

    <br>

    <span id="output"></span>

</body>

<script>

    // 绑定事件的做法

    // 但是没有办法从控制台控制信息修改value

    document.getElementById("input").addEventListener("keyup", function(e) {

        document.getElementById("output").innerHTML = e.target.value

    })

    // 绑定虚拟dom的做法，就是通过改变一个obj的属性值

    // 进而改变dom的值

    var obj = {}

    // @obj 可以是任何一个对象

    // @"string" 动态绑定的属性值

    // @{} 构造getter和setter

    Object.defineProperty(obj, "string", {

        get: function() {

            console.log("getter")

        },

        set: function(val) {

            document.getElementById("output").innerHTML = val

            document.getElementById("input").value = val

        }

    })

</script>

</html>

组件系统

组件系统，就是由于vue有比较优秀的组件系统，所以，现在很多项目也都采用了vue框架，如果你想要深入的了解组件系统，建议可以看看vue的官方文档

用官方一点的话来形容，组件化就是：实现了扩展HTML元素，封装可用的代码。页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

简单的说，其实就是把页面进行分块处理，分成多个小块，每个小块就是一个组件，这样可以形成组件的复用，而且提高开发效率。

Vue学习日记（二）——Vue核心思想的更多相关文章

  1. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  2. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  3. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  4. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  5. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  6. vue学习（二）Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  7. vue学习（二）模板页配置(bootstrap)

    1.替换我们的显示页面 删除components下的所有文件,新建模板页文件夹 layout. //Layout.vue <template> <div> <header ...

  8. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  9. Vue学习笔记之Vue介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

随机推荐

  1. java检测是不是移动端访问

    request可以用别的代替 private static boolean isMobile(){ HttpServletRequest request = ThreadContextHolder.g ...

  2. Eclipce远程调试

    1.注意: root权限启动的进程不支持远程调试,也有很多隐患,支持最高权限,应用普通用户启动,又原先安装Tomcat是使用的root权限,普通用户对root安装的软件没有执行权限,可以修改相应权限, ...

  3. MySQL两种内核对比

    MySQL内核 https://blog.csdn.net/baichoufei90/article/details/83504446 关键字:全文索引 索引外置 两种内核:MyISAM 和InnoD ...

  4. iview之tabs嵌套

    iview之tabs嵌套 说明: iview组件中当嵌套使用 Tabs时,需要在Tabs中指定 name 属性来区分层级,然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字 ...

  5. PanDownload/AD16/MDK5/CAD2019及2007/Dev-C++/Office2016专业版软件安装包

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  6. 主流浏览器内核（IE、Chrome、Firefox、Safari、Opera）

    IE浏览器,使用Trident浏览器内核,又称为IE内核.只用于Windows平台,而且并不是开源的: chrome浏览器,目前使用的是Blink浏览器内核.浏览器内核的演进过程:Chromium  ...

  7. 多线程编程-- part5.1 互斥锁之公平锁-获取锁

    基本概念 1.AQS:AbstractQueuedSynchronizer类 AQS是java中管理“锁”的抽象类,锁的许多公共方法都是在这个类中实现.AQS是独占锁(例如,ReentrantLock ...

  8. 防抖与节流函数<转>

    参考连接:https://www.cnblogs.com/zhuanzhuanfe/p/10633019.html https://blog.csdn.net/Beijiyang999/article ...

  9. 如何卸载rpm

    首先通过  rpm -q <关键字> 可以查询到rpm包的名字 或者rpm -qa|grep 关键字 然后 调用 rpm -e <包的名字> 删除特定rpm包 如果遇到依赖,无 ...

  10. 15、Nginx动静分离实战

    1.Nginx动静分离基本概述 动静分离, 通过中间件将动静分离和静态请求进行分离. 那为什么要通过中间件将动态请求和静态请求进行分离? 减少不必要的请求消耗, 同时能减少请求的延时. 通过中间件将动 ...