Vue基础快速入门

北依雪

于 2021-06-20 14:52:54 发布

阅读量116

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/BeiYixue/article/details/118069657

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue基础

第一个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>Vue基础</title>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!"
            }
        })
    </script>
</body>

</html>

导入开发版本的Vue.js

创建Vue实例对象，设置el属性和data属性

使用简洁的模板语法把数据渲染到页面上

el挂载点

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

<!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>el挂载点</title>
</head>

<body id="body">
    {{ message }}
    <h2 id="app" class="app">
        {{ message }}
        <span> {{ message }} </span>
    </h2>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            // el:".app",
            data: {
                message: "北依雪"
            }
        })
    </script>
</body>

</html>

el是用来设置Vue实例挂载（管理）的元素

Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用ID选择器

可以使用其他的双标签，不能使用HTML和BODY

data数据对象

<!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>data数据对象</title>
</head>

<body id="body">
    <div id="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@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "北依雪",
                school: {
                    name: "Tong学院",
                    mobile: "17640324505"
                },
                campus: ["大连校区", "杭州校区", "沈阳校区"]
            }
        })
    </script>
</body>

</html>

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

本地应用

通过Vue实现常见的网页效果

学习Vue指令，以案例巩固知识点

Vue指令指的是，以 v- 开头的一组特殊语法

内容绑定，事件绑定

v-text
v-html
v-on基础

1、v-text

设置标签的文本值（textContent）

<!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>v-text指令</title>
</head>

<body id="body">
    <div id="app">
        <h2 v-text="message+'！'">先生</h2>
        <h2 v-text="info">学院</h2>
        <h2>{{ message +'！'}}先生</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "北依雪",
                info: "Tong"
            }
        })
    </script>
</body>

</html>

v-text指令的作用是：设置标签的内容（textContent）

默认写法会替换全部内容，使用 差值表达式{{}} 可以替换指定内容

内部支持写表达式

2、v-html

设置标签的innerHTML

<!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>v-html指令</title>
</head>

<body id="body">
    <!-- 2. html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 3. 创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                // content: "北依雪"
                content: "<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</body>

</html>

v-html指令的作用是：设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本

解析文本使用v-text，需要解析html结构使用v-html

3、v-on基础

为元素绑定事件

<!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>v-on指令基础</title>
</head>

<body id="body">
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doBest">
        <input type="button" value="v-on简写" @click="doBest">
        <input type="button" value="双击事件" @dblclick="doBest">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 3.创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                food: "鱼香肉丝"
            },
            methods: {
                doBest: function () {
                    alert("做到最好");
                },
                changeFood: function () {
                    // console.log(this.food);
                    this.food += "正在料理中……"
                }
            }
        })
    </script>
</body>

</html>

v-on指令的作用是：为元素绑定事件

事件名不需要写on

指令可以简写为 @

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中数据

计数器

data中定义数据：比如num
methods中添加两个方法：比如add（递增），sub（递减）
使用v-text将num设置给span标签
使用v-on将add、sub分别绑定给**+、-**按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示

效果图

<!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="./css/index.css" />
</head>

<body>
    <!-- html结构 -->
    <div id="app">
        <!-- 计数器功能区域 -->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
        <img src="./img/logo.jpg" width="100px" alt="计数器" />
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 编码 -->
    <script>
        // 创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    // console.log('add');
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert('请勿继续点击，已经最大了');
                    }
                },
                sub: function () {
                    console.log('sub');
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert('请勿继续点击，已经最小了');
                    }
                }
            }
        })
    </script>
</body>

</html>

创建Vue示例时：el（挂载点）、data（数据）、methods（方法）
v-on指令的作用是绑定事件，简写为**@**
方法中通过this，关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为**{{}}**
v-html指令的作用是：设置元素的innerHTML

显示切换，属性绑定

v-show
v-if
v-bind

1、v-show

根据表达值的真假，切换元素的显示和隐藏

<!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>v-show指令</title>
</head>

<body id="body">
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="./img/logo.jpg" alt="图片">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>

</html>

v-show指令的作用是：根据真假切换元素的显示状态

原理是修改元素的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

2、v-if

根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

<!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>
</head>

<body id="body">
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">北依雪</p>
        <p v-show="isShow">北依雪 v-show修饰</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

v-if指令的作用是：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中；为false，从dom树中移除

频繁的切换v-show，反之使用v-if，前者的切换消耗小

3、v-bind

设置元素的属性（比如：src、title、class）

<!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>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body id="body">
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <!-- 常用 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'先生'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <!-- 推荐以下方式写 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'先生'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./img/demo1.jpg",
                imgTitle: "北依雪",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
</body>

</html>

v-bind指令的作用是：为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind，只保留 :属性名

需要动态的增删class建议使用对象的方式

图片切换

定义图片数组
添加图片索引
绑定src属性
图片切换逻辑
显示状态切换

效果图

<!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="./css/index.css" />
</head>

