经验总结

  1. 首页 > 生活 > >

一篇文章带你了解网页框架——Vue简单入门( 八 )

生活百科

Vue网络应用我们在本篇开头说过Vue的作用仅仅是用来完成静态页面
所以如果想要完成项目开发功能，还需要与后台交互的技术Ajax（主要采用Axios技术）
Axios技术Axios技术是原生的Ajax进行封装，简化书写
我们在之前的Ajax专题中有完整的介绍过Ajax和Axios技术，在这里我们仅做简单回忆：
<!DOCTYPE html><html lang="en"><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>axios基本使用</title></head><body><!--两个按钮分别用来实现两种数据获取--><input type="button" value="https://www.huyubaike.com/biancheng/get请求" class="get"><input type="button" value="https://www.huyubaike.com/biancheng/post请求" class="post"><!-- 官网提供的 axios 在线地址 --><script src="http://shimg.jingyanzongjie.com/230726/025600M22-27.jpg"></script><script>/*接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/// 事件绑定document.querySelector(".get").onclick = function () {// axios的get格式：get后跟url，response为返回体，err为错误axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口2:用户注册请求地址:https://autumnfish.cn/api/user/reg请求方法:post请求参数:username(用户名,字符串)响应内容:注册成功或失败*/// 事件绑定document.querySelector(".post").onclick = function () {// axios的post格式：post后跟url和请求体，response为返回体，err为错误axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"}).then(function(response){console.log(response);console.log(this.skill);},function (err) {console.log(err);})}</script></body></html>Axios+Vue技术我们常常用Vue作为页面的设计框架，同时采用Axios作为前后端交互的技术
两者的结合其实并没有互相掺杂，大致上还保留原本的形式，最大的改变只有数据来源发生变化
<!DOCTYPE html><html lang="en"><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>axios+vue</title></head><body><div id="app"><input type="button" value="https://www.huyubaike.com/biancheng/获取笑话" @click="getJoke"><p> {{ joke }}</p></div><!-- 官网提供的 axios 在线地址 --><script src="http://shimg.jingyanzongjie.com/230726/025600M22-27.jpg"></script><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>/*接口:随机获取一条笑话请求地址:https://autumnfish.cn/api/joke请求方法:get请求参数:无响应内容:随机笑话*/// 采用Vue开启框架页面var app = new Vue({el:"#app",data:{// 页面数据展示joke:"很好笑的笑话"},methods: {// 获得笑话的方法，采用axios技术进行数据请求getJoke:function(){var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){console.log(response.data);that.joke = response.data;},function (err) {})}},})</script></body></html>案例：天气预报我们同样采用一个简单的案例来巩固Vue网络应用
案例需求：

  • 我们可以手动查找输入框内的城市的天气情况
  • 我们可以点击页面内含有的城市的天气情况
代码展示：
<!--主页面展示--><!DOCTYPE html><html lang="en"><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><!--CSS链接--><link rel="stylesheet" href="https://www.huyubaike.com/biancheng/css/index.css" /></head><body><!--Vue绑定--><div class="wrap" id="app"><div class="search_form"><div class="logo"><img src="https://www.huyubaike.com/biancheng/img/logo.png" alt="logo" /></div><div class="form_group"><!--双向绑定city，添加事件@keyup.enter="queryWeather"--><input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" /><!--添加事件@keyup.enter="queryWeather"--><button class="input_sub" @click="queryWeather">搜 索</button></div><!--展示列出的城市，点击触发事件--><div class="hotkey"><a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a></div><!--展示返回的天气数据--></div><ul class="weather_list"><!----><li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}"><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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="http://shimg.jingyanzongjie.com/230726/025600M22-27.jpg"></script><script>new Vue({el: "#app",data: {// 输入框城市，双向绑定city: "武汉",// 天气情况forecastList: [],// 城市展示hotCitys: ["北京", "上海", "广州", "深圳"]},methods: {queryWeather() {// 将天气情况清零this.forecastList = [];// axios获得天气状况axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then(res => {console.log(res);this.forecastList = res.data.data.forecast;}).catch(err => {console.log(err);}).finally(() => { });},// 点击城市触发queryWeather方法，获得天气情况clickSearch(city) {this.city = city;this.queryWeather();}}});</script></body></html>

经验总结扩展阅读


上一篇：2023年2月9日拜观音黄道吉日 2023年农历正月十九宜拜观音吗

下一篇：2023年农历正月十九宜求神拜佛吗 2023年农历正月十九求神拜佛吉日