vue练手小项目

axios

用于网络请求的库

axios返回的是promise对象,从接口服务器接收的是data,而axios收到的是六个属性,axios会把接口数据加一层壳

promise 前面用await 有方法包含了这个await 就在方法名面前加async

created() {
​
             this.p()
         },
         methods: {
             async p() {
                 const i = await axios.get("https://www.escook.cn/api/cart")
                 console.log(i)
             }
         },

1. 在app中导入axios

2. 在methods定义axios方法,在created使用这个方法(this指向的是本实例)

3. 样例

    async initCartList() {
         // 调用 axios 的 get 方法，请求列表数据
        const {data:result}=await axios.get("https://www.escook.cn/api/cart");
        console.log(result);
         // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
       },

   这个data的数据是网站里面的数据包括了(status list message)

   1. 之后存入data(){return{}}之中

   ps:只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中

   样例:

   data() {
       return {
         list: [],
       };
     },
     methods: {
       // 封装请求列表数据的方法
       async initCartList() {
         // 调用 axios 的 get 方法，请求列表数据
         const { data: result } = await axios.get(
           "https://www.escook.cn/api/cart"
         );
         //  console.log(result);
         this.list = result.list;
   ​
         // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
       },

   1. 组件名字建议首个字母用大写

父传子

1. 在组件中,v-for必须结合:key使用.

2. 基本上数组的一个字典就被一个for复制的一个组件使用,直接传输一个一个数据,不要传送对象过去object

3. 书写步骤: 先在子组件写props,之后写入目的地.然后在父组件传入值.

4. 

    

5. required是必填选项

   

    

    

6. .list-move(){} //在元素插入和删除的时候进行,平滑过渡

   _.shufflr()对列表进行洗牌

7. 子传父

   onclick 和 click :是点击事件；

   onchange 和 change：是改变事件；

   onchange和onclick都是js方法；

   @keyup.enter

   区别？

   onclick与onchange最大的区别就是onclick可以反复点击触发，但是onchange只有在改变了选中项才会触发事件，如果选中项不改变，则不会触发该事件

   数组some()可以终止

   数组.some(item=>{

   if(item.id ==e.id){

   item.value=e.value

       return true

   }

   })

   this.list.forEach(item>{})是用于循环遍历每一个里面的字典的,而some()是可以使用return truej进行停止

   reduce((sum,item) => {}, 0)第一个是一个函数,第二个是一个初始化值

   label与input

   <input

   type="checkbox"

   class="custom-control-input"

   :id="'cb1'+id"

   :checked="status"

   @change="change($event)"

   />

   <label class="custom-control-label" :for="'cb1'+id">

   </label>

   input的id与label的for是绑定在一起的

8. 字传父传送点击的id和value值

   every() 在判断的时候,初始值为false, 布尔值类型的如果不一样会返回false ,当判断的数据发生变化,every()会重新运行

   

    当点击图片和input时候发生错乱的时候,要注意label的for 和input 的id值

9. 计算价格

    count() {
         return this.list
           .filter((item) => {
             return item.goods_state;
           })
           .reduce((sum, item) => {
             return (sum += item.goods_price * item.goods_count);
           }, 0);
       },

   使用filter过滤在进行reduce方法(这个方法必须全部都是true值)

   之后父传子给footer

   计算衣服数量和品类(使用过滤器过滤)

   添加数量

10. 

    这个小组件放在goods组件里面,不是放在APP.vue

    最上面的组件传到最下面的组件需要一层层传递,也可以使用兄弟相传

    1.在组件文件夹里放一个eventBus.js,然后 export default new Vue()导出新建Vue实例对象

    2.在发送方使用导入

    

     

     3.在接收方使用

     因为share名字相同,所以数据一发送就接收到了

     

    $on("share",() => {

    //这里是一个箭头函数,拿到数据之后进行运算

    })

    conputed(){}是用来计算data(){return{}}的数据的

    

     这里面有两个组件,他们都是使用APP.vue的字典数据,所以他们应该使用一个id

    drop() {
          if (this.getcount > 1) {
            const val = { id: this.id, value: this.getcount - 1 };
            bus.$emit("share1", val);
          }
          if (this.getcount<1) {
              this.getcount=1
          }
        },

    这个组件会

     

    这个组件会进入负数,我们使用

    if (this.getcount<1) { ​ this.getcount=1 ​ }进行限制

    props的默认值到后面都会被覆盖掉,

    :check是input的选中框是否选中的方法

    在父子相传之中,接受的可以用get***()

    表示自己用$event.target