HTML+CSS实训——Day09——学习VUE框架
前言
我们在上两周分别学习了html和javascript，这周要开始学习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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<h3>待办事项列表h3>
<input type="text" v-model="task">
<h3>{{ task }}h3>
<button @click="add">添加button>
<ul>
<li v-for="(item ,i ) of tasks">
<button @click="del(i)">xbutton>
第{{ 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>
用vue实现banner图变化
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>Documenttitle>
<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">
<img :src="imgsUrl[imgUrlIndex]" alt="">
<div class="pointer">
<span v-for="(item ,i) of imgsUrl" :class="{ active : i == imgUrlIndex}">
{{ i }}
span>
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>
用vue实现的好处是比javascript代码更少了
find.html
我们把find的也都变成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>Findtitle>
<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>SQspan>
<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>
注意在修改vue的时候，要按照自己之前写的方式修改过去，要不然选择器就对不上了
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>searchtitle>
<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>
把search界面改成vue框架之后，也感觉简明了许多