Vue-组件模板抽离的写法

VUE的模板分离写法。

1、第一种(不常用)

    <script type="text/x-template" id="myCpm">
        <div>
            <h2>模板分离的写法</h2>
        </div>
    </script>

2、第二种

    <template id="myCpm2">
        <div>
            <h2>模板分离的写法</h2>
        </div>
    </template>

****完整代码*****

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <cpn></cpn>
    <cpn2></cpn2>
</div>

<body>
    <!-- 第一种 -->
    <script type="text/x-template" id="myCpm">
        <div>
            <h2>模板分离的写法</h2>
        </div>
    </script>
    <!-- 第二种 -->
    <template id="myCpm2">
        <div>
            <h2>模板分离的写法</h2>
        </div>
    </template>

    <script>
        Vue.component('cpn', { template: '#myCpm' })
        // 第一种注册全局组件
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            components: {
                'cpn2': { template: '#myCpm2' }
            }
            // 第二种注册局部组件
        })
    </script>
</body>

</html>

 

posted @ 2019-10-30 15:29  个人升级打怪  阅读(2595)  评论(1编辑  收藏  举报