Vue03

2020/7/6 22:07:43 人评论 次浏览 分类:学习教程

前言:此笔记由狂神哔哩哔哩视频所写,转载自觉附上链接,非常感谢!

六、计算属性

6.1、什么是计算属性?

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

6.2、为什么要有计算属性?

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

6.3、怎么使用计算属性?

第一个程序(实现功能:和方法区methods:{}中写方法类似,计算属性computed:{}也是如此,都是 “函数名:function(){}” 的格式见下面,只不过不同的是methods:{}中的功能调用时要用方法来调,即currentTime1(),而computed:{}注重的是属性,所以直接用currentTime1来调用,类似一个花缓存。)

代码实现

<div id="app">
    <div>currentTime1:{{currentTime1()}}</div>
    <div>currentTime2:{{currentTime2}}</div>

</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el:"#app",
        data: {
            msg:"hello,computed"
        },
        methods: {
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
            currentTime2:function(){
                return Date.now();
            }
        }
    });
</script>

效果图片;

在这里插入图片描述
补充说明:

  • 如果methods:{}中的函数名和computed:{}中的函数名相同时会先执行methods:{}中的功能代码,可以将代码改成如下,methods:{}与computed:{}中定义相同的函数名,调取时若用方法调用currentTime1(),就会成功显示,若直接用currentTime1调用则显示失败,因为methods:{}的优先级高于computed:{}的,解决措施时改换methods:{}的函数名。

    代码实现:

    <div id="app">
        <div>currentTime1:{{currentTime1}}</div>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el:"#app",
            data: {
                msg:"hello,computed"
            },
            methods: {
                currentTime1:function(){
                    return Date.now();//返回一个时间戳
                }
            },
            computed: {
                currentTime1:function(){
                    return Date.now();
                }
            }
        });
    </script>
    

    最终效果:

    • 用currentTime1()调取

    在这里插入图片描述

    • 用currentTime1调取

      在这里插入图片描述

  • 有前面定义可知,计算属性是将计算的出的的值缓存到一个属性中,若这个值发生变化时,其缓存到属性中的值也会变化,为了更好地反映这个效果,可以在computed:{}中地r return Date.now()前面添加一个this.msg;在控制台(Console)改变它的值,观察刷新效果。

    computed: {
                currentTime1:function(){
                    this.msg;
                    return Date.now();
                }
            }
    

七、 插槽

7.1、什么是 插槽?

在vue.js中我们使用元素作为承载==内容分发==的出口,作者称其为 插槽,可以应用在组合组件的场景中;插槽,在一个页面中,有些数据需要改变,另为一些数据则不需要变化,此时这个变化的地方可以引入一个类似插槽的缺口,方便变化的东西进来,以便使页面动态化。

7.2、为什么需要插槽?

在这里插入图片描述

7.3、怎么实现 内容分发(即用<slot>和component组件)?

问题导入:制作一个待办时间组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三各组件又是相互独立的,该怎么操作?

第一个程序(功能实现:先写一个todo的组件,方法体里面的模板template:’’ 将数据变化的部分用标签代替,注意每一行后面用\结束。最外层的标签是div,向里依次是P标签,最里面是li标签,而数据变化的标签是P和li,所以这两个标签处用slot代替。接着写todo-title组件和todo-items组件,用props:[‘A’] 接受、template:’{{A}}'取出显示,都是A表示其内容相同,然后绑定到用name=“ ” 属性绑定到todo组件的上面。接着是视图层div标签里面,最外面写todo标签,向里面依次是todo-title 和todo-items ,这两个标签用slot=" “与其他组件绑定,最后利用v-bind:=“ ” 绑定到数据库。**这时就完成了由v-bind: =”"从数据库里读取数据,然后将数据分别传到todo-title和todo-items组件中,按照todo组件的格式渲染到视图层,只要数据库里的数据发生改变,就会同步到视图层。**这就是插槽的妙用。 )

代码实现:

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>
<script src="../js/vue.js"></script>
<script>
    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                       <slot name="todo-title"></slot>\
                       <ul>\
                        <slot name="todo-items"></slot>\
                       </ul>\
                   </div>'
    });
    Vue.component("todo-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });

    let vm = new  Vue({
        el:"#app",
        data: {
            title:'前端列表',
            todoItems:['Html','Css','Javascript','Vue']
        }
    });
</script>

效果图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ixu0uR8c-1594042657062)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200706161827292.png)]

补充说明

缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bindv-on 这两个最常用的指令,提供了特定简写:

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同,但 :@ 对于 attribute 名来说都是合法字符,在所有支持 Vue 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。

八、自定义事件(重点)

8.1、什么是自定义事件?

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

8.2、为什么要自定义事件?

在这里插入图片描述
在这里插入图片描述

8.3、如何自定义事件?

第一个程序

代码实现:

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" 
                    :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<script src="../js/vue.js"></script>
<script>
    //slot插槽
    Vue.component("todo",{
        template: '<div>\
                       <slot name="todo-title"></slot>\
                       <ul>\
                        <slot name="todo-items"></slot>\
                       </ul>\
                   </div>'
    });
    Vue.component("todo-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:['item','index'],
        //只能绑定当前组件的方法
        template:'<li>{{index}}-{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function(index){
                //this.$emit()自定义事件分发
                this.$emit('remove',index)
            }
        }
    });

    let vm = new  Vue({
        el:"#app",
        data: {
            title:'前端列表',
            todoItems:['Html','Css','Javascript','Vue']
        },
        methods: {
            removeItems:function(index){
                console.log("deleted"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次删除一个元素
            }       
        }
    });
</script>

效果图片
在这里插入图片描述

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->