零基础vue.js学习笔记 进阶篇

编程语言 2022-05-08 09:49:10 阅读次数: 0

笔记整理来源 B站up主黑马程序员
B站黑马程序员 快速入门vue前端

适合初学者入门vue.js，
该文是进阶篇
基础篇包括课程中的Vue基础和本地应用环节
该文是进阶篇，包括网络应用和综合应用
基础篇链接

文章目录

Vue.js

网络应用

介绍

Vue结合网络数据开发应用

axios :网络请求库

axios+vue 结合vue一起

通过天气预报巩固

axios基本使用

axios导入

<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

get请求

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
response函数会在请求成功后调用 		err会在请求失败后调用
随机笑话接口
接口1 随机笑话
请求地址 http://autumnfish.cn/api/joke/list
请求方法 get
请求参数 num(笑话个数)
相应内容 随机笑话
实战演示
<body>
<input type="button" value="get请求" class="get">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>

document.querySelector(".get").onclick=function(){
    axios.get("http://autumnfish.cn/api/joke/list?num=5")
    //axios.get("http://autumnfish.cn/api/joke/list123?num=5")
        .then(function(response){
        console.log(response);
    }
              ,function(err){
        conselo.log(err);
    })
}
</script>
</body>
功能

正常执行，在控制台输出五条笑话

如果用注释的语句会执行err语句，在控制台输出错误代码。

post请求

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
response函数会在请求成功后调用 		err会在请求失败后调用
用户注册接口
接口2 用户注册
请求地址 http://autumnfish.cn/api/user/reg
请求方法 post
请求参数 username(用户名) --字符串类型
响应内容 注册成功或失败
实战演示
<body>
<input type="button" value="post请求" class="post">
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>

document.querySelector(".post").onclick=function(){
    axios.get("http://autumnfish.cn/api/user/reg,{username:"jack"}")
    //axios.get("http://autumnfish.cn/api/user/reg123,{username:"jack"}")
        .then(function(response){
        console.log(response);
    }
              ,function(err){
        conselo.log(err);
    })
}
</script>
</body>
功能

正常执行，在控制台输出***用户注册成功

如果用注释的语句会执行err语句，在控制台输出错误代码。

总结

先导入再使用

使用get或post方法可发送对应的请求

then方法中的回调函数会在请求成功或失败时候触发

通过回调函数的形参可以获取响应内容，或错误信息

官网：https://github.com/axios/axios

axios+vue

axios如何结合vue开发网络应用

一条随机笑话接口
接口1 随机笑话
请求地址 http://autumnfish.cn/api/joke
请求方法 get
请求参数 无
相应内容 一条随机笑话 
<body>
    
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>
            {
   
   {joke}}
        </p>
    </div>
    <!--导入axios在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <!--导入vue -->
	<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
	<script>
    	var app=new vue({
            el:"#app",
            data:{
                joke:"好笑的笑话"
            },
           	methods:{
                getJoke:function(){
                    var that=this;
                    axios.get("http://autumnfish.cn/api/joke")
                        .then(function(response){
                        console.log(response.data);
                        that.joke=response.data;
                    },function(err){	})
                }
            }
            
        })
    </script>
</body>

总结

*axios回调函数中的this已经改变，无法访问到data中的数据

*把this保存起来，用that。回调函数中直接使用保存的this即可

在这里插入图片描述

天知道-介绍

在这里插入图片描述

天知道–回车查询

1.按下回车(v-on.enter)

2.查询数据(axios 接口 v-model)

3.渲染数据(v-for 数组 that)

天气接口
接口1 随机笑话
请求地址 http://wthrcdn.etouch.cn/weather_mini
请求方法 get
请求参数 city(查询城市名)
相应内容 天气信息

主体html框架代码
在这里插入图片描述

主页面部分重要代码

<input type="text" v-model="city" @keyup.enter="searchWeather" 
       class="input_txt placeholder="请输入查询的天气">
                                              
