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

最新推荐文章于 2024-06-28 09:44:50 发布

The_Beacon

最新推荐文章于 2024-06-28 09:44:50 发布

阅读量295

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/The_Beacon/article/details/108954884

版权

本文详细介绍了Vue.js中的计算属性，强调其缓存特性和节省系统开销的优势。接着讲解了内容分发，通过插槽实现组件的组合与动态绑定。此外，还阐述了自定义事件的重要性，用于组件间的数据传递和操作。最后，总结了Vue的核心理念和常用特性，包括数据驱动、组件化开发，并提到了Vue生态中的相关工具和库。

摘要由CSDN通过智能技术生成

1、什么是计算属性

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

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{
  {currentTime1()}}</p>
    <p>currentTime2:{
  {currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
    
        el:"#app",
        data:{
    
          message:"message"
        },
        methods:{
    
            currentTime1:function(){
    
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
    
            currentTime2:function(){
    //计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

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

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”zhy"，改变下数据的值，再次测试观察效果

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

2、内容分发

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

测试

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

定义一个待办事项的组件

<div id="app">
    <todo></todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

最低0.47元/天解锁文章

The_Beacon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之计算属性、内容分发和自定义事件

1、什么是计算属性计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫

专栏目录