在这里插入图片描述

📈「作者简介」:前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级
📚「个人主页」:阿珊和她的猫
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

简单录制如下

请添加图片描述

主要练习下界面和交互,顺带简单了解下 vue3 语法。

Vue 3 是一种流行的 JavaScript 框架

Vue 3 是一种流行的 JavaScript 框架,用于构建用户界面它是 Vue.js 框架的最新版本,相较于 Vue 2,Vue 3 引入了一些重大改进和新特性,旨在提供更好的性能、更好的开发体验和更灵活的使用方式。

以下是 Vue 3 的一些关键特性和改进:

1. 更快的渲染性能

Vue 3 的响应式系统经过重写,引入了基于 Proxy 的观察机制提供了更高效的响应式数据追踪和更新。这种新的观察机制能够在访问响应式数据时进行动态跟踪,从而减少了不必要的依赖追踪和更新操作,提高了性能。

2. 更小的包体积

Vue 3 使用了模块化的设计方式,使得开发者可以根据需求按需引入需要的功能,从而减小了打包体积。这意味着在项目中可以只使用需要的功能模块,而不必引入整个框架。

3. Composition API

Vue 3 引入了 Composition API,这是一个基于函数的 API 风格,提供了更好的代码组织和复用性Composition API 允许开发者根据逻辑关系将代码组织成功能模块,而不是基于组件的结构。这样,开发者可以更灵活地组织和复用逻辑代码,并在不同组件之间共享逻辑。

4. Teleport 组件

Vue 3 引入了 Teleport 组件,它可以在 DOM 树中的任何位置进行组件渲染,而不需要受限于当前组件的父元素。这使得开发者可以更便利地实现弹出框、对话框等需要在 DOM 树中指定位置渲染的功能。

5. 更好的 TypeScript 支持

Vue 3 对 TypeScript 提供了更好的支持,包括更强大的类型推导、更准确的类型推断等功能。这使得开发者在使用 TypeScript 开发 Vue 3 应用时能够获得更好的开发体验和类型安全性。

总结来说,Vue 3 带来了更快的渲染性能、更小的包体积、更灵活的组织方式和更好的 TypeScript 支持等改进和新特性。开发者可以通过升级到 Vue 3 或在新项目中使用 Vue 3 来获得这些优势,并享受更好的开发体验和性能提升。

Vant 4 是一套基于 Vue 3 的移动端 UI 组件库

Vant 4 是一套基于 Vue 3 的移动端 UI 组件库,它提供了丰富的组件和工具,用于开发具有优秀用户体验的移动应用Vant 4 是 Vant 组件库的最新版本,相较于 Vant 2,Vant 4 经过重写和升级,采用了 Vue 3 的新特性和优势

以下是 Vant 4 的一些关键特性和改进:

1. 基于 Vue 3

Vant 4 是完全基于 Vue 3 的,利用 Vue 3 的新特性在性能、开发体验和代码组织等方面带来了一些优势。例如,Vant 4 使用了 Vue 3 的 Composition API 来提供更好的代码组织和复用性

2. 更小的包体积

Vant 4 采用了 Tree Shaking 技术,可以按需引入组件,从而减小了打包体积。这样,开发者只需引入需要的组件,而不是全部组件,可以有效地优化应用的性能。

3. 渐进式加载

Vant 4 提供了渐进式加载功能,将组件资源进行异步加载,只在需要时再加载相关组件。这样可以减少首次加载的文件大小,加快应用的初始化速度。

4. 插件化设计

Vant 4 通过插件化的设计,使得开发者可以自由扩展和自定义组件库的功能和样式。开发者可以根据自身需求创建自定义主题、添加新的组件或修改现有组件的样式和行为。

5. 改进的组件和交互体验

Vant 4 在原有的组件基础上进行了升级和改进,提供了更好的交互方式和用户体验。例如,Vant 4 优化了滑块组件的滑动效果、加载更多组件的加载方式等。

总而言之,Vant 4 是基于 Vue 3 的移动端 UI 组件库,具有更小的包体积、渐进式加载、插件化设计和改进的组件和交互体验等特点。通过使用 Vant 4,开发者可以快速构建出具有良好用户体验的移动应用,并享受 Vue 3 带来的性能提升和开发体验的改善。

简单截图如下

首页

在这里插入图片描述

首页-猜你喜欢

在这里插入图片描述

分类

在这里插入图片描述

购物车

在这里插入图片描述

个人页面

在这里插入图片描述

部分文件代码

底部导航文件

