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

文章目录

    • 新认识的快捷键
    • 1.先写好组件并导入App.vue
    • 2.往组件中一个一个填内容
    • 3.整体静态完成后,发现某些小部分相同,其实可以分装成小组件
    • 4.最后通过js动态渲染

新认识的快捷键

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动态渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/346658.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习:多元线性回归闭式解(Python)

import numpy as np import matplotlib.pyplot as pltclass LRClosedFormSol:def __init__(self, fit_interceptTrue, normalizeTrue):""":param fit_intercept: 是否训练bias:param normalize: 是否标准化数据"""self.theta None # 训练权重系…

Vue3 Teleport 将组件传送到外层DOM位置

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…

力扣hot100 合并区间 排序 贪心

Problem: 56. 合并区间 复杂度 时间复杂度: O ( n log ⁡ n ) O(n\log{n}) O(nlogn) 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public int[][] merge(int[][] intervals){Arrays.sort(intervals, (int[] a, int[] b) -> {return a[0] - b[0];});// 按照数…

基于原生图数据库的知识图谱存储

目录 前言1 关系模型的局限1.1 语义关联的隐藏1.2 数据多样性的挑战1.3 动态性受限1.4 与自然语言描述失配 2 知识图谱与图数据库2.1 图数据库概述2.2 图的结构特征的优势2.3 跨领域图建模与查询2.4 丰富的关系语义表达与推理能力 3 图数据建模的好处3.1 自然表达3.2 易于扩展3…

uniapp canvas做的刮刮乐解决蒙层能自定义图片

最近给湖南中烟做元春活动&#xff0c;一个月要开发4个小活动&#xff0c;这个是其中一个难度一般&#xff0c;最难的是一个类似鲤鱼跃龙门的小游戏&#xff0c;哎&#xff0c;真实为难我这个“拍黄片”的。下面是主要代码。 <canvas :style"{width:widthpx,height:hei…

uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择 <view class"reportData" v-for"(val, index) in obj" :key"index"> <view v-if"val.type 3" ><u-checkbox-group v-model"optionValue" placement"colu…

orm-04-Spring Data JPA 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; Spring Data JPA Spring Data JPA&#xff0c;作为更大的 Spring Data 家族的一部分&#xff0c;使得基于 JPA 的仓库实现变得更加容易。…

卫星影像离线瓦片如何调用?

我们曾为你分享了按区县购买卫星影像并在线调用的方法。 于是就有朋友问&#xff0c;卫星影像瓦片可以离线调用吗&#xff1f; 当然可以&#xff0c;这里就来分享一下卫星影像瓦片离线调用的方法。 卫星影像离线瓦片如何调用&#xff1f; 这里以OpenLayers、Mapbox和Cesiu…

Google 提出稀疏注意力框架Exphormer,提升图Transformer的扩展性!

引言 Graph Transformer已成为ML的重要架构&#xff0c;它将基于序列的Transformer应用于图结构数据。然而当面对大型图数据集时&#xff0c;使用Graph Transformer会存在扩展性限制。为此&#xff0c;「Google提出了一个稀疏注意力框架Exphormer&#xff0c;它使用扩展图来提…

LeetCode-2865. 美丽塔 I

题面 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeights[i] heights 是…

音频特效SDK,满足内容生产的音频处理需求

美摄科技&#xff0c;作为音频处理技术的佼佼者&#xff0c;推出的音频特效SDK&#xff0c;旨在满足企业内容生产中的音频处理需求。这款SDK内置多种常见音频处理功能&#xff0c;如音频变声、均衡器、淡入淡出、音频变调等&#xff0c;帮助企业轻松应对各种音频处理挑战。 一…

启动mitmproxy报错 ImportError: cannot import name ‘url_quote‘ from ‘werkzeug.urls‘

报错截图 ImportError: cannot import name url_quote from werkzeug.urls (d:\soft\python\python38\lib\site-packages\werkzeug\urls.py) 原因是Werkzeug版本不兼容导致 解决方法 pip install Werkzeug2.2.2

Java-NIO篇章(5)——Reactor反应器模式

前面已经讲过了Java-NIO中的三大核心组件Selector、Channel、Buffer&#xff0c;现在组件我们回了&#xff0c;但是如何实现一个超级高并发的socket网络通信程序呢&#xff1f;假设&#xff0c;我们只有一台内存为32G的Intel-i710八核的机器&#xff0c;如何实现同时2万个客户端…

【云原生】Docker的端口映射、数据卷、数据卷容器、容器互联

目录 一、端口映射&#xff08;相当于添加iptables的DANT&#xff09; 二、数据卷创建&#xff08;宿主机目录或文件挂载到容器中&#xff09; 三、数据卷容器&#xff08;多个容器通过同一个数据卷容器为基点&#xff0c;实现所有容器数据共享&#xff09; 四、容器互联&am…

Docker容器引擎(2)

目录 一.批量删除镜像&#xff0c;容器 二.Docker 网络实现原理 随机映射端口&#xff08;从32768开始&#xff09; 访问自己&#xff1a; 在10服务器上配置路由转发&#xff1a; 指定映射端口&#xff1a; 查看容器的输出和日志信息&#xff1a; 将宿主机目标|文件挂载…

司铭宇老师:员工心态培训:正确对待工作的七种心态:让你在工作中游刃有余

员工心态培训&#xff1a;正确对待工作的七种心态&#xff1a;让你在工作中游刃有余 工作&#xff0c;是我们生活的核心组成部分。它不仅关乎我们的物质生活&#xff0c;更影响着我们的精神世界。如何在工作中找到平衡&#xff0c;实现自我价值&#xff0c;成为许多人心中的困…

oracle19.22的patch已发布

2024年01月16日,oracle发布了19.22的patch 具体patch如下 Reserved for Database - Do not edit or delete (Doc ID 19202401.9) 文档ID规则如下 19(版本)+年份(202x)+(季度首月01,04,07,10).9 往期patch no信息和下载参考文档 oracle 19C Release Update patch num…

Allegro因为精度问题导致走线未连接上的解决办法

Allegro因为精度问题导致走线未连接上的解决办法。还有在用Allegro进行PCB设计时,因为不小心操作移动了芯片,导致导线和引脚未连接上,也可以使用这个方法。 选择菜单Tools→Derive Connectivity(获取连接) 跳出下面的对话框, Convert Line to Connect Lines

SQL注入实战:宽字节注入

一、宽字节概率 1、单字节字符集:所有的字符都使用一个字节来表示&#xff0c;比如 ASCII编码(0-127) 2、多字节字符集:在多字节字符集中&#xff0c;一部分字符用多个字节来表示&#xff0c;另一部分字符(可能没有)用 单个字节来表示。 3、宽字节注入是利用mysql的一个特性…

人工智能在教学领域中有哪些运用?

人工智能在教学领域中可以有以下几种运用&#xff1a; 1. 智能辅助教学&#xff1a;利用人工智能技术开发出智能辅助教学系统&#xff0c;根据学生的学习状态和知识背景&#xff0c;提供个性化的学习路径和推荐的学习资源&#xff0c;帮助学生更好地掌握知识。 2. 自适应评估…