“Vue 网络应用 天知道 点击查询”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的1个中间版本）
第3行： 第3行：
 
=== 功能分析 ===
 
=== 功能分析 ===
  
−
# 点击城市
+
# 点击城市（<u>v-on</u> <u>自定义参数</u>）
−
# 查询数据
+
# 查询数据（this.方法()）
−
# 渲染数据
+
# 渲染数据（this.方法()）
 +
 
 +
=== 完整代码示例 ===
 +
<syntaxhighlight lang="html">
 +
<html>
 +
    <head>
 +
        <meta charset="UTF-8">
 +
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
 +
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
 +
        <title>天知道 回车查询</title>
 +
    </head>
 +
 
 +
    <body>
 +
       
 +
        <div class="wrap" id="app">
 +
 
 +
 
 +
 
 +
            <div class="search_form">
 +
 
 +
                <div class="logo"><img src="img/logo.png" alt="logo"></div>
 +
 
 +
                <div class="form_group">
 +
                    <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的城市">
 +
                    <button class="input_sub">搜 索</button>
 +
                </div>
 +
 
 +
 
 +
                <div class="hotkey">
 +
                    <a href="javascript:;" @click="changeCity('北京')">北京</a>
 +
                    <a href="javascript:;" @click="changeCity('上海')">上海</a>
 +
                    <a href="javascript:;" @click="changeCity('广州')">广州</a>
 +
                    <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
 +
                </div>
 +
 
 +
            </div>
 +
 
 +
       
 +
            <ul class="weather_list">
 +
                <li v-for="item in weatherList">
 +
                    <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
 +
 
 +
                    <div class="info_temp">
 +
                        <b>{{ item.low }}</b>
 +
                        ~
 +
                        <b>{{ item.high }}</b>
 +
                    </div>
 +
                    <div class="info_date"><span>{{item.date}}</span></div>
 +
                </li>
 +
               
 +
            </ul>
 +
        </div>
 +
       
 +
 
 +
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 +
        <script src="vue.js"></script>
 +
        <script src="axios.min.js"></script>
 +
       
 +
        <script>
 +
            /*
 +
              请求地址：http://wthrcdn.etouch.cn/weather_mini
 +
              请求方法：get
 +
              请求参数：city（城市名）
 +
              响应内容：天气信息
 +
 
 +
              1.点击回车
 +
              2.查询数据
 +
              3.渲染数据
 +
            */
 +
            var app = new Vue({
 +
                el:"#app",
 +
                data:{
 +
                    city:'',
 +
                    weatherList:[
 +
                        // {
 +
                        //    type:"测试晴",
 +
                        //    low:"28",
 +
                        //    high:"30",
 +
                        //    date:"天"
 +
                        // },
 +
                        // {
 +
                        //    type:"测试晴",
 +
                        //    low:"28",
 +
                        //    high:"30",
 +
                        //    date:"天"
 +
                        // }
 +
                    ]
 +
                },
 +
                methods:{
 +
                    searchWeather: function(){
 +
                        console.log("天气查询");
 +
                        console.log(this.city);
 +
                        // 调用接口
 +
                        var that = this;
 +
 
 +
                        // axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(){
 +
                        axios.get('https://mcs.zijieapi.com/list').then(function(response){
 +
 
 +
                            // console.log(response);
 +
                            // console.log(response.data.data.forecast);
 +
                            // debugger;
 +
                            console.log(response);
 +
 
 +
                            // that.weatherList = response.data.data.forecast;
 +
                            var testData = [
 +
                                {
 +
                                    type:"测试晴",
 +
                                    low:"28",
 +
                                    high:"30",
 +
                                    date:"天"
 +
                                },
 +
                                {
 +
                                    type:"测试晴",
 +
                                    low:"28",
 +
                                    high:"30",
 +
                                    date:"天"
 +
                                }
 +
                            ];
 +
 
 +
                            that.weatherList = testData;
 +
 
 +
                        }).catch(function(err){
 +
 
 +
                        })
 +
                    },//end
 +
                    changeCity:function(city){
 +
                        this.city = city;
 +
                        this.searchWeather();
 +
                    }
 +
                }//end method
 +
            });
 +
        </script>
 +
 
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 
 +
=== 总结和注意 ===
 +
 
 +
* 自定义参数可以让代码的 <u>复用性</u> 更高
 +
* <u>methods</u> 中定义的方法内部，可以通过 <u>this</u> 关键字点出其他的方法

2023年8月10日 (四) 06:35的最新版本

https://www.bilibili.com/video/BV12J411m7MG/?p=29

功能分析

  1. 点击城市（v-on 自定义参数）
  2. 查询数据（this.方法()）
  3. 渲染数据（this.方法()）

完整代码示例

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>天知道 回车查询</title>
    </head>

    <body>
        
        <div class="wrap" id="app">



            <div class="search_form">

                <div class="logo"><img src="img/logo.png" alt="logo"></div>

                <div class="form_group">
                    <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的城市">
                    <button class="input_sub">搜 索</button>
                </div>


                <div class="hotkey">
                    <a href="javascript:;" @click="changeCity('北京')">北京</a>
                    <a href="javascript:;" @click="changeCity('上海')">上海</a>
                    <a href="javascript:;" @click="changeCity('广州')">广州</a>
                    <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
                </div>

            </div>

        
            <ul class="weather_list">
                <li v-for="item in weatherList">
                    <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>

                    <div class="info_temp">
                        <b>{{ item.low }}</b>
                        ~
                        <b>{{ item.high }}</b>
                    </div>
                    <div class="info_date"><span>{{item.date}}</span></div>
                </li>
                
            </ul>
        </div>
        

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="vue.js"></script>
        <script src="axios.min.js"></script>
        
        <script>
            /*
              请求地址：http://wthrcdn.etouch.cn/weather_mini
              请求方法：get
              请求参数：city（城市名）
              响应内容：天气信息

              1.点击回车
              2.查询数据
              3.渲染数据
            */
            var app = new Vue({
                el:"#app",
                data:{
                    city:'',
                    weatherList:[
                        // {
                        //     type:"测试晴",
                        //     low:"28",
                        //     high:"30",
                        //     date:"天"
                        // },
                        // {
                        //     type:"测试晴",
                        //     low:"28",
                        //     high:"30",
                        //     date:"天"
                        // }
                    ]
                },
                methods:{
                    searchWeather: function(){
                        console.log("天气查询");
                        console.log(this.city);
                        // 调用接口
                        var that = this;

                        // axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(){
                        axios.get('https://mcs.zijieapi.com/list').then(function(response){

                            // console.log(response);
                            // console.log(response.data.data.forecast);
                            // debugger;
                            console.log(response);

                            // that.weatherList = response.data.data.forecast;
                            var testData = [
                                {
                                    type:"测试晴",
                                    low:"28",
                                    high:"30",
                                    date:"天"
                                },
                                {
                                    type:"测试晴",
                                    low:"28",
                                    high:"30",
                                    date:"天"
                                }
                            ];

                            that.weatherList = testData;

                        }).catch(function(err){

                        })
                    },//end 
                    changeCity:function(city){
                        this.city = city;
                        this.searchWeather();
                    }
                }//end method
            });
        </script>

    </body>
</html>

总结和注意

  • 自定义参数可以让代码的 复用性 更高
  • methods 中定义的方法内部，可以通过 this 关键字点出其他的方法
取自“https://www.jihongchang.top/index.php?title=Vue_网络应用_天知道_点击查询&oldid=7120”