Vue入门（二）

什么时候点菜

已于 2023-07-24 19:34:14 修改

阅读量37

点赞数

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

于 2023-07-07 11:02:28 首次发布

本文链接：https://blog.csdn.net/qq_41550996/article/details/131589173

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、 Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

1、第一个vue组件

<body>
    <div id="app">
        <xzt></xzt>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
        Vue.component("xzt",{
            template:'<li>hello</li>'
        });
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

获取值：

<body>
    <div id="app">
        <xzt v-for="item in items" v-bind:message="item"></xzt>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
        Vue.component("xzt",{
            //属性
            props:['message'],
            //模板
            template:'<li>{{message}}</li>'
        });
        new Vue({
            el: '#app',
            data: {
                items:["Java","Linux","前端"]
            }
        })
    </script>
</body>

二、计算属性

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

<body>
    <div id="app">
        <!--注意，一个是方法，一个是属性-->
        <p>调用当前时间的方法：{{currentTime1()}}</p>
        <p>当前时间的计算属性：{{currentTime2}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
    </script>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
            methods: {
                currentTime1: function () {
                    return Date.now();
                }
            },
            computed: {
                //currentTime2 ，这是一个属性！不是方法
                currentTime2: function () {
                    this.message;
                    return Date.now();
                }
            }
        })
    </script>
</body>

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

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

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

三、插槽

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中; 比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item"
                v-bind:index="index"></todo-items>
        </todo>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/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>'
        });
        //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
        Vue.component('todo-items', {
            props: ['item', 'index'],
            template: '<li>{{index + 1}}. {{item}}</li>'
        });

        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

什么时候点菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门（二）

如果在方法中的值发生了变化，则缓存就会刷新！比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；
复制链接

扫一扫

专栏目录