Vue06-计算属性、内容分发、自定义事件

最新推荐文章于 2024-09-30 16:19:08 发布
最新推荐文章于 2024-09-30 16:19:08 发布
阅读量79 收藏
点赞数
分类专栏： 大前端进阶 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34172440/article/details/120675541
版权

文章目录

计算属性、内容分发、自定义事件

1、计算属性

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

<div id="hello" v-cloak>
    <p>1:{{currentTime1()}}</p>
    <p>2:{{currentTime2}}</p>
</div>

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

注意：methods和computed里的东西不能重名
说明：

  • methods：定义方法， 调用方法使用currentTime1()， 需要带括号

  • computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message 是为了能够让currentTime2观察到数据变化而变化

  • 如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”随便打些东西"， 改变下数据的值，再次测试观察效果!

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

2、内容分发（插槽）

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

测试：

比如准备制作一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成，但这三个组件又是相互独立的，该如何操作呢?
定义一个待办事项的组件

让代办事项的标题和值实现动态绑定

  1. 将上面的代码留出一个插槽，即slot

    Vue.component('todo',{
    template:'<div>\
        <slot name="todo-title"></slot>\
        <ul>\
            <slot name="todo-items"></slot>\
        </ul>\
    </div>'
});

  2. 定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件

    Vue.component('todo-title',{
    props:['title'],
    template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
    props:["item","index"],
    template:"<li>{{index+1}}--{{item}}</li>"
});

  3. 实例化Vue并初始化数据

    var vm = new Vue({
        el: '#hello',
        data: {
            todoTitle: '语言',
            todoItems: ['Java','C',"Python"]
        }
    });

  4. 将这些值，通过插槽插入

    <div id="hello" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="todoTitle"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items>
    </todo>
</div>

说明：我们的todo-title和todo-items组件分别被分发到了todo组件的todo-title和todo-items插槽中

  • 完整代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="hello" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="todoTitle"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items>
    </todo>
</div>

<script src="../vue.js"></script>
<script>
    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+1}}--{{item}}</li>"
    });
    var vm = new Vue({
        el: '#hello',
        data: {
            todoTitle: '语言',
            todoItems: ['Java','C',"Python"]
        }
    });
</script>
</body>
</html>

3、自定义事件

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

  1. 在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法

    var vm = new Vue({
    el: '#hello',
    data: {
        todoTitle: '语言',
        todoItems: ['Java','C',"Python"]
    },
    methods: {
        removeTodoltems: function (index) {
            this.todoItems.splice(index,1); // splice(从哪开始,删除几个)
        }
    }
});

  2. 修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！

    Vue.component("todo-items",{
    props:["item","index"],
    template:"<li>{{index+1}}--{{item}}<button @click='remove'></button></li>",
    methods: {
        remove: function (index) { //remove为事件名，需要 v-on:remove 去使用
            // this.$emit：自定义事件分发
            this.$emit('remove',index);
        }
    }
});

  3. 修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

    <div id="hello" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="todoTitle"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeTodoltems(index)" ></todo-items>
    </todo>
</div>

  • 完整代码

    <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="hello" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="todoTitle"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeTodoltems(index)" ></todo-items>
    </todo>
</div>

<script src="../vue.js"></script>
<script>
    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+1}}--{{item}}<button @click='remove'>删除</button></li>",
        methods: {
            remove: function (index) { //remove为事件名，需要 v-on:remove 去使用
                // this.$emit：自定义事件分发
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: '#hello',
        data: {
            todoTitle: '语言',
            todoItems: ['Java','C',"Python"]
        },
        methods: {
            removeTodoltems: function (index) {
                this.todoItems.splice(index,1); // splice(从哪开始,删除几个)
            }
        }
    });
</script>
</body>
</html>

4、小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on绑定事件，简写@
  • v-model数据双向绑定
  • v-bind给组件绑定参数，简写：

组件化：

  • 组合组件slot插槽
  • 组件内部绑定事件需要使用到this.$emit("事件名",参数);
  • 计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

说明

Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

官网：

  • https://element.eleme.cn/#/zh-CN
  • https://ice.work/
