快捷導(dǎo)航

typescript在vue中的入門案例代碼demo

更新時間：2022年12月30日 17:21:12 作者：微雨即至

這篇文章主要介紹了typescript在vue中的入門案例代碼demo,使用技術(shù)棧vue2+typescript+scss入門練手項目，天氣預(yù)報demo，需要的朋友可以參考下。

搜索框searchBox.vue

<template>
  <div id="search">
    <el-input
      placeholder="請輸入內(nèi)容"
      suffix-icon="el-icon-search"
      v-model="city"
      @change="enter"
      @input="edit"
    >
    </el-input>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";

@Component({
  components: {},
})
export default class searchBox extends Vue {
  city = "";

  @Emit("sendCity")
  enter(value: string): string {
    //在輸入框失去焦點或用戶按下回車時觸發(fā)（會導(dǎo)致一些bug?。。。?
    console.log("按下回車，搜索地是：" + value);
    return value;
  }

  edit(value: string | number): void {
    console.log("正在輸入中......" + value);
  }
}
</script>

這里不寫@component注解，會導(dǎo)致組件中的數(shù)據(jù)和處理方法不是響應(yīng)式的，剛開始寫的時候根本沒有意識到這個問題，點擊頁面中的輸入框el-input組件根本沒反應(yīng)，一直覺得是邏輯或者element有問題，后來查了資料才知道是@component沒有寫。searchBox子組件需要把自己的數(shù)據(jù)傳給weather組件，兩個組件為兄弟關(guān)系，通信的話可以借助父組件Home組件。在ts中，組件間的數(shù)據(jù)傳遞，通過@Emit，子組件將數(shù)據(jù)發(fā)送出去，父組件通過函數(shù)接收，而父組件與子組件通信，通過@Prop。

首頁Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <searchBox @sendCity="sendCity" />
    <popularCity @popularCity="clickCity" />
    <weather :searchCity="city" :popularCity="city" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import searchBox from "@/components/searchBox.vue";
import popularCity from "@/components/popularCity.vue";
import weather from "@/components/weather.vue";

@Component({
  components: {
    searchBox,
    popularCity,
    weather,
  },
})
export default class Home extends Vue {
  city = "";

  sendCity(city: string): void {
    //搜索框組件向home組件傳值
    this.city = city;
  }

  clickCity(city: string): void {
    //熱門城市傳值
    this.city = city;
  }
}
</script>

天氣 weather.vue

<template>
  <div id="weather">
    <div v-for="(item, index) in weatherArr" :key="index">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ city }}</span>
        </div>
        <div class="content">
          <div class="type">{{ item.type }}</div>
          <div class="temp">
            {{ item.low | temperatureFilter }} ~
            {{ item.high | temperatureFilter }}
          </div>
          <div class="time">{{ item.date }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import weather from "../interface/IWeather";
import getWeather from "../utils/getWeather";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {},
  filters: {
    //過濾器
    temperatureFilter: (value: string): string => {
      return value.substring(2);
    },
  },
})
export default class searchBox extends Vue {
  @Prop({
    type: String,
    default: "",
  })
  searchCity!: string;

  city = "西安";
  weatherArr: Array<weather> = [];

  @Watch("searchCity")
  async handleWatch(value: string): Promise<void> {
    console.log("搜索框或熱門城市傳入的地區(qū)是：" + value);

    const res = await getWeather(value);
    console.log(res);
    if (res.status == 1000) {
      this.city = value;
      this.weatherArr.length = 0; //清空當(dāng)前數(shù)組存入的數(shù)據(jù)
      this.weatherArr.push(...res.weather);
    } else if (res.status == 1002) {
      this.$message({
        message: res.desc as string,
        type: "error",
      });
    }
  }

  async created(): Promise<void> {
    const res = await getWeather("西安");
    if (res.status == 1000) {
      this.weatherArr.push(...res.weather);
    } else if (res.status == 1002) {
      this.$message({
        message: res.desc as string,
        type: "error",
      });
    }

    console.log(res);
  }
}
</script>

這里是整個demo的核心，負(fù)責(zé)接收其他組件的數(shù)據(jù)，發(fā)送請求，獲取天氣數(shù)據(jù)。

先來說一下其他組件傳遞數(shù)據(jù)，上面說了父子組件通信通過@Prop，這里用了@Watch檢測數(shù)據(jù)變化，如果點擊了某個熱門城市或者搜索框按下回車鍵，會發(fā)送數(shù)據(jù)到這部分，數(shù)據(jù)來了就通過axios發(fā)送請求，獲取天氣數(shù)據(jù)。這里關(guān)于發(fā)送網(wǎng)絡(luò)請求的部分，進(jìn)行了封裝。

同時，根據(jù)接口的返回數(shù)據(jù)寫interface，這里為了展示數(shù)據(jù)（同時為了根據(jù)不同的返回碼status來提示不同的消息），創(chuàng)建接口IWeather，主要用來抽象天氣數(shù)據(jù)，IFiveWeather用來抽象接口返回形式（接口的代碼就不在此展示）

getWeather.ts

import axios from "axios";

//獲取某地的天氣
async function getWeather(city: string): Promise<IFiveWeather> {
  const weatherArr: IFiveWeather = {
    status: 0,
    weather: [],
  };
  try {
    const res = await axios.get(
      `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
    );

    const status: number = res.data.status;

    switch (status) {
      //輸入城市錯誤的返回碼
      case 1002:
        weatherArr.status = 1002;
        weatherArr.desc = res.data.desc;
        weatherArr.weather = [];
        break;
      //數(shù)據(jù)返回成功
      case 1000:
        weatherArr.status = 1000;
        weatherArr.weather.push(...res.data.data.forecast);
    }
  } catch (error) {
    console.log("天氣接口出錯啦：" + error);
  }

  return weatherArr;
}

export default getWeather;

到此這篇關(guān)于typescript在vue中的入門案例代碼demo的文章就介紹到這了,更多相關(guān)typescript入門demo內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: