master

分支 (1)

管理

管理

master

learn-vue
/
demo_018.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{msg}} !!!
        <my-component></my-component>
        <my-component2></my-component2>
        <my-component3></my-component3>
    </div>
    <script>
        // 模块，就是一个可以重用的后台模块，比如：UserDao UserService
        // 组件，就是一个可以重用的UI零件。比如：登录UI，购物车UI，注册UI，排行榜UI。

        // Vue中，创建组件的三种方式。

        // 方式一：
        // 创建组件对象
        var component = Vue.extend({
            template: "<h3>组件1</h3>"
        });
        // 注册全局组件，注册组件以后，组件就有名字了，如下组件的名字就是myComponent
        // 使用组件的时候，必须把组件名myComponent，改为my-component。
        Vue.component("myComponent", component);


        // 方式二：
        // 直接注册一个全局组件，而不需要使用Vue.extend来创建组件对象
        Vue.component("myComponent2", {
            template: "<h3>组件2</h3>"
        });

    </script>

     <!--
        关于创建组件的方式三，要注意的地方:
        1. 在外部html中，定义组件的内容时，必须使用template元素 ，因为template默认情况下是隐藏的。
        只有在通过标记的形式使用组件的时候，template包裹的元素才显示出来！
        2. 作为组件的内容，只能有一个根元素！ 以下的根元素不是template，而是div。
    -->
    <template id="t1">
        <div>
            <div>
                <h3>组件3</h3>
            </div>
            <div>
                <h3>hahahah</h3>
            </div>
        </div>
    </template>

    <script>

        // 方式三：
        // 注册一个全局组件，内容来自于外部html，而没有硬编码在组件中。
        Vue.component("myComponent3", {
            template: "#t1",
        });

        var app = new Vue({
            el: "#app",
            data: {
                msg: "test"
            }
        });
    </script>


</body>
</html>