久激自拍,久久视频久久超砸

準(zhǔn)備工作
- 搭建vite
- 安裝Windi CSS 或者 Tailwind

不使用插槽

<!--App.vue 父組件-->
<template>
 <div class="container flex flex-row justify-center">
   <!--將title和listData數(shù)據(jù)傳給子組件,下面展示了兩種使用組件方式-->
   <Category title="動(dòng)漫" :listData="cartoons"></Category>
   <Category title="游戲" :listData="games"/>
   <Category title="電影" :listData="films"/>
 </div>
</template>

<script>
import Category from './components/category.vue'
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return{
      cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
      games:['4399','斗地主','王者榮耀','和平精英'],
      films:['《你好，李煥英》','《夏洛特?zé)_》','《你的名字》','《蜘蛛俠》']
    }
  }
}
</script>

<style scoped>
.footer a {
  @apply ml-10;
}
.container {
  background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
  @apply h-200 bg-auto bg-cover bg-contain;
}
</style>

<!-- category 組件子-->
<template>
 <div>
     <h3>{{ title }}分類(lèi)</h3>
      <ul>
        <li v-for="(item,index) in listData" :key="index">{{item}}</li>
      </ul>
 </div>
</template>

<script>
export default {
  name:'Category',
  //props接收傳過(guò)來(lái)的數(shù)據(jù)
  props:['listData','title']
}
</script>

<style scoped>
div{
  @apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
  @apply text-center bg-yellow-600 text-xl;
}
</style>

默認(rèn)插槽

<!--App.vue 父組件-->
<template>
 <div class="container flex flex-row justify-center">
   <!--將title和listData數(shù)據(jù)傳給子組件,下面展示了兩種使用組件方式-->
   <Category title="動(dòng)漫" :listData="cartoons">
     <img class="w-60" src="https://img2.baidu.com/it/u=4117582627,679171248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
   </Category>
   <Category title="游戲" >
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
   </Category>
   <Category title="電影">
     <video class="w-60" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
   </Category>
 </div>
</template>

<script>
import Category from './components/category.vue'
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return{
      cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
      games:['4399','斗地主','王者榮耀','和平精英'],
      films:['《你好，李煥英》','《夏洛特?zé)_》','《你的名字》','《蜘蛛俠》']
    }
  }
}
</script>

<style scoped>
.footer a {
  @apply ml-10;
}
.container {
  background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
  @apply h-200 bg-auto bg-cover bg-contain;
}
</style>

<!-- category 組件子-->
<template>
 <div>
    <h3>{{ title }}分類(lèi)</h3>
    <!-- 定義一個(gè)插槽，等著組件的使用者(<Category>填充內(nèi)容</Category>)進(jìn)行填充 -->
    <slot>這里可以填寫(xiě)默認(rèn)值，當(dāng)組件使用者沒(méi)有進(jìn)行填充時(shí)，會(huì)顯示</slot>      
 </div>
</template>

<script>
export default {
  name:'Category',
  //props接收傳過(guò)來(lái)的數(shù)據(jù)
  props:['listData','title']
}
</script>

<style scoped>
div{
  @apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
  @apply text-center bg-yellow-600 text-xl;
}
</style>

具名插槽

<!--App.vue 父組件-->
<template>
 <div class="container flex flex-row justify-center">
    <!--將title和listData數(shù)據(jù)傳給子組件,下面展示了兩種使用組件方式-->
    <Category title="動(dòng)漫" :listData="cartoons">
    <!--使用具名插槽，需要用template標(biāo)簽包裹著，并使用v-slot:name -->
     <template v-slot:center>
        <img class="w-60" src="https://img2.baidu.com/it/u=4117582627,679171248&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="">
     </template>
     <template v-slot:foot>
        <a  >更多照片</a>
     </template>  
   </Category>
    <Category title="游戲" >
      <template v-slot:center>
          <ul>
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
          </ul>
      </template>
       <template v-slot:foot>
          <div  class="footer">
            <a >手機(jī)游戲</a>
            <a >電腦游戲</a>
          </div>
      </template>
    </Category>
   <Category title="電影">
     <template v-slot:center>
        <video class="w-60" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
     </template>
      <template v-slot:foot>
        <div class="footer">
            <a >經(jīng)典</a>
            <a >熱門(mén)</a>
            <a >推薦</a>
       </div>
      </template>
   </Category>
 </div>
