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 根实例中，把这个组件作为自定义元素来使用。

  1. 12345678910111213141516171819202122232425262728
 
  1. <!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>      `    });
  2.  
  3.     new Vue({      el: "#app",    });  </script></body></html>
组件的参数

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

  1. 123456789101112131415161718192021222324252627282930
 
  1. <!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>`    });
  2.  
  3.     new Vue({      el: "#app",    });
  4.  
  5.   </script></body></html>
组件的复用

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

  1. 1234567891011121314151617181920212223242526272829303132
 
  1. <!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>`    });
  2.  
  3.     new Vue({      el: "#app",    });
  4.  
  5.   </script></body></html>

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

Data必须是一个函数

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

  1. 1234567891011121314151617181920212223242526272829303132
 
  1. <!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>`    });
  2.  
  3.     new Vue({      el: "#app",    });
  4.  
  5.   </script></body></html>
局部组建的注册

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

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

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

局部组件的第一种使用方式
  1. 12345678910111213141516171819202122232425262728293031323334353637
 
  1. <!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        }      }    };
  2.  
  3.     new Vue({      el: "#component-demo",      // 第二部，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
局部组件的第二种使用方式
  1. 123456789101112131415161718192021222324252627282930313233343536
 
  1. <!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        }      }    };
  2.  
  3.     new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>

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

在局部组件中使用子组件
  1. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
 
  1. <!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;    }
  2.  
  3.   </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的
  4.  
  5.     let Fcontent = {      template: `        <div>          <span>这是头条</span>
  6.  
  7.         </div>      `    };
  8.  
  9.     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      }    };
  10.  
  11.     new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
父子组件的通信
  1. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
 
  1. <!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;    }
  2.  
  3.   </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的
  4.  
  5.     let Fcontent = {      template: `        <div>          <span>这是头条</span>          {{ fdata }}        </div>      `,      props: ['fdata']    };
  6.  
  7.     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      }    };
  8.  
  9.     new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
