前言

最近准备用typescript写点东西，但是关于typescript的东西只是理论看过一些，最近的一次实践还是去年这个时候，当时我在携程实习，公司用的就是typescript。之后，自己也写了大大小小的项目或者demo，使用的都是javascript。刚好最近论文查重过了，时间暂时充裕了起来，就准备练习一下typescript和scss。实现的效果也很简单

代码放在了gitee上，仓库地址是ts-demo: vue2+typescript+scss入门练手项目(gitee.com)，感兴趣的掘友可以看看源代码。

实现思路

整体的实现思路比较简单，页面也只有一个，包含三部分，搜索框、热门城市和天气预报，组件库用的是ElementUI。

搜索框

searchBox.vue

<template><div id="search"><el-inputplaceholder="请输入内容"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 {//在输入框失去焦点或用户按下回车时触发（会导致一些bug！！！）console.log("按下回车，搜索地是：" + value);return value;}edit(value: string | number): void {console.log("正在输入中......" + value);}
}
</script>

这里不写@component注解，会导致组件中的数据和处理方法不是响应式的，刚开始写的时候根本没有意识到这个问题，点击页面中的输入框el-input组件根本没反应，一直觉得是逻辑或者element有问题，后来查了资料才知道是@component没有写。searchBox子组件需要把自己的数据传给weather组件，两个组件为兄弟关系，通信的话可以借助父组件Home组件。在ts中，组件间的数据传递，通过@Emit，子组件将数据发送出去，父组件通过函数接收，而父组件与子组件通信，通过@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("搜索框或热门城市传入的地区是：" + value);const res = await getWeather(value);console.log(res);if (res.status == 1000) {this.city = value;this.weatherArr.length = 0; //清空当前数组存入的数据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的核心，负责接收其他组件的数据，发送请求，获取天气数据。

先来说一下其他组件传递数据，上面说了父子组件通信通过@Prop，这里用了@Watch检测数据变化，如果点击了某个热门城市或者搜索框按下回车键，会发送数据到这部分，数据来了就通过axios发送请求，获取天气数据。这里关于发送网络请求的部分，进行了封装。

同时，根据接口的返回数据写interface，这里为了展示数据（同时为了根据不同的返回码status来提示不同的消息），创建接口IWeather，主要用来抽象天气数据，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;//数据返回成功case 1000:weatherArr.status = 1000;weatherArr.weather.push(...res.data.data.forecast);}} catch (error) {console.log("天气接口出错啦：" + error);}return weatherArr;
}export default getWeather;

资源

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

TypeScript 入门教程 (xcatliu.com)

Element - 网站快速成型工具

vue如何使用TypeScript语法博客园

页面参考地址：简单的天气预报界面

typescript入门练手小demo相关推荐

Bootstrap入门练手小项目，创建一个有侧边栏三级标题可页面跳转的导航
目录前言运行效果代码遇到的一些问题前言在已学习HTML和CSS,以及了解一些JS的基础上接触Bootstrap,编写一个具有侧边栏.三级标题以及可实现页面跳转的小项目给目前不了解这些内容 ...
【Python入门练手小项目】童年最爱看的动画片之海绵宝宝和派大星❤️
海绵宝宝工具使用开发工具:pycharm 开发环境:python3.7, Windows10 使用工具包:turtle 效果展示项目思路解析明确turtle基本配置,然后我们在确定画框的高度以 ...
SSM练手小demo——BookShop图书网络销售系统
下载地址 https://github.com/superdoog/bookshop 项目预览 http://49.235.62.115:8080/BookShop 前台 http://49.235. ...
【爬虫练手小demo】爬取古诗词
爬取的网站链接为 base_url= https://www.gushiwen.org/ 想按照页面右边栏的各个分类进行爬取,例如"春天","夏天"," ...
微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器（一）
内容: 一.前言二.相关概念三.开始工作四.启动项目起来五.项目结构六.设计理念七.路由八.部署线上后端服务同步交流学习社区: https://www.mwcxs.top/page/4 ...
java怎么跑游戏_RunGame java赛跑小游戏源代码和素材，适合新手入门练手。 Develop 272万源代码下载- www.pudn.com...
文件名称: RunGame下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 1650 KB 上传时间: 2017-03-11 下载次数: 0 提供者: kek ...
python新手小项目-推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
数据结构练手小项目（AVL树、哈希表、循环链表、MySQL数据库）
文章目录前言正文(无删减) 我的想法(删减修改版) 数据导入与数据存储功能实现数据结构用户结构 SIM卡结构 AVL树数据结构哈希表结构数据表用户表 SIM卡表时间安排前言本月主 ...
练手小项目，爬取3DM图片
博客原文:https://weweweha.com 1. 概述爬取3DM指定网页的游戏壁纸,并且通过多线程来加速爬取图片的速度. 2.使用库 request库用来1解析指定网页,re库用来搜 ...

typescript入门练手小demo

前言

实现思路

搜索框

热门城市

天气

资源

typescript入门练手小demo相关推荐

最新文章

热门文章