Vue简介:
①: javaScript框架 ②: 简化Dom操作 ③: 响应式数据驱动
写vue 首先引入vue的jar包
<script type="text/javascript" src="js/vue.js"></script>
el:挂载点:
data:数据对象:
methods:事件
Vue指令:
V-text:设置标签的文本值(textContent)
v-html:设置标签的innerHTML
v-on:为元素绑定事件
v-show:根据表达值的真假,切换元素的显示和隐藏
v-if:根据表达值的真假,切换元素的显示和隐藏
v-bind:设置元素的属性(比如:src,title,class)
v-for:根据数据生成列表结构
v-on补充:传递自定义参数,事件修饰符
v-model:获取和设置表单元素的值(双向数据绑定)
案例:小黑记事本:
显示:
<li class="todo" v-for="(item,index) in arr"> // 为一组数组
<span class="index">{{index+1}}</span> <label>{{item}}</label> //每添加一条下面数据会增加
添加为:
@keyup.enter="enterWord" //为 enter键 为确认
enterWord(){
this.arr.push(this.content);
},
删除为:
<button class="destroy" @click="del(index)"></button> //相当于删除按钮
del(i){
this.arr.splice(i,1);
},
统计和清空:
<!-- 统计和清空 -->
<footer class="footer" v-if="arr.length>0">
<span class="todo-count"> <strong>{{arr.length}}</strong> 条数据 </span> //自动增加时
<button class="clear-completed" @click="clear">
Clear
</button>
</footer>
清空代码:
clear(){
this.arr=[];
}
}
axios:功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
下载到本地后可以改为:<script src="js/axios.min.js"></script>
随机获取 笑话以及检查名字是否被注册
测试:
应用:
<!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/reset.css" />
<link rel="stylesheet" href="css/tianindex.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input
type="text"
class="input_txt"
placeholder="请输入查询的天气"
v-model="content"
@keyup.enter="getTQ"
/>
<button class="input_sub" @click="getTQ">搜 索</button>
</div>
<div class="hotkey">
<a href="javascript:;" @click="getTQ('北京')">北京</a>
<a href="javascript:;" @click="getTQ('上海')">上海</a>
<a href="javascript:;" @click="getTQ('广州')">广州</a>
<a href="javascript:;" @click="getTQ('深圳')">深圳</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in arr">
<div class="info_type"><span class="iconfont">{{item.type}}</span></div>
<div class="info_temp">
<b>{{item.low}}</b>
~
<b>{{item.high}}</b>
</div>
<div class="info_date"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script type="application/javascript" src="js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script type="application/javascript" src="js/axios.min.js"></script>
<!-- 自己的js -->
<script>
var aaa=new Vue({
el:"#app",
data:{
content:"",
arr:[],
},
methods:{
getTQ(city){
var that=this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.content).then(function(result) {
console.log(result);
that.arr=result.data.data.forecast;
})
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function(result) {
console.log(result);
that.arr=result.data.data.forecast;
})
}
}
})
</script>
</body>
</html>
<!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>悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/playerIndex.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 v-for="song in songs"><a href="javascript:;" @click="player(song.id)"></a> <b>{{song.name}}</b> <span v-show="song.mvid!=0"><i @click="playMv(song.mvid)"></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="picUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="comment in comments">
<dt><img :src="comment.user.avatarUrl" alt=""></dt>
<dd class="name">{{comment.user.nickname}}</dd>
<dd class="detail">
{{comment.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' v-bind:src="songUrl" controls autoplay loop class="myaudio" @play="isPlaying=true" @pause="isPlaying=false"></audio>
</div>
<div class="video_con" v-show="isShowMv">
<video controls="controls" :src="mvUrl"></video>
<div class="mask" ></div>
</div>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="js/axios.min.js"></script>
</body>
<script>
var app=new Vue({
el:"#player",
data:{
query:"",
songs:[],
songUrl:"",
//评论
comments:[],
//mv路径
mvUrl:"",
//开启mv
isShowMv:false,
//动画
picUrl:"",
//动画转动 默认关闭
isPlaying:false,
},
methods:{
//搜索
searchMusic(){
var that=this;
axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(function (result) {
that.songs=result.data.result.songs;
console.log(that.songs)
})
},
//播放
player(id){
var that=this;
this.isPlaying=true;
axios.get(`https://autumnfish.cn/song/url?id=${id}`).then(function (result) {
that.songUrl=result.data.data[0].url;
})
axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${id}`).then(function (result) {
that.comments=result.data.hotComments;
})
axios.get(`https://autumnfish.cn/song/detail?ids=${id}`).then(function (result) {
console.log(result)
that.picUrl=result.data.songs[0].al.picUrl;
})
},
//播放MV
playMv(mid){
var that=this;
axios.get(`https://autumnfish.cn/mv/url?id=${mid}`).then(function (result) {
that.isShowMv=true;
that.mvUrl=result.data.data.url;
})
},
}
})
</script>
</html>