AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

2024-03-06 76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

Vue CLI安装和使用

  1. 全局安装最新vue3
npm install @vue/cli -g
  1. 升级Vue CLI：
    如果是比较旧的版本，可以通过下面命令来升级
npm update @vue/cli -g

通过脚手架创建项目

vue create 01_product_demo

Vue3父子组件的通信

父传子

父组件

<template>
  <div>
    <div class="item" v-for="(item,index) in user_list" :key="index">
      <user-component :name="item.name" :age="item.age"></user-component>
    </div>
  </div>
</template>
<script>
  import UserComponent from './components/UserComponent'
  export default {
    components:{
      UserComponent
    },
    data(){
      return {
        user_list:[
          {name:'why',age:18},
          {name:'zhang',age:26},
        ]
      }
    }
  }
</script>
<style scoped>
</style>

子组件 UserComponent.vue

<template>
  <div>
    <div>名字：{{ name }}</div>
    <div>年龄：{{ age }}</div>
  </div>
</template>
<script>
  export default {
    props:{
      name:{
        type:String,
        default:''
      },
      age:{
        type:Number,
        default:0
      },
      // 对象类型
      friend:{
        type:Object,
        default:()=>({name:"james"})
      },
      // 数组类型
      hobbies:{
        type:Array,
        default:()=>['篮球','rap','唱跳']
      }
    }
  }
</script>
<style scoped>
</style>

子传父

父组件

<template>
  <div>
    <div>{{ counter }}</div>
    <JiaComponent @jia="jia"></JiaComponent> 
    <JianComponent @jian="jian"></JianComponent> 
    
  </div>
</template>
<script>
  import JiaComponent from './JiaComponent'
  import JianComponent from './JianComponent'
  export default {
    components:{
      JiaComponent,
      JianComponent
    },
    data(){
      return {
        counter:1
      }
    },
    methods:{
      jian:function(data){
        this.counter = this.counter - data;
      },
      jia:function(data){
        this.counter = this.counter + data;
      }
    }
  }
</script>
<style scoped>
</style>

**子组件1 JiaComponent.vue **

<template>
  <div>
    <div>
      <button @click="jia(1)">+1</button>
      <button @click="jia(5)">+5</button>
      <button @click="jia(10)">+10</button>
    </div>
  </div>
</template>
<script>
  export default {
    emits:['jia'], // 使用的时候会有提醒
    // emits:{
    //   // 验证
    //   jia:function(data){
    //     if(data <= 5){
    //       return true
    //     }
    //     return false
    //   }
    // },
    methods:{
      jia(data){
        this.$emit('jia',data);
      }
    }
  }
</script>
<style scoped>
</style>

** 子组件2 JianComponent.vue **

<template>
  <div>
    <div>
      <button @click="jian(1)">-1</button>
      <button @click="jian(5)">-5</button>
      <button @click="jian(10)">-10</button>
    </div>
  </div>
</template>
<script>
  export default {
    methods:{
      jian(data){
        this.$emit("jian",data);
      }
    }
  }
</script>
<style scoped>
</style>

插槽基本使用

父组件

<template>
  <div>
    <TitleComponents title="标题" desc="描述描述描述描述描述"></TitleComponents> 
    <!-- 1.插入button -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <button>按钮</button>
    </TitleComponents>
    <!-- 2.插入a链接 -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <a href="https://www.baidu.com">百度一下</a>
    </TitleComponents>
    <!-- 3.插入image -->
    <TitleComponents title="标题" desc="描述描述描述描述描述">
      <img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F34fae6cd7b899e512cb62692d10fdf3ec9950db4.jpeg%40f_auto%3Ftoken%3D8ce9dbae74003846c318068640c41183&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1698944400&t=e504855a1a7b815dfa76940bb9ac2a07" />
    </TitleComponents>
    <!-- 4. 默认显示 -->
    <TitleComponents title="标题" desc="描述描述描述描述描述"></TitleComponents> 
  </div>
</template>
<script>
import TitleComponents from './TitleComponents.vue'
  export default {
    components:{
      TitleComponents
    }
  }
</script>
<style scoped>
</style>

