HTML+CSS+JS 360商城网站界面

1、 项目介绍

• 将html+css结合，实现静态商城界面展示，主要运用div样式、flex布局等
• 通过使用js实现商城界面轮播图设计
• 使用vue中v-for列表渲染解决商城静态网站中表格数据格式重复问题，减少代码量

2、技术介绍

v-for指令基于一个数组来渲染一个列表。 语法格式：item in items

• 1、items是源数据数组，而item则是被迭代的数组元素的别名（item数组迭代子项）。（即items相当于数组，item相当于数组中的元素）。
• 2、位置索引： v-for 支持使用可选的第二个参数表示当前项的位置索引 v-for=“(item, index) in items”

使用总结：

在HTML中引用Vue3进行使用

 <!-- 通过使用CDN引用vue组件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1. 文字信息 ul li标签中

<ul class="black-nav-left">
    <li v-for="item in items">
        {{ item.message }}
     </li>
</ul>

js代码：

items: [{
                message: '帮助中心'
            }, {
                message: '收藏'
            }, {
                message: '360官网'
            }, {
                message: '360智慧生活'
            }]

2. 图片内容

<div v-for="(image,index) in images" :key="index">
     <a href="#" class="remen hover_item">
        <img :src="image.src" :alt="image.alt" class="remen hover_item">
      </a>
 </div>

images: [{
                src: 'images/1.1.webp',
                alt: 'Image1'
            }, {
                src: 'images/1.2.webp',
                alt: 'Image1'
            }, {
                src: 'images/1.3.webp',
                alt: 'Image1'
            }, {
                src: 'images/1.4.webp',
                alt: 'Image1'
            }]

3. 双层嵌套内容，如黑色菜单栏，根据点击不同循环不同信息

<ul>
    <li class="category_item" v-for="item in all" :key="item.id">
        <a class="fen">
            <span class="all">{{item.message}}</span>
        </a>
     <div class="slid-list">
      <ul>
        <li v-for="sub in item.subs">
            <img :src="sub.img">
              <span>{{sub.name}}</span>
        </li>
 </ul> </div> </li></ul>

内容过多，不全部展示，只展示格式内容

all:[{
                message: '智能手表',
                subs: [{
                    img: 'images/5.4.webp',
                    name: '智能手表'

                }]
            }]

4. 复杂信息内容，根据需要的样式逐行书写语句即可

<li v-for="(item,index) in itemList" :key="item.id" class="product_item hover_item">
    <div class="title ">{{item.title}}</div>
    <div class="item_image">
        <img :src="item.img" alt="图片">
    </div>
    <p class="name">{{item.name}}</p>
    <p class="desc ">{{item.desc}}</p>
    <div class="price">
        <span class="cur_price">{{item.old_price}}</span>
        <span class="old_price">{{item.cur_price}}</span>
</div></li>

itemList: [{
                    id: 1,
                    title: '爆款',
                    img: 'images/2.3.webp',
                    name: '360智能摄像机云台7P超清版 AP1PA3',
                    desc: '400万超清全景 一键呼叫家人 微光全彩夜视',
                    cur_price: '¥219',
                    old_price: '¥219'
                }]

！上述需要嵌套到一个id标签，在标签中写vue3样式，每个标签如果有css样式，根据内容嵌套进入

js格式内容
const{createApp,reactive,toRefs,ref,onMounted}=Vue;
const app=createApp(
    {
        setup(){
            return{
                ....            
            }        
        }    
    }
)

const { createApp, reactive, toRefs, ref, onMounted } = Vue;

• 这行代码首先从Vue对象中提取了五个属性或方法，它们分别是：
• createApp：用于创建Vue应用程序实例方法
• reactive：Vue3中用于创建响应式数据对象方法
• toRefs：将响应式数据对象转化为普通引用对象方法
• ref：Vue3中用于创建响应式数据的基本数据类型包装器
• onMounted：用于在组件实例挂载后执行的生命周期钩子函数
  通过将这些属性和方法提取出来，你可以在代码中更方便地使用它们，而不需要每次都通过Vue.createApp或Vue.reactive等方式来调用。

例如，你可以这样使用它们：
javascript插入代码复制代码const app = createApp(...); // 创建Vue应用程序实例
const data = reactive(...); // 创建响应式数据对象
const refs = toRefs(data); // 将响应式数据对象转化为引用对象
const count = ref(0); // 创建一个响应式的数字
onMounted(() => {
  // 在组件挂载后执行的代码
});
key属性添加到v-for中，最好都添加一个key属性，节约空间
<p v-for="(item,index) in items :key="item.id"">
{{item}}<p>
//在应用场景中，加入索引id，可以顺序更换，避免就地更新

3、项目展示

界面展示情况如下图
上方有图片logo，搜索栏，导航栏等等，代码地址如下所示：网站代码