Javascript

【学习打卡】第7天 实战旅游项目/Vue改写

本文主要是介绍【学习打卡】第7天 实战旅游项目/Vue改写,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

学习打卡】第7天 实战旅游项目/Vue改写

课程名称:[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节: 主页开发

主讲老师:阿莱克斯

课程内容:

  1. 【主页开发】热门产品推荐进行Vue改写
  2. 开发合作企业组件
  3. 配置react-router

课程收获:

新建组件Cooperrative Enterprise
npm install sass sass-loader
完成合作企业 分割成双文件CooperrativeEnterprise.scss / CooperrativeEnterprise.tsx
import y from "@/assets/images/y.png";
import f from "@/assets/images/f.png";
const data = [y, f, y, f];
const CooperativeEnterprise: React.FC = () => {
  return (
    <div className={styles["content"]}>
      <Divider orientation={"left"}>
        <Typography.Title level={3}>合作企业</Typography.Title>
      </Divider>
      <Row>
        {data.map((m): JSX.Element => {
          return (
            <Col span={6}>
              <img style={{ width: 250, height: "auto" }} src={m} alt="" />
            </Col>
          );
        })}
      </Row>
    </div>
  );
};
export default CooperativeEnterprise;
工程化思想分割组件 新建page文件夹 移动对应的内容
安装路由
 npm install react-router-dom @type/react-router-dom
使用Routes包裹Route
      <BrowserRouter>
        <Routes>
          <Route element={<HomePage />} path="/"></Route>
        </Routes>
      </BrowserRouter>
Vue改写 首先是建立两个VUE文件
定义好数据类型后 将数据传入子VUE组件中 通过element组件进行展示
import ProductImage from "@/components/ProductImg.vue";
import { ref } from "vue";
import { productList1 } from "@/mock/2";
type DataProps = {
  size?: "mini" | "big";
  id: string | number;
  price: number | string;
  title: string;
  touristRoutePictures?: any[];
};
const mocks = ref<DataProps[]>(productList1);
综合比较来看 目前在编写不同条件时 Vue稍微麻烦一些 但template隔开js 似乎也更清晰
截图

图片描述图片描述

这篇关于【学习打卡】第7天 实战旅游项目/Vue改写的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!