<body>
    <div id="mask">
        <div class="center">
            <h2 class="title">
                背景图
            </h2>
            <!-- 图片 -->
            <img :src="imgArr[index]" alt="" />
            <!-- 左箭头 -->
            <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
                <img src="./img/prev.png" alt="" />
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)" v-show="index&lt;imgArr.length-1" @click="next" class="right">
                <img src="./img/next.png" alt="" />
            </a>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./img/img1.jpg",
                    "./img/img2.jpg",
                    "./img/img3.jpg",
                    "./img/img4.jpg",
                    "./img/img5.jpg",
                    "./img/img6.jpg",
                    "./img/img7.jpg",
                    "./img/img8.jpg",
                    "./img/img9.jpg"
                ],
                index: 0
            },
            methods: {
                prev() {
                    this.index--;
                },
                next() {
                    this.index++;
                }
            }
        });
    </script>

</body>

</html>

列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

列表循环，表单元素绑定

v-for
v-on补充
v-model

1、v-for

根据数据生成列表结构

示例图

<!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>v-for指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item, index) in arr">
                {{ index + 1 }} 姓名：{{ item }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" :title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/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>

</html>

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是 (item, index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

2、v-on补充

传递自定义参数，事件修饰符

示例图

<!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>v-on指令补充</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt('北依雪','易寒岚')">
        <input type="text" @keyup.enter="love">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log("立马行动");
                    console.log(p1);
                    console.log(p2);
                },
                love: function () {
                    alert("你好呀~");
                }
            },
        })
    </script>
</body>

</html>

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

3、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>v-model指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="修改message" @click="setMessage">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/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>

</html>

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值

记事本

1、新增

生成列表结构（v-for数组）
获取用户输入（v-model）
回车，新增数据（v-on .enter 添加数据）

效果图——新增

v-for指令的作用
v-model指令的作用
v-on指令，事件修饰符
通过审查元素快速定位

2、删除

点击删除指定内容（v-on splice 索引）

效果图——删除

数据改变，和数据绑定的元素同步改变
事件的自定义参数
splice方法的作用

3、统计

统计信息个数（v-text length）

示例图——统计

基于数据的开发方式
v-text指令的作用

4、清空

点击清除所有信息（v-on 清空数组）

示例图——清空

基于数据的开发方式

5、隐藏

没有数据时，隐藏元素（v-show v-if 数组非空）

示例图——隐藏

总结：

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如**.enter**
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入框 -->
        <header class="header">
            <h1>北依雪の记事本</h1>
            <input v-model="imputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
                class="new-todo" />
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item, index) in list">
                    <div class="view">
                        <span class="index">{{ index + 1 }}</span>
                        <label>{{ item }}</label>
                        <button class="destroy" @click="remove(index)"></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 v-show="list.length!=0" class="clear-completed" @click="clear">
                Clear
            </button>
        </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
        <p>
            <img src="./img/logo.jpg" alt="" width="100px" />
        </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#todoapp",
            data: {
                list: ["学习Spring", "睡觉"],
                imputValue: "吃午饭"
            },
            methods: {
                add: function () {
                    this.list.push(this.imputValue);
                },
                remove: function (index) {
                    // console.log("删除");
                    // console.log(index);
                    this.list.splice(index, 1);
                },
                clear: function () {
                    this.list = [];
                }
            }
        });
    </script>
</body>

</html>

网络应用

Vue结合网络数据开发应用

Axios网络请求库

功能强大的网络请求库

示例图

<!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>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: "Yixue" })
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err);
                })
        }
    </script>
</body>

</html>

Axios必须先导入才可以使用

使用get或post方法即可发送对应的请求

then方法中的回调函数会在请求成功或失败时触发

通过回调函数的形参可以获取响应内容，或错误信息

Axios+Vue

Axios如何结合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>Axios+Vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/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;
                    axios.get("https://autumnfish.cn/api/joke").then
                        (function (response) {
                            // console.log(response);
                            // console.log(response.data);
                            that.joke = response.data;
                        }, function (err) { })
                }
            },
        })
    </script>
</body>

</html>

Axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

天气应用

1、回车查询

按下回车（v-on .enter）
查询数据（Axios接口 v-model）
渲染数据（v-for 数组 that）

应用的逻辑代码建议和页面分离，使用单独的js文件编写
Axios回调函数中this指向改变了，需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

2、点击查询

点击城市（v-on自定义参数）
查询数据（this.方法()）
渲染数据

自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法

示例图

<!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/index.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" v-model="city" @keyup.enter="searchWeather" class="input_txt"
                    placeholder="请输入查询的天气" />
                <button class="input_sub">
                    搜 索
                </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>
    <script>
        /*
            请求地址:http://wthrcdn.etouch.cn/weather_mini
            请求方法:get
            请求参数:city(城市名)
            响应内容:天气信息
        */
        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;
                        })
                        .catch(function (err) { })
                },
                changeCity: function (city) {
                    this.city = city;
                    this.searchWeather();
                }
            }
        })
    </script>
</body>

</html>

北依雪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础快速入门

Vue基础第一个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">
复制链接

扫一扫

专栏目录