</template>

<script>
import Category from './components/category.vue'
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return{
      //cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
      games:['4399','斗地主','王者榮耀','和平精英'],
      //films:['《你好，李煥英》','《夏洛特?zé)_》','《你的名字》','《蜘蛛俠》']
    }
  }
}
</script>

<style scoped>
.footer a {
  @apply ml-10;
}
.container {
  background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
  @apply h-200 bg-auto bg-cover bg-contain;
}
</style>

<!-- category 組件子-->
<template>
 <div>
    <h3>{{ title }}分類(lèi)</h3>
    <!-- 定義一個(gè)插槽，等著組件的使用者(<Category>填充內(nèi)容</Category>)進(jìn)行填充 -->
    <slot name="center">這里可以填寫(xiě)默認(rèn)值，當(dāng)組件使用者沒(méi)有進(jìn)行填充時(shí)，center會(huì)顯示</slot>
    <slot name="foot">這里可以填寫(xiě)默認(rèn)值，當(dāng)組件使用者沒(méi)有進(jìn)行填充時(shí)，foot會(huì)顯示</slot>    
 </div>
</template>

<script>
export default {
  name:'Category',
  //props接收傳過(guò)來(lái)的數(shù)據(jù)
  props:['listData','title']
}
</script>

<style scoped>
div{
  @apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
  @apply text-center bg-yellow-600 text-xl;
}
</style>

作用域插槽

<!--App.vue 父組件-->
<template>
 <div class="container flex flex-row justify-center">
  <!--將title和listData數(shù)據(jù)傳給子組件,下面展示了兩種使用組件方式-->
    <Category title="動(dòng)漫" :listData="cartoons">
      <!--使用具名插槽，需要用template標(biāo)簽包裹著，并使用v-slot:name -->
      <template v-slot:default="obj">
        <ul>
          <li v-for="(g, index) in obj.cartoons" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戲">
      <!-- 默認(rèn)插槽的 slot 簡(jiǎn)便寫(xiě)法 -->
      <template v-slot="obj">
        <ol>
          <li v-for="(g, index) in obj.games" :key="index">{{ g }}</li>
        </ol>
        <ul>
          <li v-for="(g, index) in obj.msg" :key="index">????插槽{{ g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="電影">
      <!-- 解構(gòu)插槽 -->
      <template v-slot="{ films, msg }">
        <div>
          <h4 v-for="(g, index) in films" :key="index">{{ g }}</h4>
          <h3 v-for="(g, index) in msg" :key="index">????插槽{{ g }}</h3>
        </div>
      </template>
    </Category>
 </div>
</template>

<script>
import Category from './components/category.vue'
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return{
      //cartoons:['海賊王','名偵探柯南','一人之下','未聞花名'],
      //games:['4399','斗地主','王者榮耀','和平精英'],
      //films:['《你好，李煥英》','《夏洛特?zé)_》','《你的名字》','《蜘蛛俠》']
    }
  }
}
</script>

<style scoped>
.footer a {
  @apply ml-10;
}
.container {
  background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
  @apply h-200 bg-auto bg-cover bg-contain;
}
</style>

<!-- category 組件子-->
<template>
 <div>
    <h3>{{ title }}分類(lèi)</h3>
    <!-- 定義一個(gè)插槽，等著組件的使用者(<Category>填充內(nèi)容</Category>)進(jìn)行填充 -->
    <slot :cartoons="cartoons">默認(rèn)插槽</slot>
    <slot :games="games">默認(rèn)插槽</slot>
    <slot :films="films">默認(rèn)插槽</slot>
    <slot :msg="msg"></slot>  
 </div>
