前言

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. 如何让 node 运行 es6 模块文件，及其原理

    如何让 node 运行 es6 模块文件,及其原理 最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机 ...

  2. Bash Plays with Functions CodeForces - 757E (积性函数dp)

    大意: 定义函数$f_r(n)$, $f_0(n)$为pq=n且gcd(p,q)=1的有序对(p,q)个数. $r \ge 1$时, $f_r(n)=\sum\limits_{uv=n}\frac{f ...

  3. [Next] next中文文档

    Next.js 是一个轻量级的 React 服务端渲染应用框架. 怎么使用 安装 在项目文件夹中运行: npm install --save next react react-dom 将下面脚本添加到 ...

  4. 设置队列中文件上的“X”号的点击事件+uploadLimit动态加1

    目的:1.设置文件队列中“x”号的点击事件 2.每次删除服务器文件后,把uploadLimit + 1: 'onUploadSuccess': function (file, data, respon ...

  5. 关于tomcat部署项目的问题

    问题是这样的 之前用tomcat8.5部署的项目,结果启动项目一直三个端口被占用,浏览器也打不开目标网页 卸了8,装了9.先配置的一大堆,结果可以打开Tomcat的主页locahost:8080,到此 ...

  6. 07 MySQL之索引原理

    一.介绍 为什么有索引:使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构. 作用: 1.        快速查询数据 2.        保证数据的唯一性 3 ...

  7. 微信小程序swiper使用网络图片不显示问题

    @ wxml代码: <view class="container"> <swiper indicator-dots="true}" autop ...

  8. Python(os和sys)理解

    Python(os和sys)理解 os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口; sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时 ...

  9. linux无界面模式安装selenium+chrome+chromedriver并成功完成脚本（亲测可用）

    环境:docker centos 7.4 能通外网 写好的selenium脚本. 具体步骤: 一:安装selenium  这是最简单的 直接利用 pip3 install selenium 二 安装c ...

  10. redis一键部署脚本

    1.新建一个名为 auto_install_redis.sh的文件 2.将下面脚本拷贝到文件中,具体步骤在注释里面 #环境 linux #一键安装redis,在linux环境中使用脚本运行该文件(sh ...