前言

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. Linux-1.3目录结构，基础命令

    1.Linux目录结构 2.Linux基础命令(常用) ctrl+alt+T(打开终端) cd 切换文件夹(pwd查看当前目录) cd /home 绝对路径 以根目录开头 cd admin 相对路径 ...

  2. O023、理解Nova架构

    参考https://www.cnblogs.com/CloudMan6/p/5410447.html   Compute Service Nova 是OpenStack最核心的服务,负责维护和管理云环 ...

  3. java 矩阵的运算

    首先需要引入包Jama-1.0.2.jar 这个包下封装的对矩阵运算的方法,包括矩阵的加减乘除逆运算等 包下载地址:https://math.nist.gov/javanumerics/jama/  ...

  4. 记一些云服务器上部署koa2项目遇到的问题

    云服务器系统版本centos7.2,部署的项目koa2,node版本: 10.16.0 一.pm2的一些问题 1.安装pm2: npm install -g pm2 2.建立软链接,使pm2能全局使用 ...

  5. 计算机网络：这是一份全面 & 详细 的TCP协议学习指南

    原文链接:blog.csdn.net 用这个媒体播放器组件,实时互动时也可共同观看本地视频juejin.im 前言 计算机网络基础 该是程序猿需掌握的知识,但往往会被忽略 今天,我将详细讲解计算机网络 ...

  6. jquery 滚动事件-记录自己常用的

    1.h5端页面滑动至第3屏及以后才出现置顶按钮 $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 ...

  7. Gcc 安装过程中部分配置

    Gcc 安装过程中部分配置详解 全文参考<have fun with Gcc>一文,如有需要请联系原作者prolj@163.com 解压gcc源码后,需要进行configure,这时候一般 ...

  8. selenium入门学习

    在写爬虫的学习过程中,经常会有一些动态加载,有些是可以动过接口直接获取到,但是实在没办法,所以学习下selenium. 首先百度一下: Selenium [1]  是一个用于Web应用程序测试的工具. ...

  9. 目标 - 在虚拟机CentOS7中无图形界面安装Oracle11G R2版本

    参考: https://www.cnblogs.com/yejingcn/p/10278473.html centos7启动oracle su - oracle //切换到自己的oracle账户 ls ...

  10. zabbix 邮件报警事件：Zabbix discoverer processes more than 75% busy

    Problem has been resolved at :: on Problem name: Zabbix discoverer processes more than % busy Host: ...