vue通信与计算属性

最新推荐文章于 2024-09-15 16:33:50 发布

酷学java

最新推荐文章于 2024-09-15 16:33:50 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42563841/article/details/105521677

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.axios通信

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<style>
    /*选择属性，初始化先不显示，因为vue加载机制是一步一步来的，会先把原生的html展示，这样不利于给客户展示*/
    [v-clock]{
        display: none;
    }
</style>
<body>
<div id="app" v-clock>
    {{ info }}
</div>
<script type = "text/javascript">
    new Vue({
        el: '#app',
        data () {
            return {
                info: null
            }
        },
        //钩子，用来加载数据
        mounted () {
            //链式编程，ES6才支持，ES5不支持
            axios
                .get('../data.json')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    })
</script>
</body>
</html>

2.计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
     <p>CurrentTime1: {{currentTime1}}</p>
     <p>CurrentTime2: {{currentTime2}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "我爱你"
        },
        //方法：每一次调用，都会重新计算
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        //计算属性：一开始计算完毕，存在缓存中，每次数据发生变动，才会重新计算，节约资源，降低并发
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    })
</script>
</html>