这是我参与8月更文挑战的第13天,活动详情查看:8月更文挑战
Vue.js是什么?
简单小巧的核心,渐进式技术拢,足以应付任何规模的应用。
简单小巧是指Vue.js 压缩后大小仅有17阻。所谓渐进式( Progre ss ive ),就是你可以一步一 步、有阶段性地来使用Vue.js ,不必一开始就使用所有的东西。随着本书的不断介绍,你会深刻感 受到这一点,这也正是开发者热爱Vue.js的主要原因之一。 使用Vue.j s 可以让We b 开发变得简单, 同时也颠覆了传统前端开发模式。它提供了现代Web 开发中常见的高级功能,比如:
- 解辑视图与数据。
- 可复用的组件.
- 前端路由.
- 状态管理.
- 虚拟DOM ( Virtual DOM)
MVVM 模式 与知名前端框架Angular、Ember 等一样, Vue .js在设计上也使用MVVM ( Model-View-View Mode l) 模式。
MVVM 模式是由经典的软件架构MVC 衍生来的。当View (视图层)变化时,会自动更新到 ViewModel (视图模型),反之亦然。View 和ViewModel 之间通过双向绑定(tdata-binding )建立 联系,如图1-1 所示。
如何使用Vue.js
每一个框架的产生都是为了解决某个具体的问题。在正式开始学习V ue.js 前,我们先对传统 前端开发模式和Vue. 的开发模式做一个对比,以此了解Vue. 产生的背景和核心思想。
传统的前端开发模式
前端技术在近几年发展迅速,如今的前端开发己不再是10 年前写个HTML 和css 那样简单 了,新的概念层出不穷,比如ECMAScript 6 、Node.js 、NPM 、前端工程化等。这些新东西在不断 优化我们的开发模式,改变我们的编程思想。
随着这些技术的普及, 一套可称为“万金油”的技术技被许多商业项目用于生产环境:
jQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) + Gulp ( Grunt)
这套技术战以jQuery 为核心,能兼容绝大部分浏览器,这是很多企业比较关心的,因为他们 的客户很可能还在用IE 7 及以下浏览器。使用RequireJS 或SeaJS 进行模块化开发可以解决代码依 赖混乱的问题, 同时便于维护及团队协作。使用轻量级的前端模板(如doT )可以将数据与HTML 模板分离。最后,使用自动化构建工具(如Gulp )可以合并压缩代码,如果你喜欢写Less 、Sass 以及现在流行的ES 6 ,也可以帮你进行预编译。
这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式,由于它的简 单、高效、实用, 至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移,出现了更复杂 的业务场景,比如SPA (单页面富应用〉、组件解稍等。为了提升开发效率,降低维护成本,传 统的前端开发模式己不能完全满足我们的需求,这时就出现了如Angular 、React 以及我们要介绍 的主角Vue.js
Vue.js的开发模式 Vue.js是一个渐进式的JavaScript 框架,根据项目需求,你可以选择从不同的维度来使用它。 如果你只是想体验Vue.js带来的快感,或者开发几个简单的HTML 5 页面或小应用,你可以直接 通过script 加载CDN 文件,例如:
〈!一自动识别最新稳定版本的Vue.js 一〉
<script src = ” https : //unpkg.com/vue/d工st/vue.min.js ” ></script>
〈! 一指定某个具体版本的Vue.js 一〉
<script src= ” https : //unpkg . com/vue@2.1.6/dist/vue . min.j s ”></ script>
两种版本都可以,如果你不太了解各版本的差别,建议直接使用最新的稳定版本。当然, 你 也可以将代码下载下来, 通过自己的相对路径来引用。引入Vue.j s 框架后,在bod y 底部使用new Vu e()的方式创建一个实例, 这就是Vue扣最基本的开发模式。