vue核心思想

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

Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

• 数据驱动---双向数据绑定 , ViewModel，保证数据和视图的一致性
  DOM是数据的一种自然映射（数据驱动DOM变化）

• 组件化 应用类UI可以看作全部是由组件树构成的

   组件化就是扩展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,作为中间仓库来传值，不然路由组件之间达不到传值的效果。