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元素做订阅。当数据发生变化时,然后,发布给所有的订阅者。