</template>

<script>
export default {
  name:'Category',
  //props接收傳過(guò)來(lái)的數(shù)據(jù)
  props: ["listData", "title"],
  data(){
    return{
      cartoons: ["海賊王", "名偵探柯南", "一人之下", "未聞花名"],
      games: ["4399", "斗地主", "王者榮耀", "和平精英"],
      films: [
        "《你好，李煥英》",
        "《夏洛特?zé)_》",
        "《你的名字》",
        "《蜘蛛俠》",
      ],
      msg: ["，??作用域", "芭比"],
    }
  }
}
</script>

<style scoped>
div{
  @apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
  @apply text-center bg-yellow-600 text-xl;
}
</style>

動(dòng)態(tài)插槽名

<!--App.vue 父組件-->
<template>
  <div class="container flex flex-col justify-center items-center">
    <Category title="游戲">
      <!-- v-slot: 縮寫(xiě)法 # -->
      <template #[dynamicSlotName]="obj">
        <ol>
          <li v-for="(g, index) in obj.games" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <button @click="change">點(diǎn)這切換</button>
  </div>
</template>

<script>
import Category from "./components/category.vue";

export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      dynamicSlotName: "1",
    };
  },
  methods: {
    change() {
      if (this.dynamicSlotName == "1") {
        this.dynamicSlotName = "2";
      } else this.dynamicSlotName = "1";
    },
  },
};
</script>

<style scoped>
.footer a {
  @apply ml-10;
}
.container {
  background-image: url(https://cdn.jsdelivr.net/gh/ashunun/netbian/bian/1.jpg);
  @apply h-200 bg-auto bg-cover bg-contain;
}
button {
  @apply rounded-lg p-2 w-30 cursor-pointer bg-gradient-to-r from-violet-500 to-fuchsia-500 hover:from-violet-700 text-white shadow-lg shadow-indigo-700/80 text-center;
  border: none;
}
</style>

<!-- category 組件子-->
<template>
 <div>
    <h3>{{ title }}分類(lèi)</h3>
    <!-- 具名+作用域 插槽 -->
    <!--兩個(gè)插槽，傳遞的數(shù)據(jù)不一樣。-->
    <slot name="1" :games="games1"></slot>
    <slot name="2" :games="games2"></slot> 
 </div>
</template>

<script>
export default {
  name:'Category',
  //props接收傳過(guò)來(lái)的數(shù)據(jù)
  props: ["listData", "title"],
  data(){
    return{
      games1:['4399','斗地主','王者榮耀','和平精英'],
      games2:['我的世界','cf','LOL','cs']
    }
  }
}
</script>

<style scoped>
div{
  @apply bg-yellow-200 m-5 w-60 h-100 rounded-lg shadow-lg shadow-yellow-700/50;
}
h3{
  @apply text-center bg-yellow-600 text-xl;
}
</style>

和具名插槽的縮寫(xiě)

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫(xiě)，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #

<template #center>
</template>

完整代碼

代碼

推薦一個(gè)加速軟件——DivSidecar
意為為開(kāi)發(fā)者打輔助的邊車(chē)工具，通過(guò)本地代理的方式將https請(qǐng)求代理到一些國(guó)內(nèi)的加速通道上
1、GitHub打不開(kāi)，加速Github 很有用。
2、dns優(yōu)選（解決污染問(wèn)題）
3、Stack Overflow 加速
4、npm加速

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue中v-slot插槽詳解

Vue中v-slot插槽詳解

不使用插槽

默認(rèn)插槽

具名插槽

作用域插槽

動(dòng)態(tài)插槽名

和具名插槽的縮寫(xiě)

完整代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue中v-slot插槽詳解

不使用插槽

默認(rèn)插槽

具名插槽

作用域插槽

動(dòng)態(tài)插槽名

和具名插槽的縮寫(xiě)

完整代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av