vue概念及基础学习

前面啰嗦了一堆儿，补了点知识。

再来学Vue和webpack。

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

http://www.w2bc.com/Article/50764

http://webpack.github.io/docs/tutorials/getting-started/

对初学者来说，真的有些乱，读完这些，概念差不多了，实际应用的时候再做进一步学习吧。

接下来可以进行vuejs的学习了。

http://cn.vuejs.org/v2/guide/

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）

    {{msg}}

// 原生对象即数据
var data = {
    msg: 'hello!'
}
// 创建一个 ViewModel 实例
var vm = new Vue({
    // 选择目标元素
    el: '#app',
    // 提供初始数据
    data: data
})

2、组件化概念

Vue.component('my-component', {
    // 模板
    template: '
{{msg}} {{privateMsg}}
',
    // 接受参数
    props: {
        msg: String
    

    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})

注册之后即可在父组件模板中以自定义元素的形式调用一个子组件： 

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

看完上面内容，对于初学者来说已经很辛苦了。

休息一会儿，然后找个简单的例子开搞吧。