网页首页案例(使用框架:继上一篇博客结尾)

发布时间:2024年01月24日

新认识的快捷键

1.Ctrl+滚轮按住往下拖可以部分选中
在这里插入图片描述
.用同样的方法选中下面的111,然后用上图的选中后复制,粘贴在1的位置,就可以复制好了(用于代码较多,不方便一个一个改的时候)
在这里插入图片描述

2.在一列文字后面Ctrl滚轮线下拖,不选中,然后回车+粘贴(就可以把你想要粘贴的内容复制到111下面,注意:复制粘贴内容的时候也要用Ctrl滚轮的方法)
在这里插入图片描述

3.有时候看代码全部展开看太麻烦,可以用 Ctrl+k+0全部折叠,当你要展开时Ctrl+k+j就行了
在这里插入图片描述

Ctrl+d选中一个后按住这个快捷键往下拉,可以选中所有相同内同

1.先写好组件并导入App.vue

<template>
  <div class="App ">   
    <!-- 快捷链接 -->
    <XtxShortCut></XtxShortCut>
    <!-- 顶部导航 -->
    <XtxHeaderNav></XtxHeaderNav>
    <!-- 轮播区域 -->
    <XtxBanner></XtxBanner>
    <!-- 新鲜好物 -->
    <XtxNewGoods></XtxNewGoods>
    <!-- 热门品牌 -->
    <XtxHotBrand></XtxHotBrand>
    <!-- 最新专题 -->
    <XtxTopic></XtxTopic>
    <!-- 版权底部 -->
    <XtxFooter></XtxFooter>
  </div>
</template>

<script>
	import XtxShortCut from './components/XtxShortCut.vue'
	import XtxHeaderNav from './components/XtxHeaderNav.vue'
	import XtxBanner from './components/XtxBanner.vue'
	import XtxNewGoods from './components/XtxNewGoods.vue'
	import XtxHotBrand from './components/XtxHotBrand.vue'
	import XtxTopic from './components/XtxTopic.vue'
	import XtxFooter from './components/XtxFooter.vue'
	export default{
  		components:{
		    XtxShortCut:XtxShortCut,
		    XtxHeaderNav,
		    XtxBanner,
		    XtxNewGoods,
		    XtxHotBrand,
		    XtxTopic,
		    XtxFooter
  		}
	}
</script>
<style>

</style>

2.往组件中一个一个填内容

块块往template里面放,样式往style里面放,如果要轮播之类的,往script里面放

<template>
        <!-- 头部导航  -->
        <div class="header wrapper">
			<!-- 内容 -->
        </div>
</template>
  
<script>
export default{
  
}
</script>
  
<style>
  /* 头部导航 */
    .header {
    display: flex;
    margin: 22px auto;
    }
    .header .logo {
    margin-right: 40px;
    width: 200px;
    height: 88px;
    background-color: pink;
    }
    //这边就写个大概样子,不写全部了
</style>

3.整体静态完成后,发现某些小部分相同,其实可以分装成小组件

在这里插入图片描述

①写好小组件👇

<template>
<li class="base-brand-item">
    <a href="#">
      <img src="@/assets/images/hot1.png" alt="" />
    </a>
</li>
</template>

<script>
export default{

}
</script>

<style>
    .base-brand-item {
    width: 244px;
    height: 306px;
    }
</style>

②全局注册👇

import BaseGoodsItem from './components/BaseGoodsItem'
import BaseBrandItem from './components/BaseBrandItem'

Vue.component('BaseGoodsItem',BaseGoodsItem)
Vue.component('BaseBrandItem',BaseBrandItem)

③插入对应组件ul位置👇

<template>
    <!-- 热门品牌 -->
    <div class="hot">
      <div class="wrapper">
        <div class="title">
          <div class="left">
            <h3>热门品牌</h3>
            <p>国际经典 品质认证</p>
          </div>
          <div class="button">
            <a href="#"><i class="iconfont icon-arrow-left-bold"></i></a>
            <a href="#"><i class="iconfont icon-arrow-right-bold"></i></a>
          </div>
        </div>
        <div class="bd">
          <ul>
            <BaseBrandItem></BaseBrandItem>
            <BaseBrandItem></BaseBrandItem>
            <BaseBrandItem></BaseBrandItem>
            <BaseBrandItem></BaseBrandItem>
            <BaseBrandItem></BaseBrandItem>
          </ul>
        </div>
      </div>
    </div>
</template>

④如果以后要20遍的话,一遍一遍复制,会有很多行,所以可以配合v-for循环来使用(正常是要跟数组的,现在没有数组,可以先写一个假数字,应为v-for也可以遍历数字)

	  <div class="bd">
        <ul>
            <BaseGoodsItem v-for="item in 5" :key="item"></BaseGoodsItem>
        </ul>
      </div>

4.最后通过js动态渲染

文章来源:https://blog.csdn.net/AYBBZXY/article/details/135815837
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。