子组件 TitleComponents.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>{{ desc }}</div>
    <slot>
      <div>这里是默认内容</div>
    </slot>
  </div>
</template>
<script>
  export default {
    props:{
      title:{
        type:String,
        default:'默认标题'
      },
      desc:{
        type:String,
        default:''
      }
    }
  }
</script>
<style scoped>
</style>

插槽_具名插槽

父组件

<template>
  <div>
    <NavComponent>
      <template v-slot:left>
        <button>返回</button>
      </template>
      <template v-slot:center>
        首页
      </template>
      <template v-slot:right>
        <a href="#" >登录</a>
      </template>
    </NavComponent>
    <NavComponent>
      <template v-slot:[position]>
        <button>返回</button>
      </template>
    </NavComponent>
    <button @click="position = 'left'">左边</button>
    <button @click="position = 'center'">中间</button>
    <button @click="position = 'right'">右边</button>
  </div>
</template>
<script>
  import NavComponent from './NavComponent.vue';
  export default {
    components:{
      NavComponent
    },
    data(){
      return {
        position:'left'
      }
    }
  }
</script>
<style scoped>
</style>

**子组件 NavComponent.vue **

<template>
  <div>
    <div style="display: flex;flex-direction: row;height: 100px;">
      <div class="left"> 
        <slot name="left">左边</slot>   
      </div>
      <div class="center">  
        <slot name="center">中间</slot> 
      </div>
      <div class="right">
        <slot name="right">右边</slot>
      </div>
    </div>
  </div>
</template>
<script>
  
  export default {
  }
</script>
<style scoped>
  .left{
    width:30%;
    background-color: aqua;
  }
  .center{
    width: 40%;
    background-color: bisque;
  }
  .right{
    width: 30%;
    background-color: blueviolet;
  }
</style>

组件插槽_作用域插槽

父组件

<template>
  <div>
    <NavComponet :nav_list="nav_list">
      <template v-slot:default="porps_val">
        {{ porps_val.item }}---{{ porps_val.abc }}
      </template>
    </NavComponet>
    <!--  -->
    <hr>
    <NavComponet :nav_list="nav_list">
      <template #default="porps_val">
        <a href="#">{{ porps_val.item }}---{{ porps_val.abc }}</a>
      </template>
    </NavComponet>
  </div>
</template>
<script>
  import NavComponet from './NavComponet.vue'
  export default {
    components:{
      NavComponet
    },
    data(){
      return {
        nav_list:[
          {id:1,title:'标题1'},
          {id:1,title:'标题2'},
          {id:1,title:'标题3'},
        ]
      }
    }
  }
</script>
<style scoped>
</style>

子组件 NavComponet.vue

<template>
  <div>
    <div class="nav">
      <div v-for="(item,index) in nav_list" :key="index" class="nav_item">
        <div>
          {{ item.title }}
        </div>
        <slot :item="item.title" abc="cba">
          <div>{{ item.title }}</div>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      nav_list:{
        type:Array,
        default:()=>{
          return [
          {id:1,title:'衣服'},
          {id:1,title:'食物'},
          {id:1,title:'玩具'},
        ];
        }
      }
    },
    data(){
      return {
      }
    }
  }
</script>
<style scoped>
  .nav{
    display: flex;
    flex-direction: row;
  }
  .nav_item{
    flex:1;
  }
</style>

Provide和Inject

App.vue

<template>
  <div class="app">
    <home-component></home-component>
    <h2>app:{{ message }}</h2>
    <button @click="message = 'hello world'">改变message</button>
  </div>
</template>
 
<script>
  import { computed  } from 'vue'
  import HomeComponent from './HomeComponent.vue'
  export default {
     components:{
      HomeComponent
     },
     data(){
      return {
        message:"Hello App"
      }
     },
     provide(){
      return {
        name:"why",
        age:18,
        message:computed(()=>{
          return this.message
        }) 
      }
     }
  }
</script>
<style scoped>
</style>

**子组件 HomeBanner.vue **

<template>
  <div>
    <h2>HomeBanner:{{ name }} - {{ age }} - {{ message }}</h2>
  </div>
</template>
 
<script>
  export default {
    inject:["name","age","message"]
  }
