Vue.js组件开发详解-优快云博客

本文链接：https://blog.youkuaiyun.com/tongkongyu/article/details/117125094
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        组件开发步骤：
        1.创建组件构造器对象
        2.注册组件
        3.使用组件
    -->

    <!-- 组件的基本使用 -->
    <div id="app1">
        <!-- 使用组件 -->
        <cpn1></cpn1>
        <cpn1></cpn1>
    </div>
    <script>
        /*
            ES6新语法： 定义字符串 `` ,该方法可以换行声明字符串
            之前： const str1 = 'abc' +
                                'cde';
            现在： const str2 = `abc
                                cde`;
        */

        // 1.创建组件构造器
        const cpnC1 = Vue.extend({
            template: `
                <div>
                    <h2>我是第一行</h2>
                    <p>我是第二行</p>
                    <p>我是第三行</p>
                </div>
            `
        });
        // 2.注册组件
        Vue.component('cpn1',cpnC1);

        // 创建Vue环境 
        const app1 = new Vue({
            el: '#app1'
        })
    </script><hr>

    <!-- 全局组件与局部组件 -->
    <div id="app2">
        <cpn2></cpn2>
        <cpn3></cpn3>
    </div>
    <script>
        const cpnC2 = Vue.extend({
            template: `
                <div>
                    <h2>我是全局组件</h2>
                    <p>我是全局组件</p>
                </div>
            `
        })
        // 全局组件意味着可以在多个Vue实例下面使用，即可以在 app1 和 app2 里面用
        Vue.component('cpn2',cpnC2); 

        const cpnC3 = Vue.extend({
            template: `
                <div>
                    <h2>我是局部组件</h2>
                    <p>我是局部组件</p>
                </div>
            `
        })
        const app2 = new Vue({
            el: '#app2',
            components: {
                // 局部组件意味着只能在一个Vue实例下面使用，即只可以在 app2 里面用
                cpn3: cpnC3
            }
        })
    </script><hr>

    <!-- 父组件与子组件 -->
    <div id="app3">
        <cpn5></cpn5>
    </div>
    <script>
        // 1.创建第一个组件构造器（子组件）
        const cpnC4 = Vue.extend({
            template:`
            <div>
                <p>我是子组件</p>
                <p>我是子组件</p>
            </div>
            `
        })
        // 2.创建第二个组件构造器（父组件）
        const cpnC5 = Vue.extend({
            template:`
            <div>
                <p>我是父组件</p>
                <p>我是父组件</p>
                <cpn4></cpn4>
            </div>
            `,
            components: {
                cpn4: cpnC4 
            }
        })

        // root组件
        const app3 = new Vue({
            el: '#app3',
            components: {
                cpn5 : cpnC5
            }
        })
    </script><hr>

    <!-- 
        注册组件的语法糖写法
        不写 Vue.extend ，但实际上还是调用Vue.extend()
    -->
    <div id="app4">
        <cpn6></cpn6>
        <cpn7></cpn7>
    </div>
    <script>
        // 全局组件语法糖
        Vue.component('cpn6',{
            template:`
            <div>
                <p>我是全局组件语法糖</p>
                <p>我是全局组件语法糖</p>
            </div>
            `
        })

        // 局部组件语法糖
        const app4 = new Vue({
            el: '#app4',
            components: {
                cpn7: {
                    template:`
                    <div>
                        <p>我是局部组件语法糖</p>
                        <p>我是局部组件语法糖</p>
                    </div>
            `
                }
            }
        })
    </script>


</body>
</html>