vue笔记

一. async+await语法

1. 使用await语法的时候，后面的函数需要返回Promise对象

async created () {
    const res = await axios.get('/api/goods')
    this.goods = res.data.list;
}

二. props

1. 父组件往子组件传值

三. 购物车实现

四. Form 表单组件实现

1. 使用async-validator 实现表单验证

2. 使用element

3. 组件嵌套

4. 进行用于校验  this.$refs.loginForm.validate(valid => {}）

5. vue组件的开发

1. 组件注册
1.  全局注册 Vue.component('kkk', { } )
2.  局部注册 （依赖可追溯）
2. 组件使用
3. props传值
1.  父组件往子组件传值实实现

   //FormTest.vue
   <h3>{{title}}</h3>
   props: ["title"],//App.vue
   1. 静态传递 <form-test title="表单的实现"></form-test>
   2. 动态传递 <form-test :title="titleVal"></form-test>
   data() {
      return {
         titleVal: '表单实现'
      }
   }
   
   //这种状态父组件一定要传值，不然报错
   props: {    title: {type: String,required: true}   },

4. 组件事件
1.  事件： 子组件向父组件传参的时候需要用到 

   this.$emit('bindClick',event)
   

2.   $emit

   //Button.vue
   <button @click="kkkk">开始吧</button>
   methods: {            
   kkkk() {                
   this.$emit('zz','你好')           
    }        
   },
   //App.vue
    <l-button @zz="handClick"></l-button>
     import LButton from './components/Button.vue';
     handClick(obj){      console.log(obj);  }

3.  v-model 需要满足才能使用
1.  基于绑定value
2.  响应input事件
4.  单向数据流原则： 组件内不能修改props属性
5. 拓展组件一插槽
1.  扩展组件的内容
2.  slot
3.  匿名插槽

   //Win.vue
   <div class="header">    
   <slot name="head"></slot> 
   </div> <slot></slot>
   <div class="foot">    
    <slot name="foot"></slot> 
   </div>
   //App.vue
   <win>       
   <template slot="head">      
      <h3>window匿名插槽</h3>   
       </template>      
    content...      
    <template slot="foot">         
   底部       </template>   
     </win>
   

6. Form 组件设计

表单组件，组件分层

1.  Form负责定义检验规则
2.  FormItem 负责显示错误数据
3.  Input 负责数据的双向绑定
4.  使用provide & inject 内部共享数据

5. 
   

7. 双向绑定是一个语法糖

8. provide & inject 可以进行传参，主要用于高阶组件和组件库的应用

常见命令

1. vue add element    

2. npm i axios -S