前面啰嗦了一堆儿,补了点知识。
再来学Vue和webpack。
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
http://www.w2bc.com/Article/50764
http://webpack.github.io/docs/tutorials/getting-started/
对初学者来说,真的有些乱,读完这些,概念差不多了,实际应用的时候再做进一步学习吧。
接下来可以进行vuejs的学习了。
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
作者本人的介紹,不得不说,比官网写的易懂多了,
http://www.csdn.net/article/1970-01-01/2825439
总结:
1、简化并且优化性能的MVVM框架(相对于angular,去掉了controller,service。factory,scope,module等概念,都是viewModel)
2、组件化概念
注册之后即可在父组件模板中以自定义元素的形式调用一个子组件:
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项,但最核心的是以下几个:
- 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
- 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
- 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下),但也可以显式地声明为双向绑定。
- 方法(methods):对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
- 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,比如created,attached,destroyed等等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,可以理解为 Controller的逻辑被分散到了这些钩子函数中。
- 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突,一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
基于构建工具的单文件组件格式
Vue.js的核心库只提供基本的API,本身在如何组织应用的文件结构上并不做太多约束。但在构建大型应用时,推荐使用Webpack+vue-loader这个组合以使针对组件的开发更高效。
【参考链接】
Vue.js官方网站:http://vuejs.org
Vue.js GitHub仓库:https://github.com/yyx990803/vue
Webpack官方网站: http://webpack.github.io
vue-loader单页组件示例:https://github.com/vuejs/vue-loader-example
看完上面内容,对于初学者来说已经很辛苦了。休息一会儿,然后找个简单的例子开搞吧。