- Import Vue files and axios files
-
<script src="js/vue.min.js"></script> -
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Code part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- 被vm 实例所控制的区域 -->
<div id="app">
<button @click="getJoke">获取笑话</button>
<input type="text" placeholder="请输入要查询的城市名~" v-model="city">
<button @click="getWeather">天气查询</button><br/>
<a href="javascript:void(0)" @click="changeDataToGetWeather('北京')">北京</a> <a href="javascript:void(0)" @click="changeDataToGetWeather('上海')">上海</a> <a href="javascript:void(0)" @click="changeDataToGetWeather('深圳')">深圳</a>
<p>{
{
msg}}</p>
<!--用来显示笑话-->
<!-- //显示天气信息 -->
<table>
<tr v-for="item in weatherArr">
<td v-text="item.date"></td>
<td>{
{
item.high}}</td>
<td>{
{
item.fengli | formatStr}}</td>
<td>{
{
item.low}}</td>
<td>{
{
item.fengxiang}}</td>
<td>{
{
item.type}}</td>
</tr>
</table>
</div>
<script>
Vue.filter('formatStr', function(msg) {
//<![CDATA[3-4级]]>
return msg.replace('<![CDATA[', '').replace(']]>', '');
})
// 创建实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
weatherArr: [],
msg: "-----",
city: "",
},
methods: {
getJoke() {
//发送请求
var that = this;//用变量保存Vue实例
axios.get("https://autumnfish.cn/api/joke")
.then(res => {
// console.log(res.data)
//此处的this关键字的指向不是Vue实例，所以获取不到data里面的数据
that.$data.msg = res.data;
})
.catch(err => {
console.error(err);
});
},
//获取天气信息
getWeather() {
var that = this;//用变量保存Vue实例
if (this.city == "") {
alert("城市信息不能为空！");
} else {
//调用接口。查询天气
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.$data.city)
.then(res => {
that.$data.weatherArr = res.data.data.forecast;
})
.catch(err => {
console.error(err);
})
}
},
changeDataToGetWeather(cityName){
//1.把点击的城市赋值到文本框显示
this.city=cityName;
//调用获取天气方法
this.getWeather();
}
},
});
</script>
</body>
</html>
Browser:
to sum up:
Vue.filter('formatStr', function(msg) {
//<![CDATA[3-4级]]>
return msg.replace('<![CDATA[', '').replace(']]>', '');
})
1. For the extraction of the content in the <![CDATA[3-4level]]> type, string replacement is used.
//获取天气信息
getWeather() {
var that = this;//用变量保存Vue实例
if (this.city == "") {
alert("城市信息不能为空！");
} else {
//调用接口。查询天气
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.$data.city)
.then(res => {
that.$data.weatherArr = res.data.data.forecast;
})
.catch(err => {
console.error(err);
})
}
},
Regarding the point of this in Vue, to whom this method belongs, this points to. For the problem of this pointing, you can use variables to save it in an external function.