子父组件的通信

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

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

  1. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
 
  1. <!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;    }
  2.  
  3.   </style></head><body>  <div id="component-demo">  </div>  <script>    // 定义一个局部组件，其实就是一个变量，它是一个object类型    // 属性与全局组件是一样的
  4.  
  5.     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);        }      }    };
  6.  
  7.     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;        }      }    };
  8.  
  9.     const VM = new Vue({      el: "#component-demo",      // 第二种使用方式，不会将div渲染进DOM，以template为根元素      template: `<my-header></my-header>`,      // 第二步，需要在根实例当中使用它      components: {        'my-header': Header      }    });  </script></body></html>
混入

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

  1. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
 
  1. <!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>
  2.  
  3.     <script>        let mixs = {            methods: {                show: function (name) {                    console.log(`${name} is here!`);                },                hide: function (name) {                    console.log(`${name} is gone!`);                },            }        };
  4.  
  5.         // 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",        // });
  6.  
  7.         let myAlex = {            template: `                    <div>                        <button @click="show('alex')">点我显示alex</button>                        <button @click="hide('alex')">点我隐藏alex</button>                    </div>
  8.  
  9.             `,            // methods: {            //     show: function (name) {            //         console.log(`${name} is here!`);            //     },            //     hide: function (name) {            //         console.log(`${name} is gone!`);            //     }            // }            mixins: [mixs],        };
  10.  
  11.         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],        };
  12.  
  13.         new Vue({            el: "#mixin-demo",            components: {                "my-alex": myAlex,                "my-peiqi": myPeiqi,            }        })    </script>
  14.  
  15. </body></html>
插槽

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

  1. 123456789101112131415161718192021222324252627282930313233343536373839404142434445
 
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .nav-link {            width: 100px;            height: 100px;
  2.  
  3.             float: left;            margin-left: 5px;            text-align: center;            line-height: 100px;        }
  4.  
  5.     </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>
  6.  
  7.     <script>        Vue.component('com-content', {          template: `            <div class="nav-link">              <slot></slot>            </div>          `        });
  8.  
  9.         new Vue({            el: "#app01",        })    </script>
  10.  
  11. </body></html>
具名插槽

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

  1. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
 
  1. <!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>
  2.  
  3.     <script>        let baseLayout = {            template: `                <div class="container">                  <header>                      <slot name="header"></slot>                  </header>                  <main><slot></slot></main>                  <footer>                      <slot name="footer"></slot>                  </footer>                </div>            `        };
  4.  
  5.         new Vue({            el: "#app01",            components: {                "base-layout": baseLayout            }
  6.  
  7.         })    </script>
  8.  
  9. </body></html>

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

非关系组件之间的通信

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

  1. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
 
  1. <!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>
  2.  
  3.     <script>
  4.  
  5.         let pizza = new Vue();
  6.  
  7.         let Alex = {            template: `                <div>                    <button @click="alexClick">点击向沛齐道歉</button>                </div>            `,            methods: {                alexClick: function () {
  8.  
  9.                     pizza.$emit("alex_apo", "原谅我吧，请你大保健~~~");                }            },        };
  10.  
  11.         let peiQi = {            template: `                <div v-show="isShow">原谅你了~~~</div>            `,            mounted () {                pizza.$on("alex_apo", function (alexsay) {                    if ( alexsay ) {                        console.log("原谅你了~~~");                    }                });            },            data () {                return {                    isShow: false                };            }        };
  12.  
  13.         let App = {            template: `                <div id="app">                    <alex></alex>                    <peiqi></peiqi>                </div>            `,            components: {                'alex': Alex,                'peiqi': peiQi            }        };
  14.  
  15.         new Vue({            el: "#app",            template: '<app></app>',            components: {                'app': App,            },        })
  16.  
  17.     </script>
  18.  
  19. </body></html>
在组件上使用v-model

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

  1. 1
 
  1. <input v-model="searchText">

等价于：

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

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

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

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

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

写成代码之后是这样的：

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

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

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

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

  1. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
 
  1. <!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>
  2.  
  3.   <script>    let Model = {      template: `        <div>            <input              v-bind:value="value"              v-on:input="$emit('input', $event.target.value)"            />            <h1>{{ value }}</h1>      `,      props: ['value']    };
  4.  
  5.     let App = {      template: `        <div>            <custom-input v-model="searchText"></custom-input>      `,      components: {        'custom-input': Model,      },      data(){        return {          searchText: "",        }      }    };
  6.  
  7.     new Vue({      el: "#app",      template: `<App></App>`,      components: {        App,      }    })  </script></body></html>
使用组件的注意事项
注意事项一：单个根元素

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

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

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

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

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

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

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

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

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

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

  1. 123
 
  1. 字符串 (例如：template: '...')单文件组件 (.vue)<script type="text/x-template">
使用组件实现路飞导航栏
  1. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
 
  1. <!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;        }
  2.  
  3.     </style></head><body>
  4.  
  5.     <div id="app">
  6.  
  7.     </div>
  8.  
  9.     <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>
  10.  
  11.     </template>
  12.  
  13.     <template id="footer">        <div class="footer">
  14.  
  15.             <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>
  16.  
  17.         </div>
  18.  
  19.     </template>
  20.  
  21.     <script>
  22.  
  23.         let pageHeader = {            template: "#header",            data() {                return {                    activeIndex: "1",                }            }        };
  24.  
  25.         let pageFooter = {            template: "#footer",        };
  26.  
  27.         let App = {            template: `                <div>                    <div>                        <page-header></page-header>
  28.  
  29.                     </div>                    <div>                        <page-footer></page-footer>                    </div>                </div>            `,            components: {                'page-header': pageHeader,                'page-footer': pageFooter,            }        };
  30.  
  31.         new Vue({            el: "#app",            template: `<app></app>`,            components: {                'app': App,            }        })
  32.  
  33.     </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. 2018C语言助教总结

    回顾 很荣幸得到各位老师的认可,担任计科3班和4班的C语言课程助教,很感谢车老师和牛老师一学期的帮助,使得我更好的担任助教一职.我班学生59名,很愉快的与同学们度过一个美好的学期,其实作为助教同样从学 ...

  2. show point on image

    show point on image... for ( int i = 0; i < probp.size(); i++ ) { cv::Point pt = probp[i]; Distan ...

  3. stm32 ADC配置

    STM32 的 ADC 是 12 位逐次逼近型的模拟数字转换器,它有 18 个通道,可测量 16 个外部和 2 个内部信号源 各通道的 A/D 转换可以单次.连续.扫描或间断模式执行. ADC 的结果 ...

  4. 关于bfs时间轴

    对于bfs,由于是通过不断将平行位置的元素加入到队列进行的,所以它在一定情况下淡化了与队列外部的  "时间"   联系观念,通过一个数组记录内部的 "时间" 这 ...

  5. 初次实践数据库--SQL Server2016

    初学数据库使用 安装了SQL Server2016的开发者版本,本来以为就可以愉快地开始数据库的挖坑了,发现开出来之后除了创建数据库.选择数据库以外,并没有什么操作. 后来才发现还需要再安装SSMS( ...

  6. Restrictions用法

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <>  Restrictions.ne() 不等于not equal >  Restrict ...

  7. Html页面Dom对象之Element

    HTML DOM Element 对象 HTML DOM 节点 在 HTML DOM (文档对象模型)中,每个部分都是节点: 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是 ...

  8. [转]G++与GCC的区别

    转自http://www.52pojie.cn/thread-58109-1-1.html 误区一:gcc只能编译c代码,g++只能编译c++代码两者都可以,但是请注意:1.后缀为.c的,gcc把它当 ...

  9. JS前端数据多条件筛选(商品搜索)

    有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛 ...

  10. dbt 的知识文档管理

    dbt 支持docs的管理,可以方便进行分享,以及大家的可视化工作 有一篇文档讲的特别好分析了知识共享,知识管理的重要性(dbt 对应公司的ceo) https://blog.fishtownanal ...