Vue笔记(完结版)
目录一、Vue简介二、Vue基本知识(一)简单知识(二)本地应用(指令)三、axios与Vue四、案例(一)本地应用-计算机案例(二)本地应用-图片切换案例(三)本地应用-记事本案例(四)网络应用-天气查询案例#END(具体可观看b站黑马vue入门版)一、Vue简介1.JavaScript框架2.简化Dom操作3.响应式数据驱动4.Vue实例的作用范围是什么?Vue会管理el选项命中的元素及其内部
目录
一、Vue简介
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
4.Vue实例的作用范围是什么?
Vue会管理el选项命中的元素及其内部的子元素
5.是否可以使用其他的选择器?
可以使用其他选择器,如类选择器,但是建议使用ID选择器
6.是否可以设置其他的dom元素?
可以使用其他双标签,不能使用HTML标签和body标签
二、Vue基本知识
(一)简单知识
1.el挂载点(对应一中的第五点:可以使用其他选择器,如类选择器,但是建议使用ID选择器)
1)代码:
<body>
{{ message }}
<div id="app" class="app">
{{ message }}
<span>{{ message }}</span>
</div>
<!-- 开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//在el命令的元素的内部可以嵌套任意标签
var app = new Vue({
//el: "#app",
//el: ".app",
el: "div",
data: {
message: "今天好冷啊",
},
});
</script>
</body>
2)结果:
2.data:数据对象
1)基本知识
① Vue中用到的数据定义在data中
② data中可以写复杂数据的类型
③ 渲染复杂类型数据时,遵守js语法
2)代码:
<body>
<div id="app" class="app">
{{ message }}
<h2>{{ school.name }} {{ school.mobile }}</h2>
<ul>
<li>{{ campus[0] }}</li>
<li>{{ campus[1] }}</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//在el命令的元素的内部可以嵌套任意标签
var app = new Vue({
el: "#app",
data: {
message: "今天好冷啊",
school: {
name: "武装侦探社",
mobile: "120-1314-520",
},
campus: ["太宰治", "中原中也", "国木田独步"],
},
});
</script>
3)结果:
(二)本地应用(指令)
1.本地应用:内容绑定,事件绑定;显示切换,属性绑定;列表循环,表单元素绑定
2.内容绑定,事件绑定
1)v-text:
① 作用:设置标签的内容(textContent)
② 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
③ 内部支持写表达式
④ 代码:
<body>
<div id="app" class="app">
<h2 v-text="message + '!'">1/20</h2>
<h2 v-text="info + '!'">1/20</h2>
<h2>{{ message +'!' }}1/20</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//在el命令的元素的内部可以嵌套任意标签
var app = new Vue({
el: "#app",
data: {
message: "今天好冷啊!",
info: "今天为什么这么冷?",
},
});
</script>
⑤ 结果:
2)v-html:
① 设置标签的innerHTML
② 内容中有HTML结构会被解析为标签
③ v-text指令无论内容是什么只会解析为文本
④ 解析文本使用v-text,解析html结构使用v-html
⑤ 代码:
<body>
<!-- 2.html结构 -->
<div id="app">
<h2 v-html="content"></h2>
<h2 v-text="content"></h2>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//3.创建Vue实例
var app = new Vue({
el: "#app",
data: {
content: "<a href='https://baidu.com'>为文豪野犬干杯</a>",
},
});
</script>
</body>
⑥ 结果:
3)v-on基础
① 作用:为元素绑定事件
② 事件名不需要写on,指令可以简写为@
③ 绑定的方法定义在methods属性中
④ 方法内部通过this关键字可以访问定义在data中数据
⑤ 代码:
<body>
<!-- 2.html结构 -->
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt" />
<input type="button" value="v-on简写" @click="doIt" />
<input type="button" value="双击事件" @dblclick="doIt" />
<h2 @click="changeFood">{{food}}</h2>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//3.创建Vue示例
var app = new Vue({
el: "#app",
data: {
food: "西红柿炒鸡蛋",
},
methods: {
doIt: () => {
alert("今天你看Vue了吗?");
},
changeFood: function () {
this.food += "好好吃!";
},
},
});
</script>
⑥ 结果:(依次为 三个按钮点击结果,以及点击文本的事件)
补充:
① 事件绑定的方法写成函数调用的形式,可以传入自定义参数
② 定义方法时需要定义形参来接受传入的实参
③ 事件的后面跟上 .修饰符 可以对事件进行限制
④ .enter可以限制触发的案件为回车
⑤ 事件修饰符有很多种
⑥ 代码:
<body>
<!-- 2.html结构 -->
<div id="app">
<input type="button" value="点击" v-on:click="doIt(666,'老铁')" />
<!-- 事件修饰符 .enter 就属于一个事件修饰符-->
<input type="text" @keyup.enter="sayHi" />
<input type="button" value="双击事件" @dblclick="doIt" />
</div>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//3.创建Vue示例
var app = new Vue({
el: "#app",
data: {
food: "西红柿炒鸡蛋",
},
methods: {
doIt: (p1, p2) => {
console.log(p2 + "做IT" + p1);
},
sayHi: function () {
alert("hi");
},
},
});
</script>
⑦ 结果:(从左往右的事件)
4)v-show指令
① 作用:根据表达式的真假切换元素的显示状态
② 原理:修改元素的display,实现显示和隐藏
③ 指令后面的内容,最终都会解析为布尔值
④ 值为true元素显示,值为false元素隐藏
⑥ 数据改变之后,对应元素的显示状态会同步更新
⑦ 代码:
<body>
<div id="app">
<button @click="changeIsShow">切换显示图片状态</button>
<button @click="addAge">累加年龄</button>
<img v-show="isShow" src="1.jpg" alt="" srcset="" />
<img v-show="age>=20" src="1.jpg" alt="" srcset="" />
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
age: 17,
},
methods: {
changeIsShow: function () {
this.isShow = !this.isShow;
},
addAge: function () {
this.age++;
},
},
});
</script>
⑧ 结果:
5)v-if指令
① 作用:根据表达式的真假切换元素的显示状态
② 原理:通过操纵dom元素来切换显示状态
③ 表达式的值为true,元素存在于dom树中;为false从dom树中移除
④ 频繁的切换v-show,反之使用v-if,前者的切换消耗小
⑤ 代码:
<body>
<div id="app">
<button @click="toggleIsShow">点击显示或隐藏</button>
<h1 v-if="isShow">今天吃草莓!</h1>
<h2 v-show="isShow">v-show修饰</h2>
<h2 v-if="temperature>=30">好热!</h2>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
temperature: 32,
},
methods: {
toggleIsShow: function () {
this.isShow = !this.isShow;
},
},
});
</script>
⑥ 结果:
6)v-bind指令(设置元素的属性,属性都写在元素的内部)
v-bind:属性+表达式
① 作用:为元素绑定属性
② 简写直接省略v-bind,只保留 :属性名
③ 需要动态的增删class建议使用对象的方式
④ 代码:
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="" />
<br />
<!-- 更为常用 -->
<img
:src="imgSrc"
alt=""
:title="imgTitle+'!!!'"
:class="isActive?'active':''"
@click="toggleActive"
/>
<br />
<!-- 对象的写法
:class="{active:isActive}" 意味着active的值取决于isActive
-->
<img
:src="imgSrc"
alt=""
:title="imgTitle+'!!!'"
:class="{active:isActive}"
@click="toggleActive"
/>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "1.jpg",
imgTitle: "玉桂狗",
isActive: false,
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
},
},
});
</script>
⑤ 结果:当鼠标移动到图片上时会有文字显示
7)v-for
① 根据数据生成列表结构
② 经常和数组结合使用
③ 语法是(item,index)in 数据名称(item代表每一项,index代表下标)
④ item和index可以结合其他的指令一起使用
⑤ 数组长度的更新会同步到页面上,是响应式的
⑥ 代码:
<body>
<div id="app">
<ul>
<h2 v-for="(it,index) in arr">{{ index+1 }}.今天{{ it }}</h2>
</ul>
<button @click="add">添加蔬菜</button>
<button @click="remove">删除蔬菜</button>
<h2 v-for="item in vagetables" v-bind:title="item.name">{{item.name}}</h2>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["吃草莓!", "天气真好", "超happy!ovo"],
vagetables: [
{ name: "土豆" },
{ name: "西红柿" },
{ name: "藕" },
{ name: "小白菜" },
],
},
methods: {
add: function () {
this.vagetables.push({ name: "茄子" });
},
remove: function () {
this.vagetables.shift();
},
},
});
</script>
⑦ 结果:
8)v-model(双向数据绑定)
① 作用:便捷的设置和获取表单元素的值
② 绑定的数据会和表单元素值相关联
③ 绑定的数据 <——> 表单元素的值
④ 代码:
<body>
<div id="app">
<input
type="button"
value="点击修改message"
@click="setMessage('为什么会这么饿')"
/>
<!-- 在文本框里输入文字后回车 -->
<input type="text" v-model="message" @keyup.enter="getMessage" />
<h2>{{ message }}</h2>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "好饿",
},
methods: {
getMessage: function () {
alert(this.message);
},
setMessage: function (p1) {
this.message = p1;
},
},
});
</script>
</html>
⑤ 结果:
三、axios与Vue
1.axios
① 必须先导入才能使用
② 使用get或post即可发送对应的请求
③ then方法中的回调函数会在请求成功或失败时触发
④ 通过回调函数的形参可以获取响应内容或错误信息
⑤ 代码:
<body>
<input type="button" value="get请求" class="get" />
<input type="button" value="post请求" class="post" />
</body>
<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(
(value) => {
console.log(value);
},
(reason) => {
console.log(reason);
}
);
};
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = () => {
axios
.post("https://autumnfish.cn/api/user/reg", { username: "sehun" })
.then(
(value) => {
console.log(value);
},
(reason) => {
console.warn(reason);
}
);
};
</script>
⑥ 结果:
2.将axios和vue结合
① axios回调函数中的this已经改变,无法访问到data中数据
② 把this保存起来,回调函数中直接使用
③ 和本地应用的最大区别就是改变了数据来源
④ 代码:
<body>
<div id="app">
<input type="button" value="获取笑话" class="get" @click="getJoke" />
<h2>{{joke}}</h2>
</div>
</body>
<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el: "#app",
data: {
joke: "这是一条笑话",
},
methods: {
getJoke: function () {
var that = this; //防止后序this发生改变
axios.get("https://autumnfish.cn/api/joke").then(
(value) => {
that.joke = value.data;
},
(reason) => {
console.warn(reason);
}
);
},
},
});
</script>
⑤ 结果:
四、案例
(一)本地应用-计算机案例
1.代码:
1)html结构和vue
<body>
<!-- html结构 -->
<div id="app">
<!-- 计数器功能区域 -->
<div class="input_num">
<button class="left" @click="sub">-</button>
<div class="center">{{ num }}</div>
<button class="right" @click="add">+</button>
</div>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
//创建vue实例
var app = new Vue({
el: "#app",
data: {
num: 0,
},
methods: {
add: function () {
if (this.num < 10 && this.num >= 0) {
this.num++;
} else {
alert("已经增加到达极限了哦!");
}
},
sub: function () {
if (this.num <= 10 && this.num > 0) {
this.num--;
} else {
alert("已经减小到达极限了哦!");
}
},
},
});
</script>
2)css样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.input_num {
margin: 100px auto;
display: flex;
justify-content: space-between;
width: 220px;
height: 60px;
line-height: 60px;
border-radius: 5px;
overflow: hidden;
}
.input_num .left,
.input_num .right {
display: inline-block;
width: 70px;
border: none;
background-color: lightcoral;
text-align: center;
font-size: 18px;
}
.input_num .center {
display: inline-block;
text-align: center;
width: 100px;
background-color: pink;
font-size: 20px;
}
2.结果:
(二)本地应用-图片切换案例
1.代码:
1)html结构和vue
<body>
<div id="app" class="box">
<img :src="imgArr[index]" alt="" />
<div class="pre" @click="prev" v-show="index != 0"></div>
<div class="next" @click="next" v-show="index < imgArr.length - 1"></div>
</div>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgArr: [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F03%2F20170103130526_ytKBz.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=ebb1e89f026809c5c362b2846d807ba3",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fcc1916b4-9768-cb53-1d67-e7b273f818cd%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=cdb9cf0657407ef7f3c5670471b60faf",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F3f05a7ae-521c-dc4b-c87a-69624597ec82%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=0388ae0caa02d4ebb7736fa622e5d3c3",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F24%2F20210124164813_2296b.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=22ea13320dd525d8d8ac5c59a1b75573",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F19%2F20200219234319_lccfj.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645513923&t=47dbd2728ed6f82ca8f7b41b07f818ee",
],
index: 0,
},
methods: {
prev: function () {
this.index--;
},
next: function () {
this.index++;
},
},
});
</script>
2)css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
width: 800px;
height: 600px;
margin: 100px auto;
}
.box img {
position: absolute;
top: 0;
left: 0;
display: block;
width: inherit;
height: inherit;
object-fit: cover;
}
.box .pre,
.box .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
z-index: 1;
cursor: pointer;
background-color: rgba(87, 85, 85, 0.4);
}
.box .pre {
left: 10px;
}
.box .next {
right: 10px;
}
2.结果:
(三)本地应用-记事本案例
1.代码:
1)html结构和vue
<body>
<!-- 主体区域 -->
<section id="app">
<!-- 输入框 -->
<header>
<h1>小bin记事本</h1>
<!-- v-model双向绑定数据 v-on为输入栏绑定事件 -->
<input
v-model="inputMes"
@keyup.enter="add"
class="search"
type="text"
autofocus="autofocus"
autocomplete="off"
placeholder="请输入任务"
/>
</header>
<div class="center">
<ul>
<!-- v-for 根据数组生产列表结构
mouseover:鼠标移入事件 mouseleave:鼠标移出事件
-->
<li
v-for="(item,index) in list"
@mouseover="isShow"
@mouseleave="noShow"
>
<div class="center_id">{{ index+1 }}</div>
<div class="center_mess">{{item}}</div>
<div class="center_r" v-show="show" @click="remove(index)">×</div>
</li>
</ul>
</div>
<!-- 底部 -->
<!--没有数据时,隐藏 底部footer或者只隐藏里面的子盒子-->
<footer>
<div class="footer_left" v-if="list.length != 0">
<!-- 通过lenth方法获取数组长度 -->
<span>{{list.length}}</span> items left
</div>
<div class="footer_right" @click="clear" v-show="list.length != 0">
Clear
</div>
</footer>
</section>
</body>
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
list: [
"雨下整夜我的爱",
"溢出就像雨水",
"院子落叶",
"和我的思念",
"厚厚一叠",
],
inputMes: "",
show: false,
},
methods: {
add: function () {
this.list.push(this.inputMes);
},
//是否显示 x 符号
isShow: function () {
this.show = true;
},
noShow: function () {
this.show = false;
},
remove: function (index) {
this.list.splice(index, 1);
//index代表删第几个 1代表删一次
},
clear: function () {
this.list = [];
},
},
});
</script>
2)css样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
header {
margin: 0px auto;
width: 400px;
height: 150px;
margin-top: 100px;
}
header h1 {
height: 100px;
font-size: 46px;
font-family: serif;
line-height: 100px;
text-align: center;
background-color: #fff;
}
header .search {
height: 50px;
width: 400px;
font-size: 14px;
text-indent: 1em;
border: 0.5px solid #bdbdbb;
outline: none;
}
.center {
margin: 0 auto;
width: 400px;
min-height: 0px;
border: 1px solid #bdbdbd;
border-top: none;
border-bottom: none;
}
.center li {
border-bottom: 1px solid #bdbdbd;
width: 400px;
height: 50px;
line-height: 50px;
font-size: 20px;
font-family: "Fangsong";
cursor: pointer;
}
footer {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 400px;
height: 50px;
font-size: 15px;
line-height: 50px;
color: #797878;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid #bdbdbd;
border-top: none;
}
footer .footer_left {
width: 170px;
text-align: left;
padding-left: 25px;
}
footer .footer_right {
cursor: pointer;
font-size: 18px;
width: 70px;
border-left: 1px solid #bdbdbd;
border-top: none;
text-align: center;
}
.center .center_id {
display: inline-block;
width: 60px;
text-align: center;
}
.center .center_mess {
display: inline-block;
width: 260px;
text-align: left;
font-size: 24px;
font-weight: 500;
}
.center .center_r {
display: inline-block;
width: 60px;
text-align: center;
font-size: 14px;
}
</style>
2.结果:
(四)网络应用-天气查询案例
1.代码:
1)html结构
<!-- 1.开发环境版本,包含了有帮助的命令警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="app">
<h1 class="header">天 气 预 报</h1>
<main>
<input
type="text"
v-model="city"
@keyup.enter="searchWeather"
placeholder="请输入查询城市"
class="search"
/>
<input class="btn" type="button" value="搜 索" />
<div class="main_city">
<span @click="changeCity('北京')">北京</span>
<span @click="changeCity('上海')">上海</span>
<span @click="changeCity('广州')">广州</span>
<span @click="changeCity('深圳')">深圳</span>
</div>
</main>
<footer>
<ul>
<li v-for="item in weatherList">
<div class="li_top">{{ item.type }}</div>
<div class="li_center">{{ item.low }} ~ {{ item.high }}</div>
<div class="li_bot">{{ item.date }}</div>
</li>
</ul>
</footer>
</div>
</body>
<script src="17.main.js"></script>
2)css样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.app {
width: 900px;
height: 470px;
margin: 200px auto;
}
.app h1 {
height: 110px;
line-height: 110px;
text-align: center;
font-size: 50px;
font-family: cursive;
}
.app main {
position: relative;
margin: 0 auto;
width: 800px;
height: 80px;
}
main .search {
position: absolute;
top: 0;
left: 0;
width: 690px;
height: 50px;
font-size: 15px;
border: none;
border: 1px solid rgb(75, 165, 201);
border-right: none;
text-indent: 1em;
outline: none;
}
main .btn {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 110px;
border: none;
background-color: rgb(75, 165, 201);
color: #fff;
font-size: 18px;
cursor: pointer;
}
main .main_city {
position: absolute;
bottom: 0;
left: 0;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.main_city span {
margin: 0 10px 0 0;
color: gray;
cursor: pointer;
}
.app footer {
width: inherit;
height: 170px;
margin-top: 80px;
}
footer li {
display: inline-block;
width: 180px;
height: inherit;
}
li .li_top {
width: inherit;
height: 70px;
font-size: 36px;
text-align: center;
line-height: 70px;
color: orange;
}
li .li_center {
width: inherit;
height: 50px;
line-height: 50px;
text-align: center;
color: orange;
font-size: 14px;
font-weight: 600;
}
li .li_bot {
width: inherit;
height: 45px;
line-height: 45px;
text-align: center;
color: gray;
font-size: 14px;
}
</style>
3)vue
/**
* 请求地址:http://wthrcdn.etouch.cn/weather_mini
* 请求方法:get
* 请求参数:city(城市名)
* 相应内容:天气信息
*
* 1. 点击回车
* 2. 查询数据
* 3. 渲染数据
*
* ① 应用的逻辑代码建议与页面分离,使用单独的js文件编写
* ② axios回调函数中this指向改变了,需要额外保存this
* ③ 服务器返回的数据比较复杂时,获取时要注意层级结果
*
*
* ① 自定义参数可以让代码的复用性更高
* ② methods中定义的方法内部,可以通过this关键字点出其他的方法
*/
var app = new Vue({
el: "#app",
data: {
city: "",
weatherList: [],
},
methods: {
searchWeather: function () {
//调用接口
//保存this
var that = this;
axios
.get("http://wthrcdn.etouch.cn/weather_mini?city=" + that.city)
.then((value) => {
that.weatherList = value.data.data.forecast;
})
.catch((reason) => {
console.warn(reason);
});
},
changeCity: function (city) {
this.city = city;
this.searchWeather();
},
},
});
2.结果:
#END(具体可观看b站黑马vue入门版)
更多推荐
所有评论(0)