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属性来实现。

    父组件：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           父组件:
       
       <input type="text" v-model="name">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <br>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <br>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <!-- 引入子组件 -->
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <child :inputName="name">
       
       </child>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       import child 
       
       from 
       
       './child'
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       components: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             child
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       name: 
       
       ''
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

子组件：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           子组件:
       
       <span>{{inputName}}
       
       </span>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       // 接受父组件的值
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           props: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       inputName: 
       
       String,
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       required: 
       
       true
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

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

子组件：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           子组件:
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <span>{{childValue}}
       
       </span>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <!-- 定义一个子组件传值的方法 -->
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <input type="button" value="点击触发" @click="childClick">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       childValue: 
       
       '我是子组件的数据'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             childClick () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       // childByValue是在父组件on监听的方法
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       // 第二个参数this.childValue是需要传的值
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       this.$emit(
       
       'childByValue', 
       
       this.childValue)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

父组件：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           父组件:
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <span>{{name}}
       
       </span>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <br>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <br>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <child v-on:childByValue="childByValue">
       
       </child>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       import child 
       
       from 
       
       './child'
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       components: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             child
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       name: 
       
       ''
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       childByValue: 
       
       function (childValue) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       // childValue就是子组件传过来的值
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       this.name = childValue
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

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

公共bus.js

   
   

     
     

      
      

     
     
     
     

      
      

       
       //bus.js
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import Vue from 'vue'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       export default new Vue()
      
      
     
     
   
   

组件A：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           A组件:
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <span>{{elementValue}}
       
       </span>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <input type="button" value="点击触发" @click="elementByValue">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       // 引入公共的bug，来做为中间传达的工具
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       import Bus 
       
       from 
       
       './bus.js'
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       elementValue: 
       
       4
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       elementByValue: 
       
       function () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               Bus.$emit(
       
       'val', 
       
       this.elementValue)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>
      
      
     
     
   
   

组件B：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           B组件:
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <input type="button" value="点击触发" @click="getData">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <span>{{name}}
       
       </span>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </template>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <script>
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       import Bus 
       
       from 
       
       './bus.js'
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       export 
       
       default {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       name: 
       
       0
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       mounted: 
       
       function () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       var vm = 
       
       this
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       // 用$on事件来接收参数
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             Bus.$on(
       
       'val', (data) => {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       console.log(data)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               vm.name = data
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             })
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           },
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       getData: 
       
       function () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       this.name++
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>