<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--内联模板--</h1>
        <div id="example1">
            <my-component inline-template>
              <div>
                <p>These are compiled as the component's own template.</p>
                <p>Not parent's transclusion content.</p>
              </div>
            </my-component>
        </div>
        <script>
        Vue.component('my-component', {})
        // Vue 根实例
        var example1 = new Vue({
            el: '#example1'
        })
        </script>
        </div>
        
        <div>
        <h1>--X-Template--</h1>
        <div id="example2">
            <hello-world></hello-world>
        </div>
        <script type="text/x-template" id="hello-world-template">
          <p>Hello hello hello</p>
        </script>
        <script>
        Vue.component('hello-world', {template: '#hello-world-template'})
        // Vue 根实例
        var example2 = new Vue({
            el: '#example2'
        })
        </script>
        </div>
        
    </body>
</html>

 

运行效果图：