</script>
<style scoped>
</style>

孙组件 HomeComponent.vue

<template>
  <div>
    <home-banner></home-banner>
  </div>
</template>
<script>
  import HomeBanner from './HomeBanner.vue';
  export default {
    components:{
      HomeBanner
    },
    data(){
      return {
        
      }
    }
  }
</script>
<style scoped>
</style>

事件总线的使用

App.vue

<template>
  <div class="app">
    <!-- 安装状态管理库 npm install hy-event-store -->
    <!-- Mitt事件状态（略） -->
    <HomeCon></HomeCon>  
    <h2>{{ message }}</h2>
    <button @click="show_cate_gory = !show_cate_gory">是否显示cate_gory</button>
    <cate-gory v-if="show_cate_gory"></cate-gory>
  </div>
</template>
 
<script>
  import eventBus from './utils/event.bus';
  import HomeCon from './HomeCon.vue'
  import CateGory from './CateGory.vue'
  export default {
     components:{
      HomeCon,
      CateGory
     },
     data(){
      return {
        message:'hello vue',
        show_cate_gory:true
      }
     },
     created(){
      // 事件监听
      eventBus.on("whyEvent",(name,age,height)=>{
        console.log("whyEvent事件在app中的监听",name,age,height)
        this.message = `name:${name},age:${age},height:${height}`
      })
     }
  }
</script>
<style scoped>
</style>

** 子组件 CateGory.vue**

<template>
  <div>
    <h2>Category</h2>
  </div>
</template>
<script>
  import eventBus from './utils/event.bus.js'
  export default {
    methods:{
      whyEventHandler(){
        console.log("whyEvent在category中监听")
      }
    },
    created(){
      eventBus.on("whyEvent",this.whyEventHandler)
    },
    unmounted(){
      console.log("category umounted")
      eventBus.off("whyEvent",this.whyEventHandler)
    }
  }
</script>
<style scoped>
</style>

**子组件 HomeBanner.vue **

<template>
  <div>
    <button @click="bannerBtnClick">banner按钮</button>
  </div>
</template>
 
<script>
  import eventBus  from './utils/event.bus';
  export default {
    methods:{
      bannerBtnClick(){
        console.log("bannerBtnClick")
        eventBus.emit("whyEvent","why",18,1.88)
      }
    }
  }
</script>
<style scoped>
</style>

** 子组件 HomeCon.vue**

<template>
  <div>
    <home-banner></home-banner>
  </div>
</template>
<script>
  import HomeBanner from './HomeBanner.vue';
  export default {
    components:{
      HomeBanner
    },
    data(){
      return {
        
      }
    }
  }
</script>
<style scoped>
</style>

事件总线 event.bus.js

import { HYEventBus } from "hy-event-store"
const eventBus = new HYEventBus()
export default eventBus

生命周期函数演练

App.vue

<template>
  <div>
    <h2>{{ message }}---{{ counter }}</h2>
    <button @click="message = 'hello world'" >修改message</button>
    <button @click="counter++">+1</button>
    <button @click="showHome = !showHome">隐藏home</button>
    <home-com v-if="showHome"></home-com>
  </div>
</template>
<script>
  import HomeCom from "./HomeCom.vue"
  export default {
    components:{
      HomeCom
    },
    data(){
      return {
        message:'hello vue',
        counter:1,
        showHome:true
      }
    },
    // 1.组件创建之前
    beforeCreate(){
      console.log("beforeCreate")
    },
    // 2.组件被创建完成
    created(){
      console.log("组件被创建完成：created")
      console.log("1.发送网络请求，请求数据")
      console.log("2.监听eventbus事件")
      console.log("3.监听watch数据")
    },
    // 3. 组件template准备被挂在
    beforeMount(){
      console.log("beforeMount")
    },
    // 4.组件template被挂载，虚拟dom=》真实dom
    mounted(){
      console.log("mounted")
      console.log("1.获取DOM")
      console.log("2.使用DOM")
    },
    // 5.数据发生改变
    // 5.1 准备更新DOM
    beforeUpdate(){
      console.log("beforeUpdate")
    },
    // 5.2 更新DOM
    updated(){
      console.log("updated")
    },
    // 6.卸载Vnode-》DOM原生
    // 6.1 卸载之前
    beforeUnmount(){
      console.log("beforeUnmount")
    },
    // 6.2 DOM元素被卸载完成
    unmounted(){
      console.log("unmounted")
    }
  }
