foreword
We have learned html and javascript respectively in the last two weeks, and this week we will start learning the vue framework.
to do list
<!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>Document</title>
<!-- 引入vue框架 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 创建一个div元素,id为app,不可变,后续所有的html代码都写在此div内部 -->
<div id="app">
<!-- 使用双花括号解析data中的数据 -->
<h3>待办事项列表</h3>
<input type="text" v-model="task">
<h3>{
{ task }}</h3>
<button @click="add">添加</button>
<!-- ul创建无序列表 -->
<ul>
<li v-for="(item ,i ) of tasks">
<button @click="del(i)">x</button>
第{
{ i }}件事： {
{ item }}
</li>
</ul>
</div>
<script>
// 创建一个vue对象
var vm = new Vue({
el: "#app", // 指定vue对象控制的元素
// 通过vue对象的data属性中的数据,可以直接在html中使用
data: {
task: '',
tasks: ['吃饭', '睡觉', '打豆豆']
},
// methods属性中定义的方法,可以在html中使用
methods: {
add() {
//打印出数组的的元素
console.log(this.task)
// 在vue中给数组添加元素不可以用下标
// this.tasks[this.tasks.length] = this.task
// push 数组提供的方法,可以在数组最后添加元素
this.tasks.push(this.task)
console.log(this.tasks)
//清除输入框里面的输入
this.task = ''
},
del(i) {
console.log(i)
// splice 数组提供的方法,可以删除数组中的元素
// splice(从哪个下标开始删除,删除几个元素)
this.tasks.splice(i, 1)
}
},
})
</script>
</body>
</html>
Use vue to realize the change of banner graph
<!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>Document</title>
<!-- 引入vue框架 -->
<script src="./js/vue.js"></script>
<style>
.pointer {
display: flex;
}
span {
width: 20px;
height: 20px;
background-color: pink;
border-radius: 10px;
margin-left: 10px;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<!-- 创建一个div元素,id为app,不可变,后续所有的html代码都写在此div内部 -->
<div id="app">
<!-- 使用双花括号解析data中的数据 -->
<!-- 绑定html属性值,在属性名前面加冒号:,双引号内直接写变量 -->
<img :src="imgsUrl[imgUrlIndex]" alt="">
<div class="pointer">
<!-- <span class="active"></span> -->
<!-- vue中给class属性绑定值使用的对象,
对象的属性名是要绑定的class类名,属性值结果为true则会把属性名绑定为class,
为false则不绑定 -->
<!-- (item ,i) of imgsUrl的意思是循环imgsUrl的item按照i的序号 -->
<span v-for="(item ,i) of imgsUrl" :class="{ active : i == imgUrlIndex}">
{
{ i }}
</span>
<!--
imgUrlIndex
span i = 0 2 0 == 2 false 不绑定 active
span i = 1 2 1 == 2 false 不绑定 active
span i = 2 2 2 == 2 true 绑定 active
span i = 3
span i = 4
-->
</div>
</div>
<script>
// 创建一个vue对象
var vm = new Vue({
el: "#app", // 指定vue对象控制的元素
// 通过vue对象的data属性中的数据,可以直接在html中使用
data: {
imgsUrl: [
"./img/ad/811.jpg",
"./img/ad/853.jpg",
"./img/ad/902.jpg",
"./img/ad/917.jpg",
"./img/ad/918.jpg"
],
imgUrlIndex: 0
},
// mounted: 当vue对象控制的元素,被显示到页面中之后,会自动执行mounted中的代码
// 在mounted中,可以获取到vue对象中的data中的数据,使用this. 访问,并且可以修改法
//mounted: 的作用是在vue中执行script的函数，相当于在vue里面执行script
mounted() {
setInterval(() => {
this.imgUrlIndex++;
if (this.imgUrlIndex == this.imgsUrl.length) {
this.imgUrlIndex = 0
}
}, 1500);
},
})
</script>
</body>
</html>
The advantage of using vue is that it has less code than javascript
find.html
We also turn the find into the form of 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>Find</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/find.css">
<script src="./js/js/vue.js"></script>
<script>
document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
</script>
</head>
<body>
<div id="app">
<div class="search">
<i class="fa fa-microphone fa-lg"></i>
<input type="text" placeholder="搜夜曲" v-model="searchStr">
<img src="img/song/615.jpg" class="search_input" alt="" @click="goToSearch()">
</div>
<div class="banner">
<div class="imgs" @click="goToSheet(sheet.sid)">
<img :src="imgs[imgsIndex]" alt="">
</div>
<div class="pointer">
<span v-for="(item,i) of imgs" :class=" { active : i == imgsIndex } "></span>
</div>
</div>
<div class="category">
<div class="item">
<i class="fa fa-calendar"></i>
<span>每日推荐</span>
</div>
<div class="item">
<i class="fa fa-headphones"></i>
<span>歌单</span>
</div>
<div class="item">
<i class="fa fa-trophy"></i>
<span>排行榜</span>
</div>
<div class="item">
<i class="fa fa-bullhorn"></i>
<span>电台</span>
</div>
<div class="item">
<i class="fa fa-caret-square-o-right"></i>
<span>直播</span>
</div>
<div class="item">
<i class="fa fa-heart"></i>
<span>火前留名</span>
</div>
<div class="item">
<i class="fa fa-comments"></i>
<span>畅聊</span>
</div>
</div>
<div class="choice">
<div class="choice-title">
<span class="left">你的精选歌单站</span>
<span class="right">查看更多</span>
</div>
<div class="choice-box">
<div class="choice-item" v-for="sheet of sheets">
<img :src="sheet.pic" alt="" @click="goToSheet(sheet.sid)">
<span>{
{ sheet.comment }}</span>
</div>
</div>
</div>
<div class="story">
<div class="story-title">
<span class="left">他们把故事唱成了歌曲</span>
<button class="fa fa-play"> 播放全部</button>
</div>
</div>
<div class="story-box">
<div class="item" v-for="song of songs">
<img :src="song.cover" class="cover" alt="">
<div class="info">
<div class="title">
<span>{
{ song.title }}</span>
<span>-{
{ song.singer }}</span>
</div>
<div class="ps">
<span>SQ</span>
<span>{
{ song.title }}</span>
</div>
</div>
<img class="play" src="./img/_play.png" alt="" @click="goToSong(song.sid)">
</div>
</div>
<div class="tab-bar">
<div class="item active">
<i class="fa fa-globe"></i>
<span>发现</span>
</div>
<div class="item">
<i class="fa fa-video-camera"></i>
<span>视频</span>
</div>
<div class="item">
<i class="fa fa-music"></i>
<span>我的</span>
</div>
<div class="item">
<i class="fa fa-users"></i>
<span>云村</span>
</div>
<div class="item">
<i class="fa fa-user" @click="goToUser()"></i>
<span>账号</span>
</div>
</div>
</div>
<br> <br><br>
<script>
var vm = new Vue({
el: '#app',
data: {
imgs: [
'./img/ad/811.jpg',
'./img/ad/853.jpg',
'./img/ad/902.jpg',
'./img/ad/918.jpg',
],
imgsIndex: 0,
sheets: [{
"sid": 10,
"title": "国风伤感",
"user_id": 4,
"pic": "img/sheet/10.jpg",
"comment": "如今的念头，是去很远的地方，饮马曳落河，拄剑拖月山"
},
{
"sid": 20,
"title": "治愈系指南",
"user_id": 4,
"pic": "img/sheet/20.jpg",
"comment": "微风吹来丝丝秋意,月亮照出梦的甜蜜,亲爱的朋友"
},
{
"sid": 30,
"title": "抖音BGM签收",
"user_id": 1,
"pic": "img/sheet/30.jpg",
"comment": "善待自己，从心开始。眼里的世界，从来只是表象"
},
{
"sid": 40,
"title": "发光自习室",
"user_id": 1,
"pic": "img/sheet/40.jpg",
"comment": "每到学习时间，所有的压力都接踵而至。此张歌单送给正在努力学习的你"
},
{
"sid": 50,
"title": "古风纯音",
"user_id": 2,
"pic": "img/sheet/50.jpg",
"comment": "情愫始自少年时，簪缨结发两相知。年年灼灼艳桃李，结发簪花配君子"
}
],
songs: [{
"sid": 1,
"title": "TBD",
"singer": "David",
"cover": "img/song/615.jpg",
"url": "audio/615.mp3"
},
{
"sid": 2,
"title": "出头天",
"singer": "五月天",
"cover": "img/song/618.jpg",
"url": "audio/618.mp3"
},
{
"sid": 3,
"title": "刚刚好",
"singer": "薛之谦",
"cover": "img/song/781.jpg",
"url": "audio/781.mp3"
},
{
"sid": 4,
"title": "你不是真正的快乐",
"singer": "邓紫棋",
"cover": "img/song/796.jpg",
"url": "audio/796.mp3"
},
{
"sid": 5,
"title": "绅士",
"singer": "薛之谦",
"cover": "img/song/801.jpg",
"url": "audio/801.mp3"
},
{
"sid": 6,
"title": "天外来物",
"singer": "薛之谦",
"cover": "img/song/805.jpg",
"url": "audio/805.mp3"
},
{
"sid": 7,
"title": "突然好想你",
"singer": "五月天",
"cover": "img/song/809.jpg",
"url": "audio/809.mp3"
},
{
"sid": 8,
"title": "我不愿让你一个人",
"singer": "五月天",
"cover": "img/song/813.jpg",
"url": "audio/813.mp3"
},
{
"sid": 9,
"title": "我心中的尚未崩坏的地方",
"singer": "五月天",
"cover": "img/song/821.jpg",
"url": "audio/821.mp3"
},
{
"sid": 10,
"title": "想见你想见你想见你",
"singer": "八三夭",
"cover": "img/song/900.jpg",
"url": "audio/900.mp3"
},
{
"sid": 11,
"title": "像风一样",
"singer": "薛之谦",
"cover": "img/song/903.jpg",
"url": "audio/903.mp3"
},
{
"sid": 12,
"title": "这就是爱",
"singer": "张杰",
"cover": "img/song/905.jpg",
"url": "audio/905.mp3"
}
]
},
mounted() {
setInterval(() => {
this.imgsIndex++
if (this.imgsIndex == this.imgs.length) {
this.imgsIndex = 0
}
}, 1500);
},
methods: {
goToSong: function (sid) {
window.location.href = './song-info.html?sid=' + sid
},
goToSheet: function (sid) {
location.href = './sheet.html?sid=' + sid
},
goToUser: function () {
location.href = './user.html'
},
goToSearch: function () {
location.href = './search.html?searchStr=' + this.searchStr
}
}
})
var searchStr = document.querySelector('#searchStr')
var goToSearch = function () {
// console.log(searchStr.value)
location.href = './search.html?searchStr=' + searchStr.value
}
</script>
</body>
</html>
Note that when modifying vue, you must modify the past in the way you wrote before, or the selector will not match
search.html
<!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">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/search.css">
<title>search</title>
<script src="./js/js/vue.js"></script>
<script>
document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
</script>
</head>
<body>
<div id="app">
<div class="search">
<i class="fa fa-angle-left fa-lg" @click="goBack()"></i>
<input type="text" placeholder="时间流逝">
<button class="fa fa-close"></button>
</div>
<div class="nav-bar">
<span class="active">综合</span>
<span>单曲</span>
<span>云村</span>
<span>歌单</span>
<span>歌手</span>
<span>专辑</span>
</div>
<div class="box">
<div class="item" v-for="song of songList">
<div class="info">
<div class="title">{
{ song.title }}</div>
<div class="ps">
<span>原创</span>
<span>翻唱-{
{ song.singer }}</span>
</div>
</div>
<img class="play" src="img/youtube.png" alt="" @click="goToSong(song.sid)">
<i class="fa fa-ellipsis-v"></i>
</div>
</div>
</div>
<br><br><br><br><br>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
songList: [],
songs: [{
"sid": 1,
"title": "TBD",
"singer": "David",
"cover": "img/song/615.jpg",
"url": "audio/615.mp3"
},
{
"sid": 2,
"title": "出头天",
"singer": "五月天",
"cover": "img/song/618.jpg",
"url": "audio/618.mp3"
},
{
"sid": 3,
"title": "刚刚好",
"singer": "薛之谦",
"cover": "img/song/781.jpg",
"url": "audio/781.mp3"
},
{
"sid": 4,
"title": "你不是真正的快乐",
"singer": "邓紫棋",
"cover": "img/song/796.jpg",
"url": "audio/796.mp3"
},
{
"sid": 5,
"title": "绅士",
"singer": "薛之谦",
"cover": "img/song/801.jpg",
"url": "audio/801.mp3"
},
{
"sid": 6,
"title": "天外来物",
"singer": "薛之谦",
"cover": "img/song/805.jpg",
"url": "audio/805.mp3"
},
{
"sid": 7,
"title": "突然好想你",
"singer": "五月天",
"cover": "img/song/809.jpg",
"url": "audio/809.mp3"
},
{
"sid": 8,
"title": "我不愿让你一个人",
"singer": "五月天",
"cover": "img/song/813.jpg",
"url": "audio/813.mp3"
},
{
"sid": 9,
"title": "我心中的尚未崩坏的地方",
"singer": "五月天",
"cover": "img/song/821.jpg",
"url": "audio/821.mp3"
},
{
"sid": 10,
"title": "想见你想见你想见你",
"singer": "八三夭",
"cover": "img/song/900.jpg",
"url": "audio/900.mp3"
},
{
"sid": 11,
"title": "像风一样",
"singer": "薛之谦",
"cover": "img/song/903.jpg",
"url": "audio/903.mp3"
},
{
"sid": 12,
"title": "这就是爱",
"singer": "张杰",
"cover": "img/song/905.jpg",
"url": "audio/905.mp3"
}
]
},
mounted() {
var url = location.search
url = url.slice(1)
var params = new URLSearchParams(url)
var searchStr = params.get('searchStr')
this.songList = this.songs.filter(function (item) {
// includes方法 判断是否包含指定字符串
return item.title.includes(searchStr) || item.singer.includes(searchStr)
})
console.log(this.songList)
},
methods: {
goBack: function () {
history.back()
},
goToSong: function (sid) {
window.location.href = './song-info.html?sid=' + sid
}
}
})
</script>
</body>
</html>
After changing the search interface to a vue framework, it feels much more concise