Vue学习之Vue的计算属性与Vue内容分发

vue计算属性

vue计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性有 计算 的能力(计算是动词),这里的 计算 就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type="text/javascript"></script>

</head>
<body>
    <div id="app">
<p>调用当前时间属性:{{currentTime2}}</p>
<p>调用当前时间方法:{{currentTime1()}}</p>
    
    

</div>



</body>
</html>

<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World'
            },
            methods: {
                currentTime1: function () {
                    return  Date.now();
                }
            },
            computed: {
                currentTime2: function () { 
                    this.message;
                    return Date.now();
                }

            }

        });
</script>
说明

methods:定义方法,调用方法使用 currentTime1(),需要带括号
computed:定义计算属性,调用属性使用 currentTime2,不需要带括号;this.message 是为了能够让 currentTime2 观察到数据变化而变化
注意:methods 和 computed 里不能重名

Vue学习之Vue的计算属性与Vue内容分发_第1张图片
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点;计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销

Vue 中的内容分发

在 Vue.js 中我们使用 < slot > 元素作为承载分发内容的出口,作者称其为 插槽,可以应用在组合组件的场景中

利用插槽功能实现一个组合组件
比如准备制作一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操作呢?

#定义一个名为 todo 的待办事项组件
Vue.component('todo', {
    template: '
\ \
    \ \
\
'
});

该组件中放置了两个插槽,分别为 todo-title 和 todo-items

#定义一个名为 todo-title 的待办标题组件
Vue.component('todo-title', {
    props: ['title'],
    template: '
{{title}}
'
});
#定义一个名为 todo-items 的待办内容组件
Vue.component('todo-items', {
    props: ['item', 'index'],
    template: '
  • {{index + 1}}. {{item}}
  • '
    });
    #实例化 Vue 并初始化数据
    var vm = new Vue({
        el: '#vue',
        data: {
            todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》']
        }
    });
    

    html:

    <div id="vue">
        <todo>
            <todo-title slot="todo-title" title="今日动漫推荐"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index" :key="index"></todo-items>
        </todo>
    </div>
    

    此时,我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中

    这里是一个真诚的***青年技术交流QQ群:761374713***,不管你是大学生、社畜、想学习变成的其他人员,欢迎大家加入我们,一起成长,一起进步,真诚的欢迎你,不管是技术,还是人生,还是学习方法。有道无术,术亦可求,有术无道,止于术。在这里插入图片描述

    你可能感兴趣的:(前端知识,vue,javascript,html)