前言

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. CentOS 7 yum安装LAMP，LNMP并搭建WordPress个人博客网站

    本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...

  2. C# 下sqlite简单使用

    1. 对数据库增, 删, 改 //数据库文件存储路径,(Environment.CurrentDirectory:为当前工作目录的完全路径) string dbPath = "Data So ...

  3. O014、云计算与OpenStack

    参考https://www.cnblogs.com/CloudMan6/p/5334760.html   云计算 基本概念   所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发 ...

  4. 新技能get，文件夹隐藏

    attrib命令用来显示或更改文件属性. ATTRIB [+R | -R] [+A | -A ] [+S | -S] [+H | -H] [[drive:] [path] filename] [/S ...

  5. TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈

    TVM:一个端到端的用于开发深度学习负载以适应多种硬件平台的IR栈  本文对TVM的论文进行了翻译整理 深度学习如今无处不在且必不可少.这次创新部分得益于可扩展的深度学习系统,比如 TensorFlo ...

  6. [转] JAVA分为三个体系,JavaSE,JavaEE,JavaME(J2ME)的区别以及各个版

        Java SE(JavaPlatform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程 ...

  7. webpack4 打包

    1. 基本安装及命令 npm config set registry https://registry.npm.taobao.org     //  淘宝镜像npm install webpack-c ...

  8. 自己实现一个简化版Mybatis框架

    MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码.本文完成的Mybatis功能比较简单,代码还有许多需要改进的地方,大家可以结合M ...

  9. 访问接口错误,com.netflix.client.ClientException: Load balancer does not have available server for client: panfeng-item-service

    com.netflix.client.ClientException: Load balancer does not have available server for client: panfeng ...

  10. CentOS7搭建FastDFS V5.11分布式文件系统（二）

    1.CentOS7 FastDFS搭建 前面已下载好了要用到的工具集,下面就可以开始安装了: 如果安装过程中出现问题,可以下载我提供的,当前测试可以通过的工具包: 点这里点这里 1.1 安装libfa ...