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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM