10.组件当中模板字符抽离写法

模板字符抽离的两种写法：

• <script type="text/x-template"></script>
• <template></template>
  然后通过id属性绑定

<div id="app">
        <cpn2></cpn2>
        <cpn></cpn>
    </div>
    <!-- 第一种方式 -->
    <script type="text/x-template" id="cpn2">
        <div>
            <h2>hello world</h2>
            <p>make the world a better place</p>
        </div>
    </script>
    <!-- 第二种方式 -->
    <template id="cpn1">
        <div>
            <h2>hello world2</h2>
            <p>make the world a better place2</p>
        </div>
    </template>
    <script>
        Vue.component('cpn', {
            template: '#cpn1'
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn2: {
                    template: '#cpn2'
                }
            }
        });
    </script>