VUE 核心思想

    Vue的核心思想为数据驱动和组件化。

一、数据驱动--双向绑定

    Vue是MVVM框架，而DOM是数据的一种自然映射。

    传统的模式如下：

    Ajax请求从model请求数据 --> 手动触发DOM并传入数据从而修改页面。

    Vue的模式如下：

    

    在Vue中，Directives对view进行了封装，当model中的数据发生变化时，Vue就会通过Directives指令去修改DOM，同时也通过DOM Listener实现对视图view的监听，当DOM改变时，就会被监听到，实现model的改变，从而实现数据的双向绑定。

二、组件化

    组件化就是实现了扩展HTML元素，封装可用的代码。

    1、页面上每个独立的可视/可交互区域视为一个组件。

    2、每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护。

    3、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

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

父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

下面通过实例来看他们的传值过程。

1、父组件传递给子组件：通过props属性来实现。

    父组件：

子组件：

2、子组件传递给父组件：通过$emit事件

子组件：

父组件：

3、非父子组件进行传值：非父子组件之间传值，需要定义个公共的公共实例文件bus.js,作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

组件A：

组件B：