很早之前就想开一系列有关vue的博客，奈何太忙了，哈哈（爱信不信）。。。刚刚收到消息vue2.5发布了,哎!还是应该加快一下步伐,要不就与社会脱节了。这次采用小步慢跑的形式一点一点总结vue，第一篇先说一些理论知识吧，总要有个印象，后面随之学习的深入，慢慢就会领悟。

1、首先，vue是什么?

我们看官网上的介绍:vue.js  是一套构建用户界面的渐进式js框架。那么什么叫渐进式框架呢？所谓渐进式就是一步一步的用嘛，比如你只想在页面上渲染一些简单数据，那你只用它的核心代码就好。如果你想更进一步用到组件，那你需要用vue的组件系统。如果项目更大,那你需要用到路由啊,构建工具等等。项目需要哪块就用哪块，这样自底向上增量开发的设计，加上与单文件组件和 Vue 生态系统支持的库结合，使得Vue 也完全胜任复杂的单页应用程序，而且上手也很容易了。

2、vue的两个核心点

介绍核心点之前我们先写个小例子吧。

页面中引入vuejs ,可以去官网上下载开发版本,也可以采用CDN方式直接引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vuejs</title>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    </head>

    <body>

        <div id="app">

            {{ content }}

        </div>

        <script>

            let data = {

                content:"Hello World!"

            }

            var vm = new Vue({

                el:"#app",

                data:data

            });

        </script>

    </body>

</html>

最好,还是手动敲一遍吧，你就会知道你会犯多少低级错误。在浏览器中查看实例，打开控制台，输入vm.content = "Hi, vue!",回车页面立马输出变为HI,vue! 这说明数据改变,页面也自动改变。那就引出了Vue的第一个核心点——响应式的数据绑定。是不是很AngularJS很像?他两的实现原理不同:

脏值检查（angular.js）

思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：

  • DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

数据劫持（Vue.js）

思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体怎么使用Object.defineProperty()实现响应式数据绑定,可以看这里: http://www.jb51.net/article/106484.htm

第二个核心点——组合的视图组件 

  vue写页面时，我们可以头部一个组件，侧边一个组件，中间内容区域另外一个组件。vue将我们的页面映射为组件树。这样做组件可重用，好处很多。

 3、虚拟DOM

首先我们定义的模板（无论是html模板,字符串模板还是render函数定义的模板），编译调用内部的渲染函数(createElement)形成图二的数据结构，经过render生成虚拟DOM树，这个虚拟的DOM树存在内存中,经过内部的编译器最后形成真实的DOM。

那么虚拟DOM有什么好处呢？我们知道运行js很快,但是大量操作DOM就会很慢,我们在更新一个元素的值后,经常要刷新整个DOM,这样造成了资源的浪费。有了虚拟DOM，当某个DOM节点的属性值发生变化后，只更新这一小块的节点，这样大大提高了性能。虚拟DOM这块，还有好多算法，有机会再开博客总结，自己可以先研究一下。

4、MVVM模式

M 代表数据模型，V 视图，VM视图模型。我们从model层拿到数据以后，通过vm层到view视图层进行渲染，vm层帮我们帮数据进行绑定，它就是m层和v层之前的桥梁，把他两联系起来。具体到项目中，我们可以看刚才的实例：

vue 从入门到精通(一)的更多相关文章

  1. vue 从入门到精通(二)

    上一篇总结了一些vue的理论知识,如果你没看懂的话--那返回去继续去看啊!反正我要开始第二篇了. vue提供了大量的指令,比如:v-if,v-bind,v-on--太多,多写项目,多看API,这里就不 ...

  2. laravel从5.2到5.5从入门到精通视频教程共16套

    laravel从5.2到5.5从入门到精通视频教程共16套,大部分都是实战项目比如P2P.博客.短网址.知乎门户.app软件开发.微信商城实战等 课程目录: 01.Laravel框架从入门到精通02. ...

  3. vuejs2从入门到精通与项目开发实战

    vuejs2从入门到精通:一.基础部分0.课件1.介绍2.vue实例3.模板语法4.计算属性和观察者5.Class与Style绑定6.条件渲染7.列表渲染8.事件处理9.表单输入绑定10.1.组件(1 ...

  4. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  5. <程序员从入门到精通> -- How

    定位 自己才是职业生涯的管理者,想清楚自己的发展路径: 远期的理想是什么?近期的规划是什么?今日的任务和功课又是什么? 今日之任务或功课哪些有助于近期之规划的实现,而近期之规划是否有利于远期之理想? ...

  6. 【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目 目录索引

    索引 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(1)搭建MVC环境 注册区域 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目(2)创建 ...

  7. ASP.NET MVC4入门到精通系列目录汇总

    序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...

  8. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

随机推荐

  1. 201521123074 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  2. 201521123122 《java程序设计》第九周学习总结

    201521123122 <java程序设计>第九周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 常用异常 题目5-1 1.1 截图 ...

  3. 201521123089 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 1.协议:网络中为了进行数据交换而建立的原则,标准或约定. 2.域名:Internet上某一台计算机的名称 ...

  4. SharePoint备份文件

    stp文件:SharePoint的.stp文件   在做一个和SharePoint有关的项目时,由于对SharePoint的unfamiliar,所以客户发了几个后缀为.stp的文件将我纳闷了半天,不 ...

  5. XML【介绍、用途、了解XML技术架构、语法】

    什么是XML? XML:extensiable markup language 被称作可扩展标记语言 XML简单的历史介绍: gml->sgml->html->xml gml(通用标 ...

  6. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  7. MyBatis框架（三）动态SQL，分页，二进制存入数据库图片

    一.动态sql语句,分页 1, <if>条件 <if test="key!=null"> 拼接sql语句 </if> 2, <choose ...

  8. 详解AngularJS中的依赖注入

    点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...

  9. C#单例测试（懒汉式双锁保证线程安全）

    单例模式的概念 单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 关键点: 这个类只有一个实例,这是最基本的 它必须自行创建 ...

  10. poj1006中国剩余定理

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 103506   Accepted: 31995 Des ...