1. 全局组件的注册

<body>
    <div id="app">
        <!--<global-component></global-component>-->
    </div>
    <script>
        Vue.component("global-component", {
            template: `<div>
                    <h3>{{ wanrong }}</h3>
                    <h2>{{ wanrong }}</h2>
                </div>
            `,
            data() {
                return {
                    wanrong: "Hello wanrong!",
                }
            }
        }
        );
        new Vue({
            el: "#app",
            template: `<global-component></global-component>`
        })
    </script>
</body>

2. 组件的复用

<body>
    <div id="app">
        <global-component></global-component>
        <global-component></global-component>
        <global-component></global-component>
    </div>
    <script>
        Vue.component("global-component", {
            template: `<div>
                    <h3>{{ wanrong }}</h3>
                </div>
            `,
            data() {
                return {
                    wanrong: "Hello wanrong!",
                }
            }
        }
        );
        new Vue({
            el: "#app",
            // template: `<global-component></global-component>`
        })
    </script>
</body>
 
 

3. 局部组件

<body>
    <div id="app">
    </div>
        <script>
        let Header = {
            template:`
                <div class="header">
                    <h1>{{ greeting }}</h1>
                </div>
            `,
            data(){
                return {
                    greeting: 'hello world',
                }
            },
        };
        new Vue({
            el: '#app',
            template: `<app-header></app-header>`,
            components: {
                'app-header': Header,
            }
        })
</script>
</body>
 
 
 4. 父子组件之间的通信

<body>
    <div id="app"></div>
<script>
    // 创建一个局部组件
    let Header = {
        template: `<div>
                <h2>{{ greeting }}</h2>
                <h3>{{ fData }}</h3>
            </div>
        `,
        props: ['fData'],
        data() {
            return {
                greeting: 'Hello, World'
            }
        },
    };
    // 在入口组件中注册你写的局部组件
    let App = {
        template: `
            <div>
                <page-header v-bind:fData="fatherData"></page-header>
            </div>
        `,
        components: {
            'page-header': Header,
        },
        methods: {
            myClick: function () {
                console.log(1);
            }
        },
        data(){
            return {
                fatherData: 0
            }
        }
    };
    new Vue({
        el: '#app',
        // 在Vue实例中注册你的所有组件的入口
        template: `<App></App>`,
        components: {
            App,
        }
    })
</script>
</body>
 
 

5. 子父组件的通信

<body>
    <div id="app"></div>
<script>
    let Header = {
        template: `
            <div>
                <button @click="sonClick">点击改变字体大小</button>
            </div>
        `,
        methods: {
            sonClick: function () {
                this.$emit("change-size", 0.1);
            }
        }
    };
    let App = {
        template: `
            <div>
                <span :style="{ fontSize: postFontSize + 'em' }">我是你爸爸~</span>
                <my-header v-on:change-size="fatherClick"></my-header>
            </div>
        `,
        components: {
            "my-header": Header,
        },
        data() {
            return {
                postFontSize: 1,
            }
        },
        methods: {
            fatherClick: function (value) {
                this.postFontSize += value;
            }
        }
    };
    new Vue({
        el: "#app",
        template: `<App></App>`,
        components: {
            App,
        }
    })
</script>
</body>
 
 

6.混入

<body>
    <div id="app">
        <my-yongjie></my-yongjie>
        <my-keqiang></my-keqiang>
    </div>
<script>
    let mixs = {
        methods: {
            show: function (name) {
                console.log(name + '来了');
            },
            hide: function (name) {
                console.log(name + '去了');
            }
        }
    };
    let myYongJie = {
        template: `
            <div>
                <button @click="show('yongjie')">点击显示永杰来了</button>
                <button @click="hide('yongjie')">点击显示永杰去了</button>
            </div>
        `,
        mixins: [mixs],
    };
    let myKeQiang = {
        template: `
            <div>
                <button @mouseenter="show('keqiang')">鼠标移入显示克强来了</button>
                <button @mouseleave="hide('keqiang')">鼠标移出显示克强去了</button>
            </div>
        `,
        mixins: [mixs],
    };
    new Vue({
        el: "#app",
        components: {
            "my-yongjie": myYongJie,
            "my-keqiang": myKeQiang,
        }
    })
</script>
</body>

