【前端】vue学习3：计算属性、内容分发、自定义事件

nickkkkkkkkk

已于 2023-02-23 14:56:35 修改

阅读量223

点赞数

分类专栏：前端文章标签：前端 vue.js 学习

于 2020-08-18 23:41:05 首次发布

本文链接：https://blog.csdn.net/qq_30081043/article/details/108064561

版权

前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

什么是计算属性？（VUE相比Angular和React的特性）

它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性);可以想象为缓存!

关键字：computed

<!DOCTYPE html>
<!--<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">-->
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
    currentTime1=  {{currentTime1()}}<br/>
    currentTime2=  {{currentTime2}}<br/>
    reserveString= {{reserveString}}<br/>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data:{

        },
        methods:{
            currentTime1:function () {
                return Date.now();
            }
        },
        computed:{
            currentTime2:function () {
                return Date.now();
            }
        },
		    reserveString: function () {
		           return this.msg.split('').reverse().join('');
	        }
   });
</script>
</body>
</html>

结论:
方法同名，会以methods里的为准。所以不要写同名函数。调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

插槽

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;
这里穿插以下vue的语法缩写
v:bind: 可以缩写为一个:
v-on: 可以缩写为一个@

li 遍历实现

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
    <p>课程列表</p>
    <ul >
        <li v-for="item in items" >{{item}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello,computed!",
            items:['java','python','c++']
        }
    });
</script>
</body>
</html>

插槽实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--
    v-bind:xxx="yyy" 缩写为 :xxx="yyy"
    -->
    <todo>
        <todo-h3 slot="slot-h3" :receive_title="title"></todo-h3>
        <todo-li slot="slot-li" v-for="item in books" :receive_item="item"></todo-li>
    </todo>
</div>
<script>

    Vue.component("todo",{
        template:'<div>\
                       <slot name="slot-h3"></slot>\
                       <ul>\
                            <slot name="slot-li"></slot>\
                       </ul>\
                  </div>'
    });
    Vue.component("todo-h3",{
        props:['receive_title'],
        template:'<h3>{{receive_title}}</h3>'
    });
    Vue.component("todo-li",{
        props:['receive_item'],
        template:'<li>{{receive_item}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data:{
            title:"四大名著",
            books:["红楼梦","三国演义","水浒传","西游记"]
        }
    });
</script>
</body>
</html>

自定义事件

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用this.$emit(‘自定义事件名’,参数)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--
    remove绑定removeBook
    -->
    <todo>
        <todo-h3 slot="slot-h3" :receive_title="title"></todo-h3>
        <todo-li slot="slot-li"
                 v-for="(item,index) in books"
                 :receive_item="item"
                 :index="index"
                 v-on:remove="removeBook(index)"></todo-li>
    </todo>
</div>
<script>

    Vue.component("todo",{
        template:'<div>\
                       <slot name="slot-h3"></slot>\
                       <ul>\
                            <slot name="slot-li"></slot>\
                       </ul>\
                  </div>'
    });
    Vue.component("todo-h3",{
        props:['receive_title'],
        template:'<h3>{{receive_title}}</h3>'
    });
    Vue.component("todo-li",{
        props:['receive_item','index'],
        template:'<li>{{index}}--{{receive_item}}<button style="margin: 5px" @click="remove()">删除</button></li>',
        methods:{
            remove:function (index) {
                //触发当前实例上的事件。即触发了与remove绑定的removeBook
                //v-on:remove="removeBook(index)
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el:"#app",
        data:{
            title:"四大名著",
            books:["红楼梦","三国演义","水浒传","西游记"]
        },
        methods:{
            removeBook:function (index) {
                console.log(this.books[index]);

                //删除索引index的元素，删除1个。
                this.books.splice(index,1);
            }
        }

    });
</script>
</body>
</html>