Vue双向绑定、什么是组件、Axios异步通信、Vue的生命周期、计算属性

lan584433411

已于 2022-07-06 19:00:18 修改

阅读量161

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-27 18:15:24 首次发布

本文链接：https://blog.csdn.net/lan584433411/article/details/125463862

版权

1、什么是双向绑定

在这里插入图片描述
代码演示

2、什么是组件

在这里插入图片描述

3、什么是：Axios

在这里插入图片描述

4、为什么要使用Axios

在这里插入图片描述

5、Vue的生命周期

在这里插入图片描述

6、Axios异步通信：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决加载时闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="vue" v-clock>
        <div>{{info.name}}</div>
        <div>{{info.address.street}}</div>
        <div>{{info.address.city}}</div>
        <div>{{info.address.country}}</div>

        <a v-bind:href="info.url">百度</a>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
            data(){
                return{
                    info:{
                        name:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        },
                        url:null
                    }
                }
            },
            mounted(){//钩子函数,链式编程
                axios.get('../data.json').then(response=>(this.info=response.data));
            }
        });
    </script>

</body>
</html>

7、计算属性：computed

computed和methods区别：前者通过属性来调用，后者通过方法调用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            message:"hello,lan"
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>

</body>
</html>