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. arcgis-tomcat-cors

    C:\Program Files\ArcGIS\Server\framework\runtime\tomcat\webapps\arcgis#rest\WEB-INF\ (1)添加cors-filte ...

  2. spark 与 Hadoop 融合后 Neither spark.yarn.jars nor spark.yarn.archive is set

    参考文献: http://blog.csdn.net/lxhandlbb/article/details/54410644 每次提交Spark任务到yarn的时候,总会出现uploading reso ...

  3. Android GUI架构之MVC模式

    1. Android UI框架 和其他Java UI框架一样,Android UI框架也是单线程和事件驱动的,采用MVC模式进行组织. 2. MVC模式 M:Model,是应用的核心,也就是应用真正想 ...

  4. k8s dockerk个人学习(1)

    虚拟机部署k8s 1. 创建虚拟机 虚拟机用的是virtualBox和vagrant工具,百度安装virtualBox和vagrant 创建vagrant目录并创建文件Vagrantfile内容为 V ...

  5. 【CQOI2008】中位数

    题不难,但是思路有意思,这个是我自己想出来的OvO 原题: 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. n<= ...

  6. LG1116 【车厢重组】

    前言 看了大家的做法,什么冒泡排序,插入排序,树状数组,线段树,都好厉害呐,我都没想出来 但我发现竟然还没有人用主席树,于是我跟大家交流一下 主席树 做法 显然我们有 \(Ans=\sum_{i=1} ...

  7. 在Docker中运行crontab

    在把自己的项目通过Docker进行打包时,由于项目中用到了crontab,不过使用到的基础镜像python:3.6-slim并没有安装这项服务,记录下在镜像中安装和配置crontab的过程. Dock ...

  8. /proc/sys/vm/drop_caches 清理缓存

    1. 使用方法 /proc/sys/vm/drop_caches默认是0 # echo 1 > /proc/sys/vm/drop_caches; free pagecache, use# ec ...

  9. [连载]Java程序设计(03)---任务驱动方式：寻找高富帅和屌丝

    版权声明:本文为博主原创文章,请在转载时说明出处. https://blog.csdn.net/jackfrued/article/details/26163877 任务:相同在上一家公司.公司还须要 ...

  10. java调用.net的webservice

    目录(?)[-] 一参考文献 二概述 三实例 注意点   一.参考文献 1. http://www.cnblogs.com/xuqifa100/archive/2007/12/13/993926.ht ...