vue笔记.md · cqgm/黑马教程_vue入门_音乐播放器

# vue

官网：v2:   https://cn.vuejs.org

v3:	https://v3.cn.vuejs.org/

cdn:

一套用于构建用户界面的渐进式js框架，

渐进式： vue可以自底向上逐层的应用，

简单应用：只需一个轻量小巧的核心库

复杂应用： 可以引入各式各样的Vue插件

特点：

组件化，提高代码复用率、切让代码更好维护

声明式编码，让编码人员无需直接操作DOM，提高开发效率

虚拟DOM + 优秀的diffing 算法

前置知识掌握： ES6语法规范、ES6模块化、包管理器、原型、原型链、数组、axios、promise

# vue基础

el：挂载点     选择器，作用域命中元素及其内部的后代元素

data：数据对象，渲染数据遵守js语法

插值表达式

v-text：设置标签的文本值(textContent)

v-html：设置标签的 innerHTML

v-on  =  ‘@’：为元素绑定事件，事件 实现 写在 methods:{	dolt:function(){//逻辑	}}，@click, @monseenter,

方法中通过this 关键字获取 data中的数据

v-show：根据表达值得真假，切换元素的显示和隐藏，v-show="表达式", true 为显示，false 为隐藏 , 本质是 切				 换元素的 display

v-if：根据表达式的真假，切换元素的显示和隐藏(操作dom元素) ， v-if="表达式（bool) "， 本质是操作 dom元素

和  v-show  的区别是  v-if 是直接使标签元素从dom树中移除， v-show是控制样式进行标签的显示和隐藏

使用： 需要频繁切换 使用 v-show, 其他使用v-if

v-bind  =  ':'：设置元素的属性(比如：src,title,class)   v-bind:src = "imgSrc"      v-bind:class="{active:isActive}"

v-for：根据数据生成列表结构  <li v-for="(item,index) in arr">{{index}} {{item}}</li>

this.vegetables.push({name:"花菜炒蛋"})      添加

this.vegetables.shift();       移除最左边的

v-on补充：传递自定义参数，事件修饰符（@keyup.enter="sayHi")

https://cn.vuejs.org/v2/api/#v-on

事件绑定的方法携程 函数调用 的形式，可以转入自定义参数

定义方法时需要定义 形参 来接收传入的实参

事件的后面跟上  .修饰符  可以对事件进行限制

.enter 可以限制触发的按键为回车

v-model： 获取和设置  表单元素的值（双向数据绑定）

v-model = "message"     data:{message:"hello"}

小黑记事本

数组删除元素：splice 索引  this.noteList.splice(noteindex,1);  noteindex形参，索引，1每											次删一条

数组添加元素：  .push()

# vue 网络应用

## axios+vue  天气预报

get:   axios.get(url?key=value&key2=value2).then(function(response){},function(err){})

post   axios.post(url,{key:value,key2:value2}).then(function(response){},function(err){})

axios必须先导入才可以使用

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

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

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

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

```js
	var app = new Vue({
        el:"#app",
        data:{
            joke:"搞笑的笑话"
        },
        methods:{
            var that = this;
            //console.log(this.joke);
            getJokes:function(){
                //this.joke
                axios.get("地址").then(function(response){
                    //this.joke?
        			console.log(response.data);
        			//console.log(this.joke)
                },function(err){});
            }
        }
    })
```

```txt
接口：
	请求地址：https://autumnfish.cn/api/joke
	请求方法：get
	请求参数：无
	相应内容：一条随机笑话
```

注意： axios中then方法的回调函数中的 this 会变，因为调用then方法的不是vue实例，是vue实例的内部函数调用的

## 天知道  天气预报web

实现功能：查询不同地方的天气数据信息    1. 回车查询   2. 点击查询

接口文档：

```txt
天气接口：
请求地址： http://wthrcdn.etouch.cn/weather_mini
请求方法： get
请求参数： city (查询的城市名)
相应内容： 天气信息
```

axios get请求默认是异步执行的

点击查询：注意提高 代码 的复用率，减少代码冗余

## vue 综合应用  悦听播放器

实现功能： 1. 歌曲搜索   2. 歌曲播放  3. 歌曲封面  4. 歌曲评论 5. 播放动画  6. mv播放

查询歌曲接口文档：

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

歌曲url获取接口文档：

```txt
请求地址：https://autumnfish.cn/song/url
请求方法：get
请求参数：id（歌曲id）
相应内容：歌曲的url地址
```

歌曲封面获取接口文档：

```txt
请求地址：https://autumnfish.cn/song/detail
请求方法：get
请求参数：ids(歌曲id)
相应内容：歌曲详情，包含封面信息
```

获取接口评论

```txt
请求地址：https//autumnfish.cn/comment/hot?type=0
请求方法：get
请求参数：id(歌曲id，type固定为0)
相应内容：歌曲的热门评论
```

### 前端css笔记

```txt
inline-block 系列问题
```

块间间隔：

https://www.cnblogs.com/snidget888/p/13140778.html

块内添加内容 块掉落：

https://www.cnblogs.com/ww01/p/9685870.html

```txt
ul li 系列问题
```

li 右偏：

因为ul默认的前面是会有一个点的，这个即使你在ul样式里面写了list-style: none，但他还是会为这个点空出地方来, ul{margin:0;padding:0}这样就好了

```txt
百科
```

opacity  属性指定元素的不透明度/透明度。

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

英文内容不换行

我想楼主应该说的是英文换行问题吧。如果是这种问题我想您输入的应该是一串引文字母导致不能换行问题，浏览器会认为你的字符串是一个单词，一个单词作为一个整体是不能换行的，因此需要将单词使用空格隔开，才会到达div最右侧换行。如果想强制换行添加如下样式：
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
不知道我理解的是否正确哈，希望帮助到你。

background-image: linear-gradient(red, yellow, blue);

从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:

css3中-moz、-ms、-webkit各什么意思

https://zhidao.baidu.com/question/364311602.html

css   垂直水平居中

https://blog.csdn.net/weixin_41229588/article/details/94002713

动画 animation ：

绑定div背景图片：

:style="{'backgroundImage':'url('+music_img+')'}

```
// 隐藏滚动条
.ul::-webkit-scrollbar {
    display: none;
}
```

audio   video:

```
<audio src="m.mp3" controls></audio>
```

```
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
```

v-on 绑定多个事件： v-on: a();b();c();

cqgm/黑马教程_vue入门_音乐播放器

简介

发行版

贡献者

近期动态

cqgm/黑马教程_vue入门_音乐播放器 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

cqgm/黑马教程_vue入门_音乐播放器