【Vue学习笔记】Vue框架初识

vue的介绍

vue官网

• 构建数据驱动的web应用开发框架

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

• Vue 被设计为可以自底向上逐层应用

• Vue 的核心库只关注视图层

• vue框架的核心：数据驱动和组件化

• 便于与第三方库或既有项目整合,另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，
  Vue 也完全能够为复杂的单页应用程序提供驱动。

• Vue 不支持 IE8 及以下版本

vue的示例代码

vue框架的理解

1、首先：一个页面包括：结构（HTML模板），表现（css），行为（js）
2、其次：原生JS中的做法：写好HTML的模板和css样式，用js产生数据（逻辑），通过dom的方式控制数据显示在HTML中的那个位置，包括如何显示（DOM的方式改变样式）
3、vue框架：vue中，写好HTML模板，声明式地告知vuejs库，数据显示在何处，在vue对象中处理数据，不用做DOM操作（vuejs框架负责）

vue框架的两大核心：

数据驱动和组件化

数据驱动——双向绑定

Vue是一种MVVM框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue就会通过Directives指令去修改DOM。同时也通过DOM Listener实现对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，实现数据的双向绑定。

组件化

组件化实现了扩展HTML元素，封装可用的代码。页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

Vue 2.× 实现数据绑定（响应式）的原理

vue2.×的 数据绑定是通过 数据劫持和观察者模式 的方式来实现的
1、数据劫持： vue2.× 使用Object.defineProperty();
当你把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
目的是：感知属性的变化。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，在Vue中可以去改变模板上的显示（使用发布订阅者模式）。
2、观察者模式（发布订阅模式）：
目的：当属性发生变化时，所有使用(直接使用和间接使用）该数据地方（订阅）跟着变化
vue2框架会把模板使用该数据的所有dom元素做订阅。当数据发生变化时，然后，发布给所有的订阅者。