</script>
<style scoped>
</style>

子组件 HomeCom.vue

<template>
  <div>
    Home
  </div>
</template>
<script>
  export default {
    unmounted(){
      console.log("unmounted home")
    },
    beforeUnmount(){
      console.log("beforeUnmout home")
    }
  }
</script>
<style scoped>
</style>

ref获取元素组件

App.vue

<template>
  <div>
    <h2 ref="title" class="title" :style="{color:titleColor}">{{ message }}</h2>
    <button ref="btn" @click="changeTitle">修改title</button>
    
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
    <BannerCom ref="banner"></BannerCom>
  
  </div>
</template>
<script>
 import BannerCom from './BannerCom.vue';
  export default {
    components:{
      BannerCom
    },
      data(){
        return {
          message:"hello world",
          titleColor:"red"
        }
      },
      methods:{
        changeTitle(){
          // 1.不要主动去获取DOM，并且修改DOM内容
          this.message = "你好啊，世界"
          this.titleColor = "blue"
          // 2.获取h2/button元素
          console.log(this.$refs.title)
          console.log(this.$refs.btn)
          // 3.获取banner组件：组件实例
          console.log(this.$refs.banner)
          // 3.1在父组件中可以主动的调用子组件的方法
          this.$refs.banner.bannerClick()
          // 3.2 获取banner组件实例，获取banner中的元素
          console.log(this.$refs.banner.$el)
          // 3.3 如果banner template是多个根，拿到的是一个node节点
          console.log(this.$refs.banner.$el.nextElementSibling)
          // 第二个node节点
          console.log(this.$refs.banner.$el.previousElementSibling)
        
          // 4.组件实例了解
          console.log(this.$parent); // 父组件
          console.log(this.$root); //根组件
        }
      }
  } 
</script>
<style scoped>
</style>

**子组件 BannerCom.vue **

<template>
  <div class="banner">
    Banner
  </div>
  <div class="banner2"></div>
</template>
<script>
  export default {
    methods:{
      bannerClick(){
        console.log('bannerClick')
      }
    }
  }
</script>
<style scoped>
</style>

内置组件的使用

App.vue

<template>
  <div>
    <button v-for="(item,index) in tab_arr" :style="default_tab == item ? 'color:red;' : ''" :key="index" @click="show_tab(item)">
      {{ item }}
    </button>
    <!-- 第一中方法 -->
    <!-- <div v-if="default_tab=='home'">
      <HomeCom></HomeCom>
    </div>
    <div v-if="default_tab=='about'">
      <AboutCom></AboutCom>
    </div>
    <div v-if="default_tab=='category'">
      <CategoryCom></CategoryCom>
    </div> -->
    
    <!-- 第二种方式 -->
    <component name="kb" age="20" @homebtn="homebtn" :is="default_tab"></component>
  </div>
</template>
<script>
 import HomeCom from './views/HomeCom.vue'
 import AboutCom from './views/AboutCom.vue'
 import CategoryCom from './views/CategoryCom.vue'
  export default {
     components:{
      HomeCom,
      AboutCom,
      CategoryCom
     },
     data(){
      return {
        tab_arr:['HomeCom','AboutCom','CategoryCom'],
        default_tab:'HomeCom'
      }
    },
    methods:{
      show_tab(item){
        this.default_tab = item
      },
      homebtn(eve){
        console.log('homebtn',eve)
      }
    }
  }
</script>
<style scoped>
</style>

** 子组件 AboutCom.vue**

<template>
  <div>
    about组件
  </div>
</template>
<script>
  export default {
  }
</script>
<style scoped>
</style>

子组件 CategoryCom.vue

<template>
  <div>
    category组件
  </div>
</template>
<script>
  export default {
  }
</script>
<style scoped>
</style>

子组件 HomeCom.vue

