Vue/axios-基础练习(天气预报/音乐播放器)

最新推荐文章于 2023-06-21 17:09:28 发布

阿门阿前下的蜗牛

最新推荐文章于 2023-06-21 17:09:28 发布

阅读量566

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Fky_mie/article/details/115365217

版权

Vue/axios-基础练习

参考:

v-on修饰符

axios官网

文章目录

Vue/axios-基础练习

vue基础指令

vue实例的作用范围是什么: el命中的元素内部,包括他的子元素里; 但建议给div用,因为其他标签有自己的样式
el挂载点,可以用其他选择器,但建议用id
vue不能给html和body设置

v-text: 本质是innerText, 简写成{ {}}

v-html: 本质是innerHtml

v-show=“true”: 本质是切换元素样式里的display属性

v-if: 本质是操纵dom元素(移除添加), 刷新dom树, 耗性能

v-bink: src="" 设置元素属性, 如src,title,class; 简写为 :src=""

v-for: 根据数据响应式生成列表结构,同步改变; 合并写的时候,必须按先item再index的顺序,否则形参意义会变 (item, index) in list

v-on:click=“函数名(形参)“指令简写成@click=””; 还有很多修饰符处理事件: v-on修饰符, 比如@keyup.enter可以修改事件为输入后再按enter触发

v-model=“变量” 设置表单元素(双向数据绑定,改表单内部的值的时候变量本身也会被更改, 就很适合做文字放大框,同步显示输入文字)

axios基础使用方法

axios是一个功能强大的网络请求库

//官网axios在线地址
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//方法1: 获取的接口
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
//方法2: 用户注册的接口
axios.post(地址,{key:value,key2:value2}).then(function(response){}, function(err){})

//response返回服务器返回的信息, err比如会发生在地址写错的清况,返回一些404信息

axios怎么与vue结合

已知vue的methods里的函数, this指向这个vue对象; 但是axios里then之后的回调函数里的this, 指向window, 所以得新建变量在methods一开始存this

    <!-- 引入开发版本vue.js -->
    <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>
        var app = new Vue({
            el: "#app",
            data: {
                joke: "笑话",
            },
            methods: {
                getJoke: function() {
                    var thisN = this;
                    //console.log(this);  //这里this指向Vue对象
                    axios.get("https://autumnfish.cn/api/joke").then(function(response) {
                        //console.log(this.joke); //undefined, 因为这里this已经变成window了,因为then以后执行的回调函数主体是window
                        thisN.joke = response.data;
                    }, function(err) {
                        // console.log(err);
                    })
                }
            },
        })

练习1: 点击按钮加减数字

<!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>
    <style>
        button {
    
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 50px;
        }       
        span {
    
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{
  { num }}</span>
        <button @click="add">+</button>
    </div>

    <!-- 开发版本vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
     //数据对象
                num: 1
            },
            methods: {
     //方法
                add: function() {
    
                    // console.log('add');
                    if (this.num < 5) {
    
                        this.num++;
                    } else {
    
                        alert('别按了');
                    }
                },
                sub: function() {
    
                    // console.log('sub');
                    if (this.num > 0) {
    
                        this.num--;
                    } else {
    
                        alert('别按了')
                    }
                },
            }
        });
    </script>
</body>
</html>

练习2: 点击切换显示or隐藏

//v-show或者v-if不一样  
<style>
        button {
    
            display: block;
            width: 30px;
            height: 30px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-show="isShow" src="images/wakeup.jpg" alt="">
        <!-- <img v-if="isShow" src="images/wakeup.jpg" alt=""> -->
        <button @click="changeIsShow"></button>
    </div>

    <!-- 开发版本vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
     //数据对象
                isShow: false
            },
            methods: {
     //方法
                changeIsShow: function() {
    
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>

练习3: 点击更改目标的样式

类名可以用两种方式写,建议用第二种对象的方式

<img :src="imgSrc" :title="imgTitle + '可以这样字符串拼接'" :class="isAct

最低0.47元/天解锁文章

阿门阿前下的蜗牛

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue/axios-基础练习(天气预报/音乐播放器)

Vue/axios-基础练习参考:v-on修饰符axios官网文章目录Vue/axios-基础练习vue基础指令axios基础使用方法axios怎么与vue结合练习1: 点击按钮加减数字练习2: 点击切换显示or隐藏练习3: 点击更改目标的样式练习4: 响应式生成列表练习5: 点击获取一则笑话综合练习练习1: todoList,输入任务回车后,自动添加进列表,可删除练习2: axios+vue实现网络应用: 天气预报练习3: 音乐播放器vue基础指令vue实例的作用范围是什么: el
复制链接

扫一扫