<template>
  <div class="nav" id="myNav">
    <div
      class="nav-item-box"
      v-for="(item,index) in itemArr"
      :key="index"
    >
    <!-- :class="item.title == '书架' ? 'bookshelf_nav' : ''" -->
      <div
        class="nav-item"
        :style="name == item.navName ? 'color:rgb(255,63,63)' : ''"
        @click="to(item.navName)"
      >
        <div class="icon">
          <i :class="item.icon"></i>
        </div>
        <div class="title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { defineComponent, ref, computed } from 'vue'
import { useRouter,useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    let itemArr = ref([
      { title: '首页', navName: 'Index', icon: 'iconfont icon-shouye' }, 
      { title: '分类', navName: 'Classification', icon: 'iconfont icon-fenlei'},  
      { title: '购物车', navName: 'ShoppingCart', icon: 'iconfont icon-gouwuche' }, 
      { title: '我的', navName: 'Mine', icon: 'iconfont icon-wode' }, 
    ])

    let router = useRouter() // 全局路由对象
    let route = useRoute()   // 当前路由对象

    let name = computed(() =>{
      return route.name
    })

    let to = (val) =>{
      if (val != name.value){
        router.replace({
          name: val
        })
      }
    }
    return {
      itemArr,
      name,
      to
    }
  }
})
</script>

分类功能模块

<div class="content_container">
  <!-- 左侧 -->
  <div class="left_box">
    <div v-for="(item,index) in leftList" :key="index">
      <div :class="curNav.index == item.index ? 'active' : '' " class="left_box_title" @click="changeIndex(index)">{{item.title}}</div>
    </div>
  </div>

  <!-- 右侧 -->
  <div>
    <van-list
      v-if="curNav.index ==0"
      class="right_box"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item" class="right_good">
        <div class="img "><img class="img" :src="item.src" alt=""></div>
        <div class="name">{{item.title}}</div>
      </div>
    </van-list>
    <div v-if="curNav.index !=0">
      <van-empty image="error" description="暂无数据" />
    </div>
  </div>
</div>
<script>
/* eslint-disable */
import { defineComponent, ref } from 'vue'
import { showToast } from 'vant';
import navCom from '@/components/onlineRetailer/MyNav.vue'

export default defineComponent({
  name: 'headerCom',
  components: {
    navCom
  },
  setup (props,ctx) {
    let value = ref('')
    let active = ref(0);
    // let onChange = (index) => showToast(`标签名 ${index + 1}`);
    // let onChange = (index) => {
    //   switch(index){
    //     case 0: showToast('1111111111111')
    //     break;
    //     case 1:  showToast('222222222222')
    //     break;
    //     default:  showToast('6666666666666')
    //   }
    // }
    let leftList = ref([
      { index: 0, title: "好货推荐" },
      { index: 1, title: "彩妆个护" },
      { index: 2, title: "食品饮料" },
      { index: 3, title: "鞋履箱包" },
      { index: 4, title: "母婴用品" },
      { index: 5, title: "生活家居" }
    ])
    let rightList = ref([
      { title: '麦菜' },
      { title: '芥兰' }
    ])

    let list = ref([
      { title: '坚定不移', src: require('@/assets/newProducts/2.jpg')},
      { title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')},
      { title: '奋发图强', src: require('@/assets/newProducts/3.jpg')},
      { title: '坚持不懈', src: require('@/assets/newProducts/4.jpg')},
      { title: '朝气蓬勃', src: require('@/assets/newProducts/5.jpg')},
      { title: '力争上游', src: require('@/assets/newProducts/6.jpg')},
      { title: '坚定不移', src: require('@/assets/newProducts/2.jpg')},
      { title: '壮志凌云', src: require('@/assets/newProducts/1.jpg')},
    ]);
    let loading = ref(false);
    let finished = ref(false);
    let curNav = ref({
      index: 0, 
    })

    let changeIndex = (index) =>{
        curNav.value.index = index
    }

    let onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例,真实场景中一般为 ajax 请求
      // setTimeout(() => {
        // for (let i = 0; i < 6; i++) {
        //   list.value.push(list.value.length + 1);
        // }

        // 加载状态结束
        loading.value = false;

        console.log('list.value.length',list.value.length)

        // 数据全部加载完成
        if (list.value.length >= 20) {
          finished.value = true;
        }
      // }, 1000);
    };

    return {
      value,
      active,
      // onChange,
      leftList,
      rightList,
      list,
      onLoad,
      loading,
      finished,
      curNav,
      changeIndex
    }
  }
})
</script>

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app

Logo

前往低代码交流专区

更多推荐