<ul class="weather_list">
            <li v-for="item in weatherList">	
                <span> {
   
   {item.type}}</span>
                <b>{
   
   {item.low}}</b>
                <b>{
   
   {item.high}}</b>
                <span> {
   
   {item.data}</span>                           
                <!--列表这里省略css格式，只演示主要代码 -->                           
                                           </li>
                                              
</ul>

创建js文件main.js 并在主页面中导入


    <script>

var app=new Vue({
	el:"#app",
	data:{
		city:"",
		weatherList:[]
},	methods:{
		searchWeather:function(){
		var that=this;
        axios.get('http://wthrcdn.etouch.cn/weather_mini'+this.city)
        .then(function(response){
            that.weatherList=response.data.data.forcast
        })
            .catch(function(err){	})
		
}
}
})

</script>

天知道–点击查询

1.点击城市(v-on 自定义参数)

2.查询数据(this方法)

3.渲染数据

新增方法

changeCity:function(city){
	this.city=city;
	this.searchWeather();
}

与超链接进行绑定

<a href="javascript:;" @click="changeCity("北京")">  北京</a>

总结

*自定义参数可以让代码的复用性更高

*methods定义的方法内部，，可以通过this调用

综合应用-悦听-介绍

在这里插入图片描述在这里插入图片描述

天知道-音乐查询

所需步骤

1.按下回车(v-on .ent)

2.查询数据(axios 接口 v-model)

3.渲染数据(v-for 数组 thar)

歌曲搜索接口
接口1 歌曲搜索
请求地址 http://autumnfish.cn/search
请求方法 get
请求参数 keywords(查询的关键字)
相应内容 歌曲搜索结果

页面整体布局
在这里插入图片描述在这里插入图片描述

创建js文件 在主页面中引入

<script>
var app=new Vue({
	el:"#player",
    data:{
        query:"",
        musicList:[]
    },
    methods:{
        searchMusic:function(){
            var thar =this;
            axios.get("http://autumnfish.cn/search?keywords="+this.query)
            .then(function(response){
              that.musicList=response.data.result.songs;  
            },function(err){	})
        }
    }

})
</script>

主页面的

<!-- 搜索歌曲列表  -->
<input type="text" autocomplete="off" v-model="querry" @keyup.enter="searchMusic" >
<!-- 搜索歌曲列表  -->
<ul>  
<li  v-for="item in musicList"> 
<a href="javascript:;"></a>
<b>{
   
   {item.name}}</b>
</li>
</ul>

总结

*服务器返回的数据比较复杂时，获取的时候需要注意层级结构

*通过审查元素快速定位到需要操纵的元素

音乐播放

在这里插入图片描述

1.点击播放(v-on 自定义参数)

2.歌曲地址获取(接口 歌曲id)

3.歌曲地址设置(v-bind)

歌曲url获取地址
接口1 歌曲获取URL
请求地址 http://autumnfish.cn/song/url
请求方法 get
请求参数 id(歌曲id)
相应内容 歌曲的url地址

新增属性

musicUrl:""

新增方法

playMusic:function(musicid){
		var that=this;
		axios.get("http://autumnfish.cn/song/url?id="+this.query)
		.then(function(response){
		that.musicUrl=response.data.result.songs;
		},function(err){	})
}

主页面中

  
<li  v-for="item in musicList"> 
<a href="javascript:;  @click="playMusic(item.id)"></a>
</li>


<audio ref="audio" :src="musicUrl" controls autoplay loop class="myaudio">
</audio>

总结

*歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

歌曲封面

在这里插入图片描述

1.点击播放(增加逻辑)

2.歌曲封面获取(接口 歌曲id)

3.歌曲封面设置(v-bind)

歌曲详情获取
接口1 歌曲详情获取
请求地址 http://autumnfish.cn/song/detail
请求方法 get
请求参数 ids(歌曲id)
相应内容 歌曲的详细信息 包括封面信息

上半区playmusic中

playMusic:function(musicid){
		var that=this;
		axios.get("http://autumnfish.cn/song/url?id="+this.query)
		.then(function(response){
		that.musicUrl=response.data.result.songs;
		},function(err){	})
}

新增加属性

musicCover:""

playmusic中新增加逻辑

axios.get("http://autumnfish.cn/song/detail?ids="+musicId)
.then(function(response){
that.musicCover=response.data.song[0].al.picUrl;
},function(err){		})

主页面中

<img :src="musicCover" class="cover autoRotate">

总结

*在vue中通过v-bind操纵属性

*本地无法获取的数据，基本都会有对应的接口

歌曲评论

在这里插入图片描述

1.点击播放(增加逻辑)

2.歌曲评论获取(接口 歌曲id)

3.歌曲评论渲染(v-for)

热门评论获取
接口1 热门评论获取
请求地址 http://autumnfish.cn/comment/hot?type=0
请求方法 get
请求参数 id(歌曲id,type固定=0)
相应内容 歌曲的热门评论

新加属性

hotComments:[]

playMusic中新增加逻辑

axios.get("http://autumnfish.cn/comment/hot?type=0&id="+musicId)
.then(function(response){
that.hotComments=response.data.hotComments;
},
funcstion(err){	})

主页面中

<div class="comment_list">
<dl v-for="item in hotComments">
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{
   
   {item.nickname}}</dd>
<dd clas="detail">{
   
   {item.content}}</dd>
</dl></div>

总结

*在vue中通过v-for生成列表

播放动画

在这里插入图片描述

1.监听音乐播放(v-on play)

2.监听音乐暂停(v-on pause)

3.操纵类名(v-bind 对象)

新增属性

isPlaying:false

新增方法

paly:function(){
	this.isPlaying=true;
}
pause:function(){
	this.isPlaying=false;
}

主页面中

<div class="player_con" :class"{playing:isPlayilng}">
***
</div>

总结

*audio标签的play事件会在音频播放的时候触发

*audio标签的pause事件会在音频暂停的时候触发

*通过对象的方式设置类名，类名生效与否取决于后面值的真假

播放MV

在这里插入图片描述

在这里插入图片描述

1.mv图标(v-id)

2.mv地址获取(接口 mvid)

3.遮罩层(v-show v-on)

4.mv地址设置(v-bind)

mv地址获取
接口1 mv地址获取
请求地址 http://autumnfish.cn/mv/url
请求方法 get
请求参数 id(mvid 为0说明没有mv)
相应内容 mv的地址

mv图标是否显示

<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>

新增属性

//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""

新增方法

palyMV:function(mvid){
var that=this;
	axios.get("http://autumnfish.cn/mv/url?id="+mvid)
	.then(function(response){
		that.isShow=true;
		that.mvUrl=response.data.data.url
	},function(err){	})
}
hide:function(){
	this.isShow=false;
}

主页面中

<div class="vedio_con" v-show="isShow" style="display:none;">
<vedio :src="mvUrl" controls="controls"></vedio>
<div class="mask" @click="hide"></div>
</div>

*不同的接口需要的数据是不同的，文档的阅读需要仔细

    |

mv图标是否显示

<span v-if="item.mvid!=0" @click="playMV(item.mvid)"></span>

新增属性

//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""

新增方法

palyMV:function(mvid){
var that=this;
	axios.get("http://autumnfish.cn/mv/url?id="+mvid)
	.then(function(response){
		that.isShow=true;
		that.mvUrl=response.data.data.url
	},function(err){	})
}
hide:function(){
	this.isShow=false;
}

主页面中

<div class="vedio_con" v-show="isShow" style="display:none;">
<vedio :src="mvUrl" controls="controls"></vedio>
<div class="mask" @click="hide"></div>
</div>

*不同的接口需要的数据是不同的，文档的阅读需要仔细

*页面结构复杂后，通过审查元素的方式去快速定位相关元素
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_57013916/article/details/124581324
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022