Vue（第三天）

最新推荐文章于 2023-06-06 18:23:48 发布

最爱尹宝

最新推荐文章于 2023-06-06 18:23:48 发布

阅读量58

点赞数

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

本文链接：https://blog.csdn.net/weixin_45096638/article/details/112798865

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue（第三天）

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue（第三天）
前言
一、什么是计算属性（computed）？
- 1、使用步骤
- - 结论
二、内容分发
三、自定义事件
Vue入门小结

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是计算属性（computed）？

计算属性是重点突出在属性两个字上，首先它是个属性其次这个属性有计算的能力，这里计算就是个函数。简单说，它就是一个能够将结果换成起来的属性，仅此而已：可以想象为缓存。

1、使用步骤

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>currentDate01:{{currentDate01()}}</p>
    <p>currentDate02:{{currentDate02}}</p>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'zhangsan'
        },
        methods: {
            currentDate01: function () {
                return Date.now();
            }
        },
        // currentDate02，这是个属性，不是方法
        computed: {
            currentDate02: function () {
                this.message
                return Date.now();
            }
        }
    });
</script>

</body>
</html>

说明：

methods：方法定义，调用方法使用currentDate01()，需要带括号
computed：定义计算属性，调用属性currentDate02，不需要带括号

结论

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

二、内容分发

在Vue.js中我们使用slot元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-classes slot="todo-classes" v-for="item in classes"
                      :classes="item"></todo-classes>
    </todo>
</div>
<script>
    // 插槽
    Vue.component("todo", {
        template: '<div>\n' +
            '        <slot name="todo-title"></slot>\n' +
            '        <ul>\n' +
            '            <slot name="todo-classes"></slot>\n' +
            '        </ul>\n' +
            '    </div>'
    });

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-classes", {
        props: ['classes'],
        template: '<li>{{classes}}</li>'
    });

    var app = new Vue({
        el: '#app',
        data: {
            title: '秦老师系列课程',
            classes: ['JAVA', 'LIUNX', 'MYSQL']
        }
    });
</script>

</body>
</html>

三、自定义事件

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-classes slot="todo-classes" v-for="(item,index) in classes"
                      :classes="item" :index="index"  v-on:remove="removeItems(index)" :key="index">

        </todo-classes>
    </todo>
</div>
<script>
    // 插槽
    Vue.component("todo", {
        template: '<div>\n' +
            '        <slot name="todo-title"></slot>\n' +
            '        <ul>\n' +
            '            <slot name="todo-classes"></slot>\n' +
            '        </ul>\n' +
            '    </div>'
    });

    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-classes", {
        props: ['classes','index'],
        template: '<li>{{index}}========={{classes}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            title: '秦老师系列课程',
            classes: ['JAVA', 'LIUNX', 'MYSQL']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了" + this.classes[index] + "ok了");
                // 一次删除一个元素
                this.classes.splice(index, '1');
            }
        }
    });
</script>

</body>
</html>

说明：

Vue.Compent():注册组件
todo-classes():自定义组件的名字
template：组件的模板
props：可以传递属性参数

Vue入门小结

核心：数据驱动、组件化
优点：借鉴了AngulaJs的模块开发和React的虚拟Dom，虚拟Dom就是把Dom操作放在内存中执行：

常用的属性：

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

组件化：

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

最爱尹宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（第三天）

Vue（第三天）提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue（第三天）前言一、什么是计算属性（computed）？1、使用步骤结论二.内容分发总结前言提示：以下是本篇文章正文内容，下面案例可供参考一、什么是计算属性（computed）？计算属性是重点突出在属性两个字上，首先它是个属性其次这个属性有计算的能力，这里计算就是个函数。简单说，它就是一个能够将结果换成起来的属性，仅此而已：可以想象为缓存。1、使用步骤代码如下（示例）：<!DOCTYPE
复制链接

扫一扫