<template>
  <div>
    
    home组件{{ name }} --- {{ age }}
    <button @click="homebtn">homebtn</button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        
      }
    },
    props:{
      name:{
        type:String,
        default:'why'
      },
      age:{
        type:String,
        default:'18'
      }
    },
    emits:['homebtn'],
    methods:{
      homebtn(){
        this.$emit('homebtn','home')
      }
    }
  }
</script>
<style scoped>
</style>

Keep-Alive的使用-分包

App.vue

<template>
  <div>
    <button v-for="(item,index) in tab_arr" :style="default_tab == item ? 'color:red;' : ''" :key="index" @click="show_tab(item)">
      {{ item }}
    </button>
    <!-- 第一中方法 -->
    <!-- <div v-if="default_tab=='home'">
      <HomeCom></HomeCom>
    </div>
    <div v-if="default_tab=='about'">
      <AboutCom></AboutCom>
    </div>
    <div v-if="default_tab=='category'">
      <CategoryCom></CategoryCom>
    </div> -->
    
    <!-- 第二种方式 -->
    <KeepAlive include="HomeCom,AboutCom">
      <component :is="default_tab"></component>
    </KeepAlive>
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
 import HomeCom from './views/HomeCom.vue'
 import AboutCom from './views/AboutCom.vue'
//  import CategoryCom from './views/CategoryCom.vue'
 const AsyncCategory = defineAsyncComponent(()=>import("./views/CategoryCom.vue"))
  export default {
     components:{
      HomeCom,
      AboutCom,
      CategoryCom:AsyncCategory
     },
     data(){
      return {
        tab_arr:['HomeCom','AboutCom','CategoryCom'],
        default_tab:'HomeCom'
      }
    },
    methods:{
      show_tab(item){
        this.default_tab = item
      },
      homebtn(eve){
        console.log('homebtn',eve)
      }
    }
  }
</script>
<style scoped>
</style>

子组件 AboutCom.vue

<template>
  <div>
    about组件
  </div>
</template>
<script>
  export default {
    name:"AboutCom",
    created(){
      console.log('about created')
    },
    unmounted(){
      console.log('about unmounted')
    },
  }
</script>
<style scoped>
</style>

**子组件 CategoryCom.vue **

<template>
  <div>
    category组件
  </div>
</template>
<script>
  export default {
    created(){
      console.log('category created')
    },
    unmounted(){
      console.log('category unmounted')
    },
  }
</script>
<style scoped>
</style>

子组件 HomeCom.vue

<template>
  <div>
    home组件
    <div>
      计数：{{ counter }}
    </div>
    <button @click="jia">加1</button>
  </div>
</template>
<script>
  export default {
    name:"HomeCom",
    data(){
      return {
        counter:0
      }
    },
    created(){
      console.log('home created')
    },
    unmounted(){
      console.log('home unmounted')
    },
    // 对于保持keep-alive组件，监听有没有进行切换
    // keep-alive组件进入活跃状态
    activated(){
      console.log('home activated')
    },
    deactivated(){
      console.log('home deactivated')
    },  
    methods:{
      jia:function(){
        this.counter++;
      }
    }
  }
</script>
<style scoped>
</style>

组件的v-model

App.vue

<template>
  <div class="app">
    <!-- 1.input v-model -->
    <!-- <input type="text" v-model="message"> -->
    <!-- <input type="text" :value="message" @input="message = $event.target.value"> -->
    <!-- <CounterCom :modelValue="appCounter" @update:modelValue="appCounter = $event"></CounterCom> -->
    <!-- <CounterCom v-model="appCounter"></CounterCom> -->
    <CounterCom2 v-model:counter="appCounter" v-model:why="why"></CounterCom2>
  </div>
</template>
<script>
  import CounterCom2 from './CounterCom2.vue'
  export default {
    components:{
      CounterCom2
    },
    data(){
      return {
        message:'hello',
        appCounter:"100",
        why:'coderwhy'
      }
    }
  }
</script>
<style scoped>
</style>

**子组件 CounterCom.vue **

<template>
  <div>
    counter
    <div>
      modelValue:{{ modelValue }}
    </div>
    <button @click="changeCounter">修改counter</button>
  </div>
