Java教程

05|组件基础及组件注册

本文主要是介绍05|组件基础及组件注册，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

    • 1.组件的定义
      • 组件的名称
      • 组件的配置
        • data：通过函数返回数据对象，以保证每个组件实例使用的数据对象是独立的
        • methods
        • template：模板字符串
        • props：属性声明（可以给默认值）
    • 2.实例

1.组件的定义

组件的名称

组件的配置

data：通过函数返回数据对象，以保证每个组件实例使用的数据对象是独立的

methods

template：模板字符串

props：属性声明（可以给默认值）

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id='app'>
    {{message}} {{message + message}}
    <div :id="message"></div>
    <todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    Vue.component('todo-item', {
        props: {
            title: String,
            del: {
                type: Boolean,
                default: false
            }
        },
        template: '' +
            '<li>\n' +
                '<span v-if="del">{{title}}</span>\n' +
                '<span v-else style="text-decoration: line-through">{{title}}</span>\n' +
                '<button v-show="!del">删除</button>\n' +
            '</li>',
        data: function () {
            return {}
        },
        methods: {

        }
    })
    Vue.component("todo-list", {
        template: '' +
            '<ul>\n' +
                '<todo-item v-for="item in list" data-test="dd" :title="item.title" :del="item.del"></todo-item>\n' +
            '</ul>',
        data: function () {
            return {
                list: [
                    {
                        title: '课程1',
                        del: false
                    },
                    {
                        title: '课程2',
                        del: true
                    }
                ]
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world',
            list: [
                {
                    title: '课程1',
                    del: false
                },
                {
                    title: '课程2',
                    del: true
                }
            ]
        }
    })
</script>
</body>
</html>
这篇关于05|组件基础及组件注册的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航