总结一下草稿箱的网课记录，说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-音乐播放器
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrap">
<!-- 播放器主体 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li><a href="javascript:;"></a> <b>时差密码</b> </li>
<li><a href="javascript:;"></a> <b>心的旅程</b> </li>
<li><a href="javascript:;"></a> <b>罗马假日</b> </li>
<li><a href="javascript:;"></a> <b>我的舞台</b>
<span><i></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息 -->
<div class="player_con" class="playing">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img src="images/cover.png" class="cover autoRotate" />
</div>
<!-- 评论-->
<div class="comment_wrapper">
<h5 class='title'>留言</h5>
<div class='comment_list'>
<dl >
<dt><img src="./images/person.png" alt=""></dt>
<dd class="name">SNH48</dd>
<dd class="detail">
青春有河，愿赴山海。
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' src="" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" style="display: none;">
<video controls="controls"></video>
<div class="mask" ></div>
</div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
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) {
// console.log(response);
that.musicList = response.data.result.songs;
console.log(response.data.result.songs);
},
function(err) {}
);
},
// 歌曲播放
playMusic: function(musicId) {
// console.log(musicId);
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
},
function(err) {}
);
// 歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
},
function(err) {}
);
// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
function(response) {
// console.log(response);
// console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
},
function(err) {}
);
},
// 歌曲播放
play: function() {
// console.log("play");
this.isPlaying = true;
},
// 歌曲暂停
pause: function() {
// console.log("pause");
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);
console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
},
function(err) {}
);
},
// 隐藏
hide: function() {
this.isShow = false;
}
}
});
转载：https://blog.csdn.net/weixin_45921943/article/details/116430055
查看评论