vue入门
发表于2023-07-21|更新于2023-07-24
|阅读量:
1.vue基础
概念：Vue是一种流行的前端JavaScript框架，用于构建交互式的用户界面。它是一种开源框架，由尤雨溪（Evan You）开发并维护。Vue的目标是通过简单的API和响应式数据绑定来帮助开发者构建现代化的单页面应用程序
vue官方文档：https://cn.vuejs.org
demo1：入门案例——导入依赖
导入开发版本的vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <body>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue！"
}
})
</script>
</body>
|
也可导入vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!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>Vue基础</title>
<!-- 导入Vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
|
demo2——el挂载点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- Vue实例的作用范围是什么？ -->
<!-- Vue会管理el选项命中元素以及其内部的后代元素。 -->
app元素外部：{{ message }}
<div id="app_1">
app元素内部:{{ message }}
<br>
<span>app元素内部的sapn标签下：{{ message }}</span>
</div>
<script>
var app = new Vue({
el:'#app_1',
data:{
message:"Hello Vue!"
}
})
</script>
<br>
<!-- 是否可以使用其他的选择器？ -->
<!-- 可以，但是推荐使用id选择器，因为其他选择器都不唯一。 -->
<div class="app_2">
{{ message }}
</div>
<script>
var app = new Vue({
el:'.app_2',
data:{
message:"现在使用的class选择器"
}
})
</script>
<br>
<!-- 是否可以设置其他的DOM元素呢？ -->
<!-- 可以，可以使用其他的双标签，单标签不能、html和body之上也不能挂载。 -->
<h2 id="app_3">
{{ message }}
</h2>
<script>
var app = new Vue({
el: '#app_3',
data:{
message:"这是H2元素"
}
})
</script>
</body>
</html>
|
demo3：认识Vue实例——data数据对象
2.vue本地应用
通过vue实现常见的网页效果
| Vue指令 |
作用 |
| v-text |
设置标签的内容（textContent） |
| v-html |
设置元素的innerHTML |
| v-on |
为元素绑定事件 |
| v-show |
根据真假切换元素的显示状态 |
| v-if |
根据表达式的真假切换元素的显示状态 |
| v-bind |
为元素绑定属性 |
| v-for |
根据数据生成列表结构 |
| v-model |
便捷的设置和获取表单元素的值 |
v-text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- v-text
v-text指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达式{{}}，可以替换指定内容
-->
<div id="app">
<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
<h2>{{ message }}</h2>
<h2 v-text="message">深圳</h2>
<h2>{{ message }}深圳</h2>
<h2 v-text="message + '!!'"></h2>
<h2>{{ message + '!!'}}深圳</h2>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"黑马程序员",
info:"前端与移动教研部"
}
})
</script>
</body>
</html>
|
v-html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- v-html
v-html指令的作用是：设置元素的innerHTML；
内容中有html结构会被解析为标签；
v-text指令无论内容是什么，只会解析为文本。
-->
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
// content:"黑马程序员"
content: "<a href='http://www.itheima.com'>黑马程序员</a>"
}
})
</script>
</body>
</html>
|
v-on
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- v-on指令
v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
-->
<div id="app">
<input type="button" value="事件绑定-点击" v-on:click="dolt">
<input type="button" value="事件绑定-双击" v-on:dblclick="dolt">
<!-- 简写 -->
<input type="button" value="事件绑定-简写点击" @click="dolt">
<h2 @click="change">{{ food }}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西蓝花炒鸡蛋"
},
methods:{
dolt:function(){
alert("做IT");
},
change:function(){
// console.log(this.food);
this.food += "好好吃！"
}
}
})
</script>
</body>
</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">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<!--
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
事件的后面跟上.修饰符可以对事件进行限制，例如.enter可以限制触发的按键为回车
-->
<div id="app">
<input type="button" value="点击" @click="doIt(666)">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el:'#app',
methods:{
doIt:function(p1){
console.log("做It");
console.log(p1);
},
sayHi:function(){
alert("吃了没");
}
}
})
</script>
</body>
</html>
|
v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- v-show
v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素为隐藏
-->
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="IsShow" src="1.png" alt="">
<br>
<span>{{ age }}</span>
<input type="button" value="年龄age增加" @click="changeAge">
<img v-show="age >= 18" src="1.png" alt="">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
IsShow:false,
age:17
},
methods:{
changeIsShow:function(){
this.IsShow = ! this.IsShow;
},
changeAge:function(){
this.age++;
}
}
});
</script>
</body>
</html>
|
v-if
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- v-if指令
v-if指令的作用是根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中；表达式的值为false，从dom树中移除。
-->
<div id="app">
<button @click="ChangeShow">切换状态</button>
<p v-if="IsShow">我是一个p标签，由v-if控制</p>
<p v-show="IsShow">我是一个p标签，由v-show控制</p>
<p v-if="temperature >= 35">热死了！</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
IsShow:true,
temperature:40
},
methods:{
ChangeShow:function(){
this.IsShow = !this.IsShow;
}
}
});
</script>
</body>
</html>
|
v-bind
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <!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>
<script src="vue.js"></script>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- v-bind指令
v-bind指令的作用是为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留 :属性名
-->
<div id="app">
全写：v-bind:src
<img v-bind:src="imgSrc" v-bind:title="imgTitle" alt="">
<br>
简写 ：src
<img :src="imgSrc" :title="imgTitle + '!!!!'" alt="">
<br>
添加类_三元表达式
<button @click="toggleActive">点击我改变class属性</button>
<img :src="imgSrc" :title="imgTitle + '!!!!'" :class="isActive?'active':''" alt="">
<br>
添加类_对象方式
<button @click="toggleActive">点击我改变class属性</button>
<img :src="imgSrc" :title="imgTitle + '!!!!'" :class="{active:isActive}" alt="">
</div>
<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>
</html>
|
v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!--
v-for指令的作用是根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
-->
<div id="app">
<ul>
<li v-for="item in Array">你好,{{ item }}</li>
</ul>
<h2 v-for="item in vegetables" :title="item.name">{{ item.name }}</h2>
<button @click="add">点我添加</button>
<button @click="remove">点我移除</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
Array:["张三","李四","王五","马六","二蛋"],
vegetables:[
{name:"葱花炒蛋"},
{name:"番茄炒蛋"}
]
},
methods:{
add:function(){
this.vegetables.push({ name:"韭菜炒蛋"});
},
remove:function(){
// 移除最左边的一个
this.vegetables.shift();
}
}
})
</script>
</body>
</html>
|
v-model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!--
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
-->
<div id="app">
<input type="text" v-model="message" @keyup.enter="getMessage">
<h2>{{ message }}</h2>
<input type="button" value="点我修改" @click="setMessage">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:"黑马程序员"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "111";
}
}
});
</script>
</body>
</html>
|
界面1：计数器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- 计数器
创建Vue示例时：el（挂载点）、data（数据）、methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是设置元素的文本值，简写为{{}}
-->
<div class="input-num" id="app">
<button @click='reduce'>-</button>
<span>{{ num }}</span>
<button @click='add'>+</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
reduce:function(){
console.log("reduce")
if(this.num == 1){
alert("不能为0")
}
else{
this.num--;
}
},
add:function(){
console.log("add")
if(this.num>=9){
alert("不能超过10个")
}
else{
this.num++;
}
}
}
});
</script>
</body>
</html>
|
界面2：图片切换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!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>
<script src="vue.js"></script>
</head>
<body>
<!-- 图片切换
列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
-->
<div id="app">
<img :src="imgArray[index]" alt="">
<a href="#" @click="prev" v-show="index>0">上一张</a>
<a href="#" @click="next" v-show="index<imgArray.length-1">下一张</a>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
imgArray:["https://img20.360buyimg.com/pop/s590x470_jfs/t1/222408/26/6055/99082/61b997c0Ead36013d/9b2da06b3f438624.jpg.webp",
"https://img14.360buyimg.com/pop/s590x470_jfs/t1/208171/7/13900/69634/61c96765E6e65374c/642ed952f9778144.jpg.webp",
"https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f4/a10ab487/cr/s/q.jpg",
"https://img12.360buyimg.com/pop/s590x470_jfs/t1/205354/16/17988/82004/61b1dc96Ee600f3f3/9ffa616349105df0.png.webp"
],
index:0,
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
});
</script>
</body>
</html>
|
界面3：小黑记事本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <!--
列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式
-->
<!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>
<script src="vue.js"></script>
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑笔记本</h1>
<input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new_todo">
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="to_list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}</span>
<label>{{ item }}</label>
<button @click="remove(index)" class="destory">×</button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo_count" v-if="list.length!=0">
<strong>{{ list.length }}</strong>
items left
</span>
<button @click="clear" class="clear_completed" v-show="list.length!=0">Clear</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
</footer>
<!-- JS -->
<script>
var app = new Vue({
el:'#todoapp',
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习", //用来获取用户输入的内容
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("1")
this.list.splice(index,1);
},
clear:function(){
this.list = [];
}
}
})
</script>
</body>
</html>
|
3.vue网络应用
axios：功能强大的网络请求库，先导入再使用。使用get和post方法发送对应的请求，then方法中的回调函数会在请求成功或失败时触发，通过回调函数的形参可以获取相响应地址的内容或错误信息。
axios官网文档：http://www.axios-js.com/zh-cn/docs/
模板：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25-网络应用- axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<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(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:"阿香"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
|
axios与vue结合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <!--
axios回调函数中的this已经改变，无法访问到data中数据，
把this保存起来，回调函数中直接使用保存的this的变量即可。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26-网络应用- axios与vue结合使用</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</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>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app=new Vue({
el:"#app",
data:{
joke:"笑话显示区域",
},
methods:{
getJoke:function(){
console.log(this.joke);
var that=this;
axios.get("https://autumnfish.cn/api/joke")
.then(function(response){
console.log(response);
console.log(response.data);
console.log(this.joke);
that.joke=response.data;
},function(err){
console.log(err);
})
}
}
})
</script>
</body>
</html>
|
界面4：查天气
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| <!-- 查询天气的应用 -->
<!--
回车查询
按下回车（v-on .enter）
查询数据（axios接口 v-model）
渲染数据（v-for 数组 that）
天气接口：
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city（查询城市名）
响应内容：天气信息
点击查询
点击城市（v-on 自定义参数）
查询数据（this关键字）
渲染数据
-->
<!--
应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了，需要额外的保存一份
-->
<!--
自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法
-->
<!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>
<link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\index.css">
<link rel="stylesheet" href="快速入门Vue.js资料\04-源代码\demo-天知道\css\reset.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="快速入门Vue.js资料\04-源代码\demo-天知道\img\logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
<button class="input_sub" @click="searchWeather">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
<!-- 天气类型 -->
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 自己的js -->
<script>
var app = new Vue({
el:'#app',
data:{
city:"",
weatherList:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(
function(response){
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast;
},
function(err){
console.log(err);
}
)
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
}
})
</script>
</body>
</html>
|
4.vue综合实际
界面5：音乐播放器
1.歌曲搜索
2.歌曲播放
3.歌曲封面
4.歌曲评论
5.播放动画
6.mv播放
歌曲搜索
- 按下回车(v-on .enter)
- 查询数据(axios 接口 v-model )
- 渲染数据(v-for 数组 that)
- 点击播放(v-on 自定义参数)
点击播放按钮：播放歌曲的本质就是设置歌曲的src，切换歌曲就是更换不同的src，歌曲的地址从network查看，歌曲地址是通过接口获取到的，获取歌曲地址后找到歌曲播放地址，将播放地址存到data的musicUrl字段中，再传给给audio标签；
注：点击时需要传入参数，从接口获得的歌曲的点击事件才会才会被绑定。
- 歌曲地址获取：
根据接口确定一个传递的参数（歌曲id），搜索出的歌曲时服务器返回的结果数组中每一项都有歌曲id，不同歌曲id不同，但查询逻辑是一样的；（总：接口调用，把所需的参数传过去）
- 歌曲地址设置(v-bind)
data中增加歌曲属性，歌曲id依赖与歌曲的搜索结果，v-bind绑定到播放条中。
歌曲封面
播放动画
- 监听音乐播放(v-on play)
核心：增删一个类
播放时碟片旋转，暂停时停时旋转，检测动画的播放状态，在对应的事件中增删类名，
- 监听音乐暂停(v-on pause)
- 操纵类名(v-bind 对象)
audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假
播放mv
- mv图标显示(v-if)
- mv地址获取
- 遮罩层
- mv地址设置
源码地址：
本篇文章用于作者本人学习回顾时使用。