7.插槽

   <style>
        body {
            margin: 0;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            float: left;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <global-component>首页</global-component>
        <global-component>免费课程</global-component>
        <global-component>轻课</global-component>
        <global-component>智能题库</global-component>
        <global-component>学位课程</global-component>
    </div>
<script>
    Vue.component("global-component", {
        template: `
            <div class="box"><slot></slot></div>
        `
    });
    new Vue({
        el: "#app",
    })
</script>
</body>

8. 具名插槽

 
  <style>
        body {
            margin: 0;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            float: left;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <global-component>
            <div slot="home">首页</div>
            <div slot="lightcourses">轻课</div>
            <div slot="degreecourses">学位课程</div>
        </global-component>
    </div>
<script>
    Vue.component("global-component", {
        template: `
            <div class="box">
                <slot name="lightcourses"></slot>
                <slot name="degreecourses"></slot>
                <slot name="home"></slot>
            </div>
        `
    });
    new Vue({
        el: "#app",
    })
</script>
</body>
 
 
 
 

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。

Vue.js组件系统

每一个新技术的诞生，都是为了解决特定的问题。

组件的出现就是为了解决页面布局等等一些列的问题。

vue中的组件分为两种，全局组件和局部组件。

全局组件的注册

通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。

12345678910111213141516171819202122232425262728
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="app">    <!--第二步，使用-->    <global_component></global_component>  </div>  <script>    // 第一步，注册    Vue.component("global_component", {      template: `        <div>            <h2>Hello Vue</h2>        </div>      `    });

    new Vue({      el: "#app",    });  </script></body></html>
组件的参数

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。

123456789101112131415161718192021222324252627282930
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="app">    <!--第二步，使用-->    <global_component></global_component>  </div>  <script>    // 第一步，注册    Vue.component("global_component", {      data: function () {        return {          count: 0        }      },      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`    });

    new Vue({      el: "#app",    });

  </script></body></html>
组件的复用

每个实例维护自己的一份独立的数据。

1234567891011121314151617181920212223242526272829303132
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="app">    <!--第二步，使用-->    <global_component></global_component>    <global_component></global_component>    <global_component></global_component>  </div>  <script>    // 第一步，注册    Vue.component("global_component", {      data: function () {        return {          count: 0        }      },      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`    });

    new Vue({      el: "#app",    });

  </script></body></html>

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

Data必须是一个函数

data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式

1234567891011121314151617181920212223242526272829303132
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="app">    <!--第二步，使用-->    <global_component></global_component>    <global_component></global_component>    <global_component></global_component>  </div>  <script>    // 第一步，注册    Vue.component("global_component", {      data(){        return {          count: 0        }      },      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`    });

    new Vue({      el: "#app",    });

  </script></body></html>
局部组建的注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

全局组件适中是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。

所以我们需要局部组件。不用的时候，被垃圾回收。

局部组件的第一种使用方式
12345678910111213141516171819202122232425262728293031323334353637
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="component-demo">    <!--最后在根元素当中使用它-->    <!--第一个中使用方式，会把当前div渲染进DOM-->    <my-header></my-header>  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的    let Header = {      template: `        <button @click="count++">{{ count }}</button>      `,      data() {        return {          count: 0        }      }    };

    new Vue({      el: "#component-demo",      // 第二部，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
局部组件的第二种使用方式
123456789101112131415161718192021222324252627282930313233343536
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的    let Header = {      template: `        <button @click="count++">{{ count }}</button>      `,      data() {        return {          count: 0        }      }    };

    new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

在局部组件中使用子组件
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script>  <style>    body {      margin: 0;    }    .box {      width: 100%;      height: 50px;      background-color: #2aabd2;    }

  </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的

    let Fcontent = {      template: `        <div>          <span>这是头条</span>

        </div>      `    };

    let Header = {      template: `        <div v-bind:class='{box: isBox}'>          <button @click="count++">{{ count }}</button>          <first-content></first-content>        </div>      `,      data() {        return {          count: 0,          isBox: true        }      },      components: {        'first-content': Fcontent      }    };

    new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
父子组件的通信
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script>  <style>    body {      margin: 0;    }    .box {      width: 100%;      height: 50px;      background-color: #2aabd2;    }

  </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的

    let Fcontent = {      template: `        <div>          <span>这是头条</span>          {{ fdata }}        </div>      `,      props: ['fdata']    };

    let Header = {      template: `        <div v-bind:class='{box: isBox}'>          <button @click="count++">{{ count }}</button>          <first-content :fdata="fathData"></first-content>        </div>      `,      data() {        return {          count: 0,          isBox: true,          fathData: "我是你爸爸~~~"        }      },      components: {        'first-content': Fcontent      }    };

    new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
子父组件的通信

父组件在mounted的时候，监听一个自定义事件。

给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script>  <style>    body {      margin: 0;    }    .box {      width: 100%;      height: 50px;      background-color: #2aabd2;    }

  </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的

    let Fcontent = {      template: `        <div>          <button v-on:click="myClick">放大父组件字体</button>        </div>      `,      methods: {        myClick: function () {          console.log(this);          this.$emit('change-font', 0.1);          console.log(this);        }      }    };

    let Header = {      /*      template: `        <div v-bind:class='{box: isBox}'>          <first-content v-on:change-font="changeFont"></first-content>          <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span>        </div>      `,      */      template: `        <div v-bind:class='{box: isBox}'>          <first-content v-on:change-font="postFontSize += $event"></first-content>          <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span>        </div>      `,      data() {        return {          count: 0,          isBox: true,          fathData: "我是你爸爸~~~",          postFontSize: 1        }      },      components: {        'first-content': Fcontent      },      methods: {        changeFont: function (value) {          this.postFontSize += value;        }      }    };

    const VM = new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
混入

混入可以提高代码的重用性。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../statics/vue.js"></script></head><body>    <div id="mixin-demo">        <my-alex></my-alex>        <p></p>        <my-peiqi></my-peiqi>    </div>

    <script>        let mixs = {            methods: {                show: function (name) {                    console.log(`${name} is here!`);                },                hide: function (name) {                    console.log(`${name} is gone!`);                },            }        };

        // Vue.component("my-comp", {        //     template: `        //               <div><button v-on:click="showAlex">点我显示alex</button></div>        //     `,        //     methods: {        //         showAlex: function () {        //             alert("alex is here!");        //         },        //     }        // });        //        // new Vue({        //     el: "#mixin-demo",        // });

        let myAlex = {            template: `                    <div>                        <button @click="show('alex')">点我显示alex</button>                        <button @click="hide('alex')">点我隐藏alex</button>                    </div>

            `,            // methods: {            //     show: function (name) {            //         console.log(`${name} is here!`);            //     },            //     hide: function (name) {            //         console.log(`${name} is gone!`);            //     }            // }            mixins: [mixs],        };

        let myPeiqi = {            template: `                    <div>                        <button @mouseenter="show('peiqi')">鼠标移入显示沛齐</button>                        <button @mouseleave="hide('peiqi')">鼠标离开隐藏沛齐</button>                    </div>            `,            // methods: {            //     show: function (name) {            //         console.log(`${name} is here!`);            //     },            //     hide: function (name) {            //         console.log(`${name} is gone!`);            //     }            // },            mixins: [mixs],        };

        new Vue({            el: "#mixin-demo",            components: {                "my-alex": myAlex,                "my-peiqi": myPeiqi,            }        })    </script>

</body></html>
插槽

有时候我们需要向组件传递一些数据，这时候可以使用插槽

123456789101112131415161718192021222324252627282930313233343536373839404142434445
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .nav-link {            width: 100px;            height: 100px;

            float: left;            margin-left: 5px;            text-align: center;            line-height: 100px;        }

    </style>    <script src="../statics/vue.js"></script></head><body>    <div id="app01">        <com-content>登录</com-content>        <com-content>注册</com-content>        <com-content>最热</com-content>        <com-content>段子</com-content>        <com-content>42区</com-content>        <com-content>图片</com-content>    </div>

    <script>        Vue.component('com-content', {          template: `            <div class="nav-link">              <slot></slot>            </div>          `        });

        new Vue({            el: "#app01",        })    </script>

</body></html>
具名插槽

操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .nav-link {            width: 100px;            height: 100px;            background-color: #2aabd2;            float: left;            margin-left: 5px;            text-align: center;            line-height: 100px;        }    </style>    <script src="../statics/vue.js"></script></head><body>    <div id="app01">        <base-layout>            <template slot="header">                <h1>这是标题栏</h1>            </template>            <template>                <h2>这是内容</h2>            </template>            <template slot="footer">                <h3>这是页脚</h3>            </template>        </base-layout>    </div>

    <script>        let baseLayout = {            template: `                <div class="container">                  <header>                      <slot name="header"></slot>                  </header>                  <main><slot></slot></main>                  <footer>                      <slot name="footer"></slot>                  </footer>                </div>            `        };

        new Vue({            el: "#app01",            components: {                "base-layout": baseLayout            }

        })    </script>

</body></html>

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。

非关系组件之间的通信

非父子组件之间可以通过一个中间Vue实例来进行通信。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../statics/vue.min.js"></script></head><body>    <div id="app">            <com-main></com-main>    </div>

    <script>

        let pizza = new Vue();

        let Alex = {            template: `                <div>                    <button @click="alexClick">点击向沛齐道歉</button>                </div>            `,            methods: {                alexClick: function () {

                    pizza.$emit("alex_apo", "原谅我吧，请你大保健~~~");                }            },        };

        let peiQi = {            template: `                <div v-show="isShow">原谅你了~~~</div>            `,            mounted () {                pizza.$on("alex_apo", function (alexsay) {                    if ( alexsay ) {                        console.log("原谅你了~~~");                    }                });            },            data () {                return {                    isShow: false                };            }        };

        let App = {            template: `                <div id="app">                    <alex></alex>                    <peiqi></peiqi>                </div>            `,            components: {                'alex': Alex,                'peiqi': peiQi            }        };

        new Vue({            el: "#app",            template: '<app></app>',            components: {                'app': App,            },        })

    </script>

</body></html>
在组件上使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

1
 
<input v-model="searchText">

等价于：

1234
 
<input  v-bind:value="searchText"  v-on:input="searchText = $event.target.value">

当用在组件上时，v-model 则会这样：

1234
 
<custom-input  v-bind:value="searchText"  v-on:input="searchText = $event"></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

12
 
将其 value 特性绑定到一个名叫 value 的 prop 上在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

123456789
 
Vue.component('custom-input', {  props: ['value'],  template: `    <input      v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"    >  `})

现在 v-model 就应该可以在这个组件上完美地工作起来了：

1
 
<custom-input v-model="searchText"></custom-input>

如下是在组件中使用v-model示例：

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
 
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script src="../statics/vue.min.js"></script></head><body>  <div id="app">  </div>

  <script>    let Model = {      template: `        <div>            <input              v-bind:value="value"              v-on:input="$emit('input', $event.target.value)"            />            <h1>{{ value }}</h1>      `,      props: ['value']    };

    let App = {      template: `        <div>            <custom-input v-model="searchText"></custom-input>      `,      components: {        'custom-input': Model,      },      data(){        return {          searchText: "",        }      }    };

    new Vue({      el: "#app",      template: `<App></App>`,      components: {        App,      }    })  </script></body></html>
使用组件的注意事项
注意事项一：单个根元素

当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。

12
 
<h1>Hello World</h1><h2>Hello Vue</h2>

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

1234
 
<div>  <h1>Hello World</h1>  <h2>Hello Vue</h2></div>
注意事项二：解析特殊HTML元素

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

123
 
<table>  <blog-post-row></blog-post-row></table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

123
 
<table>  <tr is="blog-post-row"></tr></table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

123
 
字符串 (例如：template: '...')单文件组件 (.vue)<script type="text/x-template">
使用组件实现路飞导航栏
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../statics/vue.min.js"></script>    <!-- 引入样式 -->    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">    <!-- 引入组件库 -->    <script src="https://unpkg.com/element-ui/lib/index.js"></script>    <style>        body {            margin: 0;            padding: 0;        }        .header {            position: fixed;            top: 0;            left: 0;            width: 100%;        }        .el-menu {            display: flex;            align-items: center;            justify-content: center;        }        .footer {            position: fixed;            bottom: 0;            left: 0;            width: 100%;        }        .header img {            position: absolute;            left: 80px;            top: -4px;            width: 118px;            height: 70px;            z-index: 999;        }

    </style></head><body>

    <div id="app">

    </div>

    <template id="header">        <div class="header">            <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">                <el-menu-item index="1">首页</el-menu-item>                <el-menu-item index="2">免费课程</el-menu-item>                <el-menu-item index="3">轻课</el-menu-item>                <el-menu-item index="4">学位课程</el-menu-item>                <el-menu-item index="5">智能题库</el-menu-item>                <el-menu-item index="6">公开课</el-menu-item>                <el-menu-item index="7">内部教材</el-menu-item>                <el-menu-item index="8">老男孩教育</el-menu-item>            </el-menu>        </div>

    </template>

    <template id="footer">        <div class="footer">

            <el-menu class="el-menu-demo" mode="horizontal" background-color="black">                <el-menu-item index="1">关于我们</el-menu-item>                <el-menu-item index="2">联系我们</el-menu-item>                <el-menu-item index="3">商业合作</el-menu-item>                <el-menu-item index="4">帮助中心</el-menu-item>                <el-menu-item index="5">意见反馈</el-menu-item>                <el-menu-item index="6">新手指南</el-menu-item>            </el-menu>

        </div>

    </template>

    <script>

        let pageHeader = {            template: "#header",            data() {                return {                    activeIndex: "1",                }            }        };

        let pageFooter = {            template: "#footer",        };

        let App = {            template: `                <div>                    <div>                        <page-header></page-header>

                    </div>                    <div>                        <page-footer></page-footer>                    </div>                </div>            `,            components: {                'page-header': pageHeader,                'page-footer': pageFooter,            }        };

        new Vue({            el: "#app",            template: `<app></app>`,            components: {                'app': App,            }        })

    </script></body></html>
 
 
 

vue组件系统的更多相关文章

  1. Vue 组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 每一个新技术的诞生,都是为了解决 ...

  2. 【Vue组件系统】

    目录 全局组件 局部组件 注册 子组件的用法 父子组件的通讯 子父组件的通讯 非父子组件的通讯 混入 插槽 具名插槽 使用组件的注意事项 使用组件实现导航栏 "vue.js既然是框架,那就不 ...

  3. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  4. Vue框架之组件系统

    1,Vue组件系统之全局组件 1.1Vue全局组件的在实例化调用Vue的模板中导入组件的名称 <!DOCTYPE html> <html lang="zh-cn" ...

  5. Vue.js之组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...

  6. vue学习之四组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...

  7. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  8. canvas实现倒计时效果示例（vue组件内编写）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  9. 一套代码小程序&Web&Native运行的探索06——组件系统

    接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...

随机推荐

  1. caffe安装编译问题-ImportError: No module named caffe

    问题描述 ~/Downloads/caffe$ python Python (default, Dec , ::) [GCC ] on linux2 Type "help", &q ...

  2. for (Sms sms : smsLists){}

    for (Sms sms : smsLists){ } //类似下面的for循环 :Smslists[i]!=NULL;i++) { Sms sms=Smslists[i]; } /*其实就是把Sms ...

  3. colinux安装指南

    1.colinux的安装 首先下载colinux安装文件,去http://www.colinux.org/下载默认安装,目录选择G:\colinux(根据自己需要选择,建议放在分区根目录下).选择不下 ...

  4. HDU 1896：Stones（优先队列）

    Stones Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Sub ...

  5. hdu 1723 DP/递推

    题意:有一队人(人数 ≥ 1),开头一个人要将消息传到末尾一个人那里,规定每次最多可以向后传n个人,问共有多少种传达方式. 这道题我刚拿到手没有想过 DP ,我觉得这样传消息其实很像 Fibonacc ...

  6. Sort An Unsorted Stack

    Given a stack of integers, sort it in ascending order using another temporary stack. Examples: Input ...

  7. leetcode:Palindrome Number【Python版】

    一次AC 题目要求中有空间限制,因此没有采用字符串由量变向中间逐个对比的方法,而是采用计算翻转之后的数字与x是否相等的方法: class Solution: # @return a boolean d ...

  8. knowledge-repo 知识管理简单试用

    knowledge-repo 是airbnb 开源的知识管理工具,只集成git 数据库等类型的存储 安装 pip install --upgrade "knowledge-repo[all] ...

  9. adnanh webhook 框架使用

    adnanh webhook 支持以下功能: 接收请求 解析header 以及负载以及查询变量 规则检查 执行命令 简单测试 使用docker-compose docker-compose 文件 ve ...

  10. Java的四种引用之强弱软虚

    在java中提供4个级别的引用:强引用.软引用.弱引用和虚引用.除了强引用外,其他3中引用均可以在java.lang.ref包中找到对应的类.开发人员可以在应用程序中直接使用他们. 1 强引用 强引用 ...