- 掌握 HTML，CSS，JavaScript，AJAX 基础知识
- 选用 VSCode 作为开发工具
- 课程安排：基础 → 本地应用 → 网络应用 → 综合应用
基础
Vue 简介
- JavaScript 框架
- 简化 Dom 操作
- 响应式数据驱动
第一个 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>VueCode</title>
</head>
<body>
<!-- 3.使用简洁的模板语法把数据渲染到页面上 -->
<div id="app">
{{ message }}
</div>
<!-- 1.导入开发版本的 Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 2.创建 Vue 实例对象 -->
<script>
var app = new Vue({
el:"#app", // el：挂载点
data:{ // data：数据对象
message:"Hello Vue!"
}
})
</script>
</body>
</html>
el：挂载点
- 作用：设置 Vue 实例挂载（管理）
- Vue 会管理 el 选项命中的元素及其内部的后代元素
- 可以使用其他的选择器，但建议使用 ID 选择器
- 可以使用其他的双标签，但不能使用 <html> 和 <body>
<body>
1.{{ message }}
<div id="app" class="app">
2.{{ message }}
<span>
3.{{ message }}
</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app", // ID 选择器
// el:".app", // Class 选择器
// el:"div", // 标签选择器
data:{
message:"挂载点"
}
})
</script>
</body>
data：数据对象
- 作用：定义 Vue 中用到的数据
- data 中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
<body>
<div id="app">
{{ message }}
<h2> {{ school.name }} {{ school.mobile }} </h2>
<ul>
<li> {{ campus[0] }} </li>
<li> {{ campus[1] }} </li>
<li> {{ campus[2] }} </li>
<li> {{ campus[3] }} </li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"数据对象",
school:{
name:"黑马程序员",
mobile:"000-000-0000"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
本地应用
v-text 指令：设置标签的文本值（textContent）
<body>
<div id="app">
<!-- 默认写法会替换全部内容，使用插值表达式可以替换指定内容 -->
<h2 v-text="message"> 设置标签的文本值 </h2>
<!-- 内部支持写表达式，比如字符串拼接 -->
<h2> {{ message+'：' }} 设置标签的文本值 </h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"文本值"
}
})
</script>
</body>
v-html 指令：设置标签的 innerHTML
<body>
<div id="app">
<!-- v-html 指令如果内容有 html 结构会被解析为标签 -->
<p v-html="message"></p>
<!-- v-text 指令无论内容是什么都会解析为文本 -->
<p v-text="message"></p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// message:"文本值"
message:"<a href='https://www.baidu.com/'>百度</a>"
}
})
</script>
</body>
v-on 指令：为元素绑定事件
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="remindInfo" />
<input type="button" value="双击事件" v-on:dblclick="remindInfo" />
<input type="button" value="鼠标移入事件" v-on:mouseenter="remindInfo" />
<!-- 完整写法是 v-on:事件，可以简写为 @事件 -->
<h1 @click="changeFood"> {{ food }} </h1>
<!-- 事件后面加上 .修饰符，可以对事件进行限制 -->
<input type="text" @keyup.enter="sayHi" />
<input type="button" value="点击" @click="getData(666,'老铁')" />
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西兰花炒蛋"
},
// 绑定的方法定义在 methods 中
methods:{
remindInfo:function(){
alert("显示提示信息");
},
// 方法内部通过 this 关键字可以访问定义在 data 中的数据
changeFood:function(){
// console.log(this.food);
this.food+="好好吃！";
},
// 方法写成函数调用的形式，可以定义形参接收传入的实参
getData:function(p1,p2){
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("Hi");
}
}
})
</script>
</body>
v-bind 指令：为元素绑定属性
<body>
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTitle+'-logo'">
<!-- 完整写法是 v-bind:属性，可以简写为 :属性 -->
<img :src="imgSrc" :title="imgTitle+'-logo'" :class="isActive?'active':''" @click="toggleActive">
<!-- 需要动态的增删 class 建议使用对象的方式 -->
<img :src="imgSrc" :title="imgTitle+'-logo'" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
imgTitle:"黑马程序员",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
v-show 指令：切换元素显示状态（修改 display）
<body>
<div id="app">
<!-- 数据改变之后，对应元素的显示状态会同步更新 -->
<input type="button" value="切换显示状态" @click="changeIsShow" />
<input type="button" value="累加年龄" @click="addAge" />
<!-- v-show 指令的内容都会解析为布尔值，值为 true 元素显示，值为 false 元素隐藏 -->
<img src="http://www.itheima.com/images/logo.png" v-show="isShow">
<img src="http://www.itheima.com/images/logo.png" v-show="age>=18">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
v-if 指令：切换元素显示状态（操纵 dom 元素）
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="toggleIsShow" />
<!-- v-if 指令的值为 true 则元素存在于 dom 树中，值为 false 则元素从 dom 树中移除 -->
<p v-if="isShow">我是一个段落。</p>
<!-- v-show 指令适用于频繁切换元素，v-if 指令则相反，前者切换消耗小 -->
<p v-show="isShow">我是一个段落。</p>
<h2 v-if="temperature>=35">热死了！</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
v-for 指令：根据数据生成列表结构
<body>
<div id="app">
<ul>
<!-- 语法是 (item,index) in data，其中 item 是每项数据，index 是索引 -->
<li v-for="(item,index) in arr"> 黑马程序员校区：{{ index+1 }} {{ item }} </li>
</ul>
<input type="button" value="添加数据" @click="add" />
<input type="button" value="移除数据" @click="remove" />
<!-- 数组经常和 v-for 指令结合使用，数组长度的更新会同步到页面上 -->
<p v-for="item in vegetables" :title="item.name"> {{ item.name }} </p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"糖醋排骨"}
]
},
methods:{
add:function(){
this.vegetables.push({name:"鱼香肉丝"});
},
remove:function(){
this.vegetables.shift();
}
}
})
</script>
</body>
v-model 指令：获取和设置表单元素的值（双向数据绑定）
<body>
<div id="app">
<!-- 绑定的数据会和表单元素的值相关联，同步更新 -->
<input type="text" v-model="message" @keyup.enter="getMessage"/>
<input type="button" value="修改" @click="setMessage" />
<p> {{ message }} </p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "酷丁鱼";
}
}
})
</script>
</body>
- 实现【计数器】功能
<!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>
</head>
<body>
<div id="app">
<button @click="sub"> - </button>
<!-- 3.使用 v-text 指令：将 num 设置给 span 标签 -->
<span> {{ num }} </span>
<!-- 4.使用 v-on 指令：将 add, sub 分别绑定给 +, - 按钮 -->
<button @click="add"> + </button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// 1.data 中定义数据：num
data:{
num:1
},
// 2.methods 中定义方法：add(递增), sub(递减)
methods:{
// 小于 10 递增，否则提示信息
add:function(){
console.log("add");
if(this.num<10)
this.num++;
else
alert("别点了，已经是最大值了！");
},
// 大于 0 递减，否则提示信息
sub:function(){
console.log("sub");
if(this.num>0)
this.num--;
else
alert("别点了，已经是最小值了！");
}
}
})
</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>图片切换</title>
</head>
<body>
<div id="app">
<!-- 3.使用 v-bind 指令：绑定 src 属性 -->
<img :src="imgArr[index]">
<!-- 4.使用 v-on 指令：将 prev, next 分别绑定给 ←, → 按钮 -->
<!-- 5.使用 v-show 指令：切换元素显示状态 -->
<button @click="prev" v-show="index!=0"> ← </button>
<button @click="next" v-show="index!=imgArr.length-1"> → </button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// 1.data 中定义数据：imgArr(图片数组), index(图片索引)
data:{
imgArr:[
"https://c.53326.com/d/file/20200519/eay0rqilkgr.jpg",
"https://c.53326.com/d/file/20200519/2u53jnui1ud.jpg",
"https://c.53326.com/d/file/20200519/uux3ter23kl.jpg",
"https://c.53326.com/d/file/20200519/zyul5tjqi3a.jpg",
"https://c.53326.com/d/file/20200519/zcqloqx4lm3.jpg"
],
index:0
},
// 2.methods 中定义方法：prev(上一张), next(下一张)
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</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>记事本</title>
</head>
<body>
<div id="app">
<h1>小黑记事本</h1>
<!-- 4.使用 v-model 指令：获取用户输入 -->
<!-- 5.使用 v-on 指令：.enter 添加数据 -->
<input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" v-model="inputValue" @keyup.enter="add" />
<ul>
<!-- 3.使用 v-for 指令：生成列表结构 -->
<li v-for="(item,index) in list">
<span> {{ index+1 }}. </span>
<label> {{ item }} </label>
<!-- 6.使用 v-on 指令：点击 × 按钮删除指定内容 -->
<button @click="remove(index)"> × </button>
</li>
</ul>
<!-- 9.使用 v-show 指令：没有数据时，隐藏元素 -->
<p v-show="list.length!=0">
<!-- 7.使用 v-text 指令：统计信息个数 -->
<label> {{ list.length }} items </label>
<!-- 8.使用 v-on 指令：点击 clear 按钮清空所有信息 -->
<button @click="clear"> clear </button>
</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// 1.data 中定义数据：list(任务列表), inputValue(用户输入)
data:{
list:["写代码","吃饭","睡觉"],
inputValue:""
},
// 2.methods 中定义方法：add(新增任务), remove(移除任务), clear(清空)
methods:{
// 把 inputValue 添加到 list 数组中
add:function(){
this.list.push(this.inputValue);
},
// 根据 index 删除对应的 list 数组元素
remove:function(index){
console.log(index);
this.list.splice(index, 1);
},
// 清空 list 数组
clear:function(){
this.list = [];
}
}
})
</script>
</body>
</html>
网络应用
axios：功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用 get 或 post 方法即可发送对应的请求
axios.get(地址?key1=value1&key2=value2&...)
.then(function(response){
...
},function(err){
...
})
axios.post(地址,{key1:value1,key2:value2,...)
.then(function(response){
...
},function(err){
...
})
axios 基本使用
<body>
<input type="button" value="get请求" class="get" />
<input type="button" value="post请求" class="post" />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num(笑话条数,数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function() {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
// then 方法中的回调函数会在请求成功或失败时触发
.then(function(response){
// 通过回调函数的形参可以获取响应内容或错误信息
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名,字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function() {
axios.post("https://autumnfish.cn/api/user/reg",{username:"Jack"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
axios + vue 基本使用
<body>
<div id="app">
<input type="button" value="按钮" @click="getJoke" />
<p> {{ joke }} </p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
/*
接口：随机获取一条笑话
请求地址：https://autumnfish.cn/api/joke
请求方法：get
请求参数：无
响应内容：一条笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"点击按钮，随机获取一条笑话"
},
methods:{
getJoke:function(){
// console.log(this.joke);
// 需要把 this 先保存起来，在回调函数中使用保存的 this 即可
var that = this;
// 网络应用和本地应用的最大区别就是改变了数据来源
axios.get("https://autumnfish.cn/api/joke")
.then(function(response){
// console.log(response);
console.log(response.data);
// axios 回调函数中的 this 已经改变，无法访问到 data 中的数据
// console.log(this.joke);
that.joke = response.data;
},function(err){ })
}
}
})
</script>
</body>
- 实现【天气预报】功能
<!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>
</head>
<body>
<div id="app">
<h1>天气预报</h1>
<!-- 3.使用 v-model 指令：获取用户输入 -->
<!-- 4.使用 v-on 指令：.enter 查询数据 -->
<input autofocus="autofocus" autocomplete="off" placeholder="请输入城市" v-model="city" @keyup.enter="searchWeather" />
<input type="button" value="查询" @click="searchWeather" />
<br />
<!-- 6.使用 v-on 指令：点击 4 个城市查询数据 -->
<small @click="changeCity('北京')"> 北京 </small>
<small @click="changeCity('上海')"> 上海 </small>
<small @click="changeCity('广州')"> 广州 </small>
<small @click="changeCity('深圳')"> 深圳 </small>
<!-- 5.使用 v-for 指令：生成 5 天天气信息的数组 -->
<ul>
<li v-for="item in weatherList">
<p> {{ item.date }} </p>
<p> {{ item.type }} | {{ item.low }} ~ {{ item.high }} | {{ item.fengxiang }} </p>
</li>
</ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
/*
接口：天气接口
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city(查询的城市名称)
响应内容：天气信息
*/
var app = new Vue({
el:"#app",
// 1.data 中定义数据：city(输入城市), weatherList(天气信息的数组)
data:{
city:"",
weatherList:[]
},
// 2.methods 中定义方法：searchWeather(查询天气), changeCity(修改城市)
methods:{
searchWeather:function(){
// console.log("北京");
// console.log(this.city);
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
// console.log(response);
// console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast;
},function(err){ })
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
}
})
</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>音乐播放器</title>
</head>
<body>
<div id="app">
<div class="contanier">
<div class="middle">
<h1>音乐播放器</h1>
</div>
<div class="left_up">
<!-- 1.歌曲搜索 -->
<input type="text" autocomplete="off" v-model="keywords" @keyup.enter="searchMusic" />
<input type="button" value="🔍" @click="searchMusic" />
</div>
<div class="left">
<ul>
<li v-for="item in musicList">
<input type="button" value="🎵" @click="playMusic(item.id)" />
{{ item.name }} -- {{ item.artists[0].name }}
</li>
</ul>
</div>
<div class="right">
<!-- 4.歌曲评论 -->
<dl v-for="item in hotComments">
<img :src="item.user.avatarUrl" />
<dt> {{ item.user.nickname }} </dt>
<dd> {{ item.content }} </dd>
</dl>
</div>
<div class="middle_up">
<!-- 3.歌曲封面 -->
<img :src="musicCover" />
</div>
<div class="right_down">
<!-- 2.歌曲播放 -->
<audio :src="musicUrl" controls autoplay loop></audio>
</div>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
// 1.data 中定义数据
data:{
keywords:"", // 查询的关键字
musicList:[], // 歌曲数组
musicUrl:"", // 歌曲地址
musicCover:"", // 歌曲封面
hotComments:[], // 歌曲评论
},
// 2.methods 中定义方法
methods:{
/*
接口：歌曲搜索
请求地址：https://autumnfish.cn/search
请求方法：get
请求参数：keywords(查询的关键字)
响应内容：歌曲搜索结果
*/
searchMusic:function(){
var that = this;
// 查询歌曲
axios.get("https://autumnfish.cn/search?keywords="+this.keywords)
.then(function(response){
that.musicList = response.data.result.songs;
},function(err){ })
},
/*
接口：歌曲地址获取
请求地址：https://autumnfish.cn/song/url
请求方法：get
请求参数：id(歌曲编号)
响应内容：歌曲url地址
接口：歌曲封面获取
请求地址：https://autumnfish.cn/song/detail
请求方法：get
请求参数：ids(歌曲编号)
响应内容：歌曲详情(包括封面信息)
接口：热门评论获取
请求地址：https://autumnfish.cn/comment/hot?type=0
请求方法：get
请求参数：id(歌曲编号),type固定为0
响应内容：歌曲的热门评论
*/
playMusic:function(id){
var that = this;
// 获取歌曲地址
axios.get("https://autumnfish.cn/song/url?id="+id)
.then(function(response){
that.musicUrl = response.data.data[0].url;
},function(err){ })
// 获取歌曲封面
axios.get("https://autumnfish.cn/song/detail?ids="+id)
.then(function(response){
that.musicCover = response.data.songs[0].al.picUrl;
},function(err){ })
// 获取歌曲评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id)
.then(function(response){
that.hotComments = response.data.hotComments;
},function(err){ })
}
}
})
</script>
</body>
</html>
1697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