</template>
<script>
  export default {
    props:{
      modelValue:{
        type:String,
        default:''
      }
    },
    emits:["update:modelValue"],
    methods:{
      changeCounter(){
        this.$emit("update:modelValue",'999999')
      }
    }
  }
</script>
<style scoped>
</style>

子组件 CounterCom2.vue

<template>
  <div>
    <div>
      counter:{{ counter }}
    </div>
    <button @click="changeCounter">修改counter</button>
    <div>
      why:{{ why }}
    </div>
    <button @click="changeWhy">修改why的值</button>
  </div>
</template>
<script>
  export default {
    props:{
      counter:{
        type:String,
        default:''
      },
      why:{
        type:String,
        default:''
      }
    },
    emits:["update:counter","update:why"],
    methods:{
      changeCounter(){ 
        this.$emit("update:counter",'999999')
      },
      changeWhy(){
        this.$emit("update:why",'kobi')
      }
    }
  }
</script>
<style scoped>
</style>

组件的混入Mixin

message-mixin.js

export default {
  data(){
    return {
      message:"Hello World"
    }
  },
  created(){
    console.log("message:",this.message)
  }
}

**App.vue **

<template>
  <div>
    <HomeCon></HomeCon>
    <AboutCon></AboutCon>
    <CatetoryCon></CatetoryCon>
  </div>
</template>
<script>
  import HomeCon from './views/HomeCon.vue'
  import AboutCon from './views/AboutCon.vue'
  import CatetoryCon from './views/CatetoryCon.vue'
  export default {
    components:{
      HomeCon,
      AboutCon,
      CatetoryCon
    }
  }
</script>
<style scoped>
</style>

子组件 AboutCon.vue

<template>
  <div>
    <h2>AboutCon组件</h2>
  </div>
</template>
<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>
<style scoped>
</style>

子组件 CatetoryCon.vue

<template>
  <div>
    <h2>CatetoryCon组件</h2>
  </div>
</template>
<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>
<style scoped>
</style>

子组件 HomeCon.vue

<template>
  <div>
    <h2>HomeCon组件</h2>
  </div>
</template>
<script>
import messageMixin from  '../mixins/message-mixin'
  export default {
    mixins:[messageMixin]
  }
</script>
<style scoped>
</style>

感谢观看，我们下次再见

