前言

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. Charles学习（一）之macOS Charles 4.x版本的安装、激活、使用以及软件功能了解

    前言 Charles是mac上一款比较好用的抓包工具,那么我们什么情况下需要用到抓包工具呢?比如我想查看一个接口请求的参数.返回值,还有移动设备上的http/https请求. Charles是一个HT ...

  2. Stream 分布式数据流的轻量级异步快照

    1. 概述 分布式有状态流处理支持在云中部署和执行大规模连续计算,主要针对低延迟和高吞吐量.这种模式的一个最根本的挑战就是在可能的失败情况下提供处理保证.现有方法依赖于可用于故障恢复的周期性全局状态快 ...

  3. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. 取出input内的空格

    onkeyup='this.value=this.value.replace(' ','')'

  5. IT技术网站博客推荐

    CSDN 全球最大中文IT社区,为IT专业技术人员提供最全面的信息传播和服务平台. 51CTO 技术成就梦想 - 中国领先的IT技术网站 itEye Java编程 Spring框架 Ajax技术 ag ...

  6. centos 7 安装 Oracle 12c

    #!/bin/bash #!/usr/bin/expect -f #/etc/sysctl.conf --bash-srcipts-- echo 'net.ipv6.conf.all.disable_ ...

  7. html 不刷新切换当前页面内容

    一个小功能,做个笔记: 操作流程是:导航产品有三个下拉子菜单,点击食品跳转,同时跳转出来的子页面中,选中食品这个当前项. 切换  食品  厨具   家电  三个选项卡在刷新页面的时候仍然停留在当前选中 ...

  8. VMware的linux虚拟机配置ip后无法ping通宿主机

    VMware的linux虚拟机配置ip(使用eth0)后无法ping通宿主机,同样宿主机无法ping通linux虚拟机. 可能原因:linux虚拟机使用的网卡,与本机使用的网卡不同,配置成与本机一致的 ...

  9. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  10. Python CGI编程Ⅶ

    简单的表单实例:GET方法 以下是一个通过HTML的表单使用GET方法向服务器发送两个数据,提交的服务器脚本同样是hello_get.py文件,hello_get.html 代码如下: 默认情况下 c ...