开玩喜66
关注
专栏目录
Vue-05-计算属性、内容分发、自定义事件
时光
08-02 147
Vue-05-计算属性、内容分发、自定义事件
Vue 组件化: 计算属性、内容分发、自定义事件
xaiobit_hl的博客
06-09 837
Vue 组件化: 计算属性、内容分发、自定义事件
Vue学习笔记06----计算属性、内容分发、自定义事件
answero的博客
08-03 233
【狂神说Java】Vue视频 1、什么是计算属性   计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!   上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
Hello JavaScript ——5.4 Vue 计算属性 内容分发 自定义事件
qq_44807796的博客
03-03 145
计算属性 计算属性的重点在属性上，简而言之，他就是一个能将计算结果缓存起来的属性，相当于缓存 缓存就意味着，当计算结果没有发生改变时，不需要每次都重新计算，可以提高一定的系并发量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld!</title> </head> <body> &
4.关于 Vue 计算属性、内容分发、自定义事件
qq_52252193的博客
12-16 905
4.1 计算属性 计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已（可以想象为缓存的效果，把结果存储到属性） <body> <!--注意在前面 头中 script 引入所需要的 js 文件--> <!--view层，模板--> <div id="app"&
Vue之计算属性、内容分发、自定义事件
Daylight629博客
02-27 139
Vue之计算属性、内容分发、自定义事件 一、什么是计算属性 计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存! 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
Vue：计算属性、内容分发、自定义事件
adsdaas的博客
03-19 307
什么是计算属性 计算属性的重点突出在属性两个字上（属性是名词），首先它是个 属性其次这个属性有计算的能力（计算是动词），这里的 计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！     上代码： <!DOCTYPE html> <html> <head&gt...
Vue:计算机属性,内容分发,自定义事件
大屎片的博客
03-18 121
什么是计算属性,内容分发 计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存 计算属性:计算出来的结果,保存在属性中,内存中运行:虚拟dom 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
Vue笔记：计算属性、内容分发、自定义事件
七七的博客
09-26 181
计算属性、内容分发、自定义事件 什么是计算属性 计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数； 简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存。 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello
玩转vue的slot内容分发
10-17
Vue.js 的 Slot 内容分发是其组件化功能的重要组成部分，它允许我们在组件内部定义占位符，然后在父组件中插入自定义内容。这种方式使得组件更加灵活，可以适应各种不同的应用场景。下面我们将深入探讨 Vue 中的 ...
wocwin-vue2-master.zip
11-07
Vue 2是Vue.js的第二个主要版本，发布于2016年，它提供了许多改进和新特性，如虚拟DOM、组件化、计算属性、侦听器、异步组件等。 【描述】由于描述内容为空，我们只能根据标题推测这可能是一个完整的项目源代码，...
Vue系列之八: 计算属性、内容分发、自定义事件
林中静月下仙的博客
03-27 314
1、什么是计算属性 计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!   上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl
Vue-内容分发
weixin_49512993的博客
10-01 297
文章目录Vue-内容分发九、内容分发1、测试内容分发：2、自定义事件3、Vue入门小结 Vue-内容分发 九、内容分发 在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中； 1、测试内容分发： 比如准备制作一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成(使用slot插槽嵌套组件）： //定义一个列表组件 Vue.component("todo",{
Vue计算，插槽及自定义事件
weixin_52735772的博客
08-01 480
vue 计算属性(类似于Mybatis缓存) 设计计算属性的初衷是用于简单运算的，在一个计算属性里可以完成各种复杂的逻辑，包括运算，函数调用等，最终返回一个结果即可。 将计算出来的结果保存在属性中，在内存中运行。 <div id="a"> <p>Now:{{currentTime()}}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: "#a",
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 786
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1158
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 852
自定义指令
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue深度解析：slot与slot-scope的全面指南
"深入理解vue中的slot与slot-scope，主要介绍了vue中组件模板的插槽机制，包括单个插槽、具名插槽、作用域插槽等概念，以及如何使用它们进行内容分发。" Vue.js 是一款流行的前端框架，其中的插槽（slot）机制是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值