文章标签：
API
JavaScript
关键词：
API options
通信API
API组件
vue3 API
API vue3
2019ab
目录
相关文章
喜欢猪猪
|
3月前
|
人工智能 Java API
ChatClient：探索与AI模型通信的Fluent API
【11月更文挑战第22天】随着人工智能（AI）技术的飞速发展，越来越多的应用场景开始融入AI技术以提升用户体验和系统效率。在Java开发中，与AI模型通信成为了一个重要而常见的需求。为了满足这一需求，Spring AI引入了ChatClient，一个提供流畅API（Fluent API）的客户端，用于与各种AI模型进行通信。本文将深入探讨ChatClient的底层原理、业务场景、概念、功能点，并通过Java代码示例展示如何使用Fluent API与AI模型进行通信。
喜欢猪猪
87 8
html的七十二变
|
3月前
|
前端开发 JavaScript API
探究 React Hooks：如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法，通过全新API优化组件逻辑复用和状态管理，提升开发效率和代码可维护性。
html的七十二变
75 2
chnjames
|
4月前
|
缓存 JavaScript 前端开发
深入理解 Vue 3 的 Composition API 与新特性
本文详细探讨了 Vue 3 中的 Composition API，包括 setup 函数的使用、响应式数据管理（ref、reactive、toRefs 和 toRef）、侦听器（watch 和 watchEffect）以及计算属性（computed）。我们还介绍了自定义 Hooks 的创建与使用，分析了 Vue 2 与 Vue 3 在响应式系统上的重要区别，并概述了组件生命周期钩子、Fragments、Teleport 和 Suspense 等新特性。通过这些内容，读者将能更深入地理解 Vue 3 的设计理念及其在构建现代前端应用中的优势。
chnjames
81 1
深入理解 Vue 3 的 Composition API 与新特性
土木林森
|
3月前
|
JavaScript 前端开发 API
Vue 3新特性详解：Composition API的威力
【10月更文挑战第25天】Vue 3 引入的 Composition API 是一组用于组织和复用组件逻辑的新 API。相比 Options API，它提供了更灵活的结构，便于逻辑复用和代码组织，特别适合复杂组件。本文将探讨 Composition API 的优势，并通过示例代码展示其基本用法，帮助开发者更好地理解和应用这一强大工具。
土木林森
57 2
时光在流逝
|
3月前
|
JavaScript 前端开发 API
探索组合式API与Options API的对比及最佳实践
探索组合式API与Options API的对比及最佳实践
时光在流逝
62 0
喜欢猪猪
|
3月前
|
人工智能 Java API
Spring AI Fluent API：与AI模型通信的流畅体验
【11月更文挑战第24天】随着人工智能（AI）技术的飞速发展，越来越多的应用场景开始融入AI技术以提升用户体验和系统效率。在Java开发中，与AI模型通信成为了一个重要而常见的需求。为了满足这一需求，Spring AI引入了ChatClient，一个提供流畅API（Fluent API）的客户端，用于与各种AI模型进行通信。本文将深入探讨ChatClient的底层原理、业务场景、概念、功能点，并通过Java代码示例展示如何使用Fluent API与AI模型进行通信。
喜欢猪猪
73 0
众所周知
|
4月前
|
缓存 JavaScript API
Vue 3的全新Reactivity API：解锁响应式编程的力量
Vue 3引入了基于Proxy的全新响应式系统，提升了性能并带来了更强大的API。本文通过示例详细介绍了`reactive`、`ref`、`computed`、`watch`等核心API的使用方法，帮助开发者深入理解Vue 3的响应式编程。无论你是初学者还是资深开发者，都能从中受益，构建更高效的应用程序。
众所周知
65 1
刘大猫.
|
4月前
|
API
《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
刘大猫.
39 0
刘大猫.
|
4月前
|
JavaScript 前端开发 API
《vue3第六章》其他，包含：全局API的转移、其他改变
《vue3第六章》其他，包含：全局API的转移、其他改变
刘大猫.
31 0
winx_19970108018
|
5天前
|
API PHP 开发者
速卖通商品详情接口（速卖通API系列）
速卖通（AliExpress）是阿里巴巴旗下的跨境电商平台，提供丰富的商品数据。通过速卖通开放平台（AliExpress Open API），开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret，使用PHP等语言调用API。该接口支持多种请求参数和返回字段，方便集成到各类电商应用中。
winx_19970108018
20 5

热门文章

最新文章

  • 1
    快速调用 Deepseek API！【超详细教程】
  • 2
    如何调用 DeepSeek-R1 API ？图文教程
  • 3
    百聆：集成Deepseek API及语音技术的开源AI语音对话助手，实时交互延迟低至800ms
  • 4
    Flink CDC YAML：面向数据集成的 API 设计
  • 5
    Python 中调用 DeepSeek-R1 API的方法介绍，图文教程
  • 6
    DeepSeek-Free-API：DeepSeekV3免费的api接口，需要使用api方式的同学可以参考一下这个项目，可以收藏起来试一下
  • 7
    深度解析淘宝商品详情API接口：解锁电商数据新维度，驱动业务增长
  • 8
    京东 API 接口调用失败的常见原因及解决方法
  • 9
    小红书笔记详情 API 接口的开发、应用与收益
  • 10
    AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
  • 1
    满血 DeepSeek 免费用？附联网搜索教程！暨第三方 API 平台全面横评
    244
  • 2
    亚马逊商品列表数据接口（亚马逊 API 系列）
    33
  • 3
    亚马逊商品详情接口（亚马逊 API 系列）
    44
  • 4
    DeepClaude：结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台，支持 API 调用和零延迟的即时响应
    122
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 6
    亚马逊商品详情API接口的使用方法和示例返回
    11
  • 7
    咨询关于大模型的API接口，多用户调用的问题
    33
  • 8
    lazada商品详情接口 （lazada API系列）
    48
  • 9
    Temu商品列表数据接口（Temu API系列）
    96
  • 10
    AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
    103

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型