自学Vue（一）

1.loader的调用过程

webpack只能打包后缀为.js的文件，这时需要用loader来打包其他后缀的文件，loader按照从后向前调用的顺序

2.父组件向子组件共享数据 props

在父组件中写数据通过自定义属性传值，在子组件用props取值 

注意:props定义的属性是只读的

3.子组件向父组件共享数据用自定义事件this.$emit子组件触发事件向父组件可以通过参数传数据，自定义事件获取到的值被参数覆盖时，$event作为实参传入可取到值

4.this.$route是路由的"参数对象" ；this.$router是路由的"导航对象"

5.前端路由 路径参数this.$route.params  查询参数(?后的参数) this.$route.query

6.插槽  slot

(1)放插槽里的内容可以改变，在父组件里引用子组件的内容里放要改变成的内容

(2)作用域插槽（父组件在子组件<slot></slot>处使用子组件data）

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 

        // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue 
        <template v-slot:one = 'slotonevalue'>  
           {{ slotonevalue.value1 }}
        </template>

        // 同上，由于子组件没有给slot命名，默认值就为default
        <template v-slot:default = 'slottwovalue'> 
           {{ slottwovalue.value2 }}
        </template>

     </ebutton>
  </div>
</template>

7.与后端在数据交互的时候，获取后端的数据将其转换成JSON格式(JSON.stringify())，取出的时候要注意将其转换回对象格式(JSON.parse())

8.computed会根据所依赖值的变化去重新执行，如果依赖值不变就会取缓存

内容有错误之处 感谢指出~