typescript在vue中的入門案例代碼demo
使用技術(shù)棧vue2+typescript+scss入門練手項目,天氣預(yù)報demo,需要的朋友可以參考下。整體的實現(xiàn)思路比較簡單,頁面也只有一個,包含三部分,搜索框、熱門城市和天氣預(yù)報,組件庫用的是ElementUI。
搜索框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>
熱門城市 popularCity.vue
<template>
<div id="city">
<div v-for="(item, index) in message" :key="index">
<el-button class="box-city" type="text" @click="clickCity(item)">{{
item
}}</el-button>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Emit } from "vue-property-decorator";
@Component({
components: {},
})
export default class searchBox extends Vue {
message = ["北京", "上海", "深圳", "成都", "重慶", "武漢", "南京"];
@Emit("popularCity")
clickCity(city: string): string {
console.log("點擊熱門城市:" + city);
return city;
}
}
</script>
<style lang="scss" scoped>
@import "../style/index.scss";
#city {
width: 40%;
@include box-row-flex(center);
.box-city {
width: 10%;
font-style: italic;
color: $text-color;
font-size: $font-size;
}
}
</style>
這個沒有什么好說的,主要就是進(jìn)行了scss的一些嘗試,比如@mixin
天氣 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layui.layer彈出層(子頁面)改變父頁面內(nèi)容(訪問元素和函數(shù))
當(dāng)前頁面(父框架或父頁面)使用layer以iframe層的方式彈出新的窗口(子框架或子頁面)時,如何在子頁面中訪問父頁面的元素和函數(shù),從而改變父元素的頁面顯示,給用戶合理舒適的體驗。2023-02-02
xterm.js在web端實現(xiàn)Terminal示例詳解
這篇文章主要為大家介紹了xterm.js在web端實現(xiàn)Terminal示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
typescript快速上手的進(jìn)階類型與技術(shù)
本文講述了typescript開發(fā)的一些高級的類型與技術(shù),算是對于基礎(chǔ)知識點的補充,具體內(nèi)容包括:比如元組、枚舉類、接口、泛型相關(guān)概念等。雖說是進(jìn)階,但是內(nèi)容不算多也并不難理解。2022-12-12
數(shù)據(jù)結(jié)構(gòu)TypeScript之二叉查找樹實現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之二叉查找樹實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01

