手册:https://www.runoob.com/vue2/vue-start.html
api :https://cn.vuejs.org/v2/api/
Vue 渐进式 JavaScript 框架
概述
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库(如:vue-router(页面跳转)
,,vue-resource
vuex(状态管理框架)
)或既有项目整合。
Axios
:前端通信框架;因为Vue
的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能;
什么是渐进式?
在我看来,渐进式代表的含义是:主张最少。
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)
所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。
比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。
Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
渐进式的含义,我的理解是:没有多做职责之外的事。
渐进式框架:Progressive,说明vue.js的轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用yue.js。
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增星开发。
Vue.js与ECMAScript
什么是ECMAScript?
什么是 Vue
MVVM 模式的实现者
- Model:模型层,在这里表示 JavaScript 对象
- View:视图层,在这里表示 DOM(HTML 操作的元素)
- ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM 中的 ViewModel 层的实现者
对于传统的js,我们只有MV,js操作dom(view)直接赋值模型属性(model),我们使用的ajax可以通过后台获取数据,然后就需要操作dom,进行数据的赋值,此时model和view就出现了耦合
而vue,添加了一个vm,将view和model进行隔离,vue.js充当了这个vm,vue.js使用自己的语法将model渲染到视图中;
在 MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel
来通信,而 ViewModel 就是定义了一个 Observer
观察者
- ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化,并能够通知数据发生改变
至此,我们就明白了,Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听
与 数据绑定
Vue.js 的两大核心要素
数据驱动
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data
选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty
把这些属性全部转为 getter/setter
。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools
来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter
被调用时,会通知 watcher
重新计算,从而致使它关联的组件得以更新。
组件化
- 页面上每个独立的可交互的区域视为一个组件
- 每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护
- 页面不过是组件的容器,组件可以嵌套自由组合(复用)形成完整的页面
VUE的优点
结合了react 的优点,虚拟 DOM, 用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率。
结合了Angular优点。模块化开发。
VUE.js使用
- 1)在html页面使用script引入vue.js的库即可使用。
- 2)使用Npm管理依赖,使用webpack打包工具对vue.js应用打包。大型应用推荐此方案。
- 3)Vue-CLI脚手架,使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
vue.js有哪些功能
- 1)声明式渲染
- 2)条件与循环
- 3)双向数据绑定
- 4)处理用户输入
- 5)组件化应用构建