VUE计算属性,vue插槽

Vue计算属性，可以想象成为缓存
computed
主要特点是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

<div id="app">
    <p >message1:{{message1()}}</p>
    <p>message2:{{message2}}</p>
    <p>
        <button v-on:click="mess">按钮</button>
        <!--回顾一下单击事件知识-->
    </p>
</div>
<script>
    var mar = new Vue({
        el:"#app",
        data:{
            message:"牛"
        },
        methods:{
            message1:function () {
                return Date.now();//返回一个时间戳
            },
            mess:function () {
                alert(this.message);
            }
        },
        computed:{//计算属性
            message2:function () {
                return Date.now();//返回一个时间戳
            }
        }
    });
    //methods和computed方法名不能重名，重名会导致默认选择methods的方法
</script>

vue插槽：slot

<div id="app">
    <tops>
        <tops-title slot="tops-title" v-bind:title="title"></tops-title>
        <tops-items slot="tops-items" v-for="item in items" :item="item"></tops-items>
    </tops>
</div>
<script>
    Vue.component("tops",{
        template:'<div>\
                    <slot name="tops-title"></slot>\
                        <ul>\
                            <slot name="tops-items"></slot>\
                        </ul>\
                    </div>'
    });
    Vue.component("tops-title",{
        props:['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("tops-ite ms",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });
    var mar=new Vue({
        el:"#app",
        data:{
            title:"弟弟，疾风亦有归途",
            items:["亚索","永恩","孤儿剑圣"]
        }
    });
</script>