核心思想：数据驱动、组件系统

Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。
  • 数据驱动---双向数据绑定
    DOM是数据的一种自然映射（数据驱动DOM变化）

  • 组件化

     组件化就是扩展HTML元素，封装可重用的代码。 页面被拆分为一个个小的区块，每个区块对应一个组件，组件相互嵌套就形成了一个完整的页面。在Vue.js中，每一个组件都对应一个ViewModel，生成一个ViewModel树，ViewModel树与DOM树一一对应。

    组件设计原则：

     1、页面上每个独立的可视/可交互区域视为一个组件。 2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。 3、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

    组件的核心选项

     1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。 2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。 3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。 4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。 5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。 6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

    注册一个组件

         Vue.component('my-component', {         template: '<div>{{msg}} {{privateMsg}}</div>',<!-- 模板-->         props: { <!--接受参数-->             msg: String         },         data: function () { <!-- 私有数据，需要在函数中返回以避免多个实例共享一个对象-->             return {                 privateMsg: 'component!'             }         }     })     <my-component msg="hello"></my-component>

    Webpack是一个开源的前端模块构建工具，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，这是.vue后缀单文件组件形式的基础。
    所以在此基础上，尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中，以.vue文件后缀形成单文件组件格式，方便项目架构和开发引用。

    其他特性：

     1 异步批量DOM更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。 这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作，也可以保证所有的DOM写操作在一起执行， 避免DOM读写切换可能导致的layout。  2 动画系统：Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果， 还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。 3 可扩展性：除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制， 让用户可以在多个组件中复用共同的特性。

Vue组件中常见的三种传值方式：父传子、子传父、非父子传值。

        父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。        1）父组件传递给子组件：通过props属性来实现。子组件通过props接受。        父组件中：引入子组件 <child :inputName="name"></child>        子组件： props: {                        inputName: String                        }        2）子组件传递给父组件：通过$emit事件，发送事件名称        子组件中： 定义一个子组件传值的方法 childClick()            <input type="button" value="点击触发" @click="childClick">            methods: {                <!--childByValue是在父组件on监听的方法                 第二个参数this.childValue是需要传的值 -->              childClick () {                this.$emit('childByValue', this.childValue)              }         父组件中：             <!-- 引入子组件 定义一个on的方法监听子组件的状态-->                <child @childByValue="childByValue"></child>                methods: {                    childByValue: function (childValue) {                     <!--childValue就是子组件传过来的值-->                     this.name = childValue                 }        3)非父子组件进行传值：非父子组件之间传值，需要定义个公共的公共实例文件bus.js,作为中间仓库来传值，不然路由组件之间达不到传值的效果。