总结一下草稿箱的网课记录，说4小时我还是看了不止4天
Vue
-Vue程序：
-导入开放版本的Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-创建Vue实例对象，设置el属性和data属性
-使用简洁的模板语法把数据渲染到页面上
-el挂载点：el是用来设置vue实例挂载（管理）的元素
el命中元素内部，使用两个大括号修饰的部分，就会被data中同名的数据替换
-vue实例的作用范围是什么？
vue会管理el选项命中的元素以及其内部的后代元素
-是否可以使用其他的选择器？
可以使用其他选择器，但是建议使用ID选择器
-是否可以设置其他的dom元素？
可以使用其他双标签，不能使用html和body
-data数据对象：
-Vue中用到的数据定义在data中
-data中可以写复杂类型的数据
-渲染复杂类型的数据时，遵守js的语法
- v-text：
-v-text指令的作用是设置标签的内容（textContent）
-默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
-内部支持写表达式
- v-html：
-v-html指令的作用是：设置标签的innerHTML
-内容中有html结构会被解析为标签
-v-text指令无论内容是什么，只会解析为文本
-解析文本使用v-text，需要解析html结构使用v-html
- v-on：为元素绑定事件
-v-on指令的作用是为元素绑定事件
-事件名不需要写on
-指令可以简写为@
-绑定的方法定义在methods属性中
-方法内部通过this关键字可以访问定义在data中的数据
-补充：
-事件绑定的方法写成函数调用的形式，可以传入自定义参数
-定义方法时需要定义形参来接收传入的实参
-事件的后面跟上.修饰符可以对事件进行限制
-.enter可以限制触发的按键为回车
-计数器：
1 data中定义数据：比如num
2 methods中添加两个方法：比如add（增）sub（减）
3 使用v-text将num设置给span标签
4 使用v-on将add,sub分别绑定给+-按钮
5 累加的逻辑：小于10累加，否则提示
6 递减的逻辑：大于10递减，否则提示
注意：
-1.创建Vue示例时，el,data,methods
-2.v-on指令的作用是绑定事件，简写为@
-3.方法中通过this，关键字获取data中的数据
-4.v-text指令的作用是：设置元素的文本值，简写为{{}}
- v-show:
- v-show指令的作用是：根据真假切换元素的使用状态
-原理是修改元素的display实现隐藏
-指令后面的内容，最终都会解析成布尔值
-值为true元素显示，false元素隐藏
-数据改变后对应元素的显示状态同步更新
- v-if
-v-if指令的作用是：根据真假切换元素的使用状态
-本质是通过操纵dom元素来切换显示状态
-表达式的值为true，元素存在于dom树中，为false，从dom树中移除
-频繁的切换v-show，反之使用v-if,前者的切换消耗小
- v-bind 设置元素的属性（src title class）
-v-bind指令的作用是：为元素绑定属性
-完整的写法是v-bind：属性名
-简写的化可以省略v-bind，只保留属性名
- v-for
-v-for指令的作用是：根据数据生成列表结构
-数组经常和v-for结合使用
-语法是(intem,index)in 数据
-item和index可以结合其他指令一起使用
-数组长度的更新会同步到页面上，是响应式
- v-medel
-v-model指令的作用是便捷的设置和获取表单元素的值
-绑定的数据会和表单元素的值相关联
-绑定的数据<—— ——>表单元素的值
- axios的基本使用：相对于原生ajax,提供方法更加简便
-axios必须先导入才可以使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-使用get或post方法即可发送对应的请求
-then方法中的回调函数会在请求成功或失败时触发
-通过回调函数的形参可以获取响应内容，或错误信息
Vue-计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
</head>
<body>
<div id="app">
<div class="input-num">
<button @click="sub">
-
</button>
<span>{{num}}</span>
<button @click="add">
+
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
//console.log('add');
if(this.num<10)this.num++;
else alert("别点了,最大了");
},
sub:function(){
//console.log('sub');
if(this.num>0)this.num--;
else alert("别点了,最小了");
}
}
})
</script>
</body>
</html>
Vue-记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow"/>
<meta name="goolebot" content="noindex,nofollow"/>
<link rel="stylesheet" type="text/css" href="./index.css">
<title>记事本</title>
</head>
<body>
<section id="todoapp">
<header class="header">
<h1>记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" />
</header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-if="list.length!=0">
<strong>{{ list.length }}</strong> items left
</span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["TeamSII", "The9", "734"],
inputValue: "Hello,kiki"
},
methods: {
add: function () {
this.list.push(this.inputValue);
},
remove: function (index) {
console.log("删除");
console.log(index);
this.list.splice(index, 1);
},
clear: function () {
this.list = [];
}
},
})
</script>
</body>
</html>
Vue-音乐播放器
1-歌曲搜索
-.按下回车 v-on.enter
-.查询数据 axios 接口 v-model
-.渲染数据 v-for 数组 that
注意：
-服务器返回的数据比较复杂时，获取的时候需要注意层级结构
-通过审查元素快速定位到需要操纵的元素
2-歌曲播放
-点击播放 v-on 自定义参数
-歌曲地址获取 接口 歌曲id
-歌曲地址设置 v-bind
3-歌曲封面
-点击播放 增加逻辑
-歌曲封面获取 接口 歌曲id
-歌曲封面设置 v-bind
4-歌曲评论
-点击播放 增加逻辑
-歌曲评论获取 接口 歌曲id
-歌曲评论渲染 v-for
5-播放动画
-监听音乐播放 v-on play
-监听音乐暂停 v-on pause
-操纵类名 v-bind 对象
注意：
-audio标签的play事件会在音频播放的时候触发
-audio标签的pause事件会在音频暂停的时候触发
-通过对象的方式设置类名，类名生效与否取决于后面的值的真假
6-mv播放
-mv图层显示 v-if
-mv地址获取 接口 mvid
-遮罩层 v-show v-on
-mv地址设置 v-bind
var app = new Vue({
el: "#player",
data: {
query: "",//查询关键字
musicList: [],//歌曲数组
musicUrl: "",//歌曲地址
musicCover: "",//歌曲封面
hotComments: [],//歌曲评论
isPlaying: false,//歌曲播放状态 默认暂停
isShow: false,
mvUrl: ""
},
methods: {
//歌曲搜索
searchMusic: function() {
var that = this;
axios.get("https://v1.alapi.cn/api/music/search?keywords=" + this.query).then(
function(response) {
that.musicList = response.data.result.songs;
console.log(response.data.result.songs);
},
function(err) {}
);
},
//歌曲播放
playMusic: function(musicId) {
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
function(response) {
that.musicUrl = response.data.data[0].url;
},
function(err) {}
);
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
function(response) {
that.musicCover = response.data.songs[0].al.picUrl;
},
function(err) {}
);
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
function(response) {
that.hotComments = response.data.hotComments;
},
function(err) {}
);
},
// 歌曲播放
play: function() {
this.isPlaying = true;
},
pause: function() {
this.isPlaying = false;
},
// 播放mv
playMV: function(mvid) {
var that = this;
axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
function(response) {
console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
},
function(err) {}
);
},
hide: function() {
this.isShow = false;
}
}
});
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
