vue-組件化開發基礎

時間 2019-11-07

標籤 vue 組件開發基礎简体版

原文原文鏈接

組件化開發基礎、分爲三個步驟：

建立組件構造器對象
註冊組件
使用組件

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <!-- 三、使用組件 -->
    <my-cpn />
</div>

<body>
    <script>
        // 一、建立組件構造器對象
        const cnpC = Vue.extend({
            template: `
                <div>
                    <h2>我是標題</h2>
                    <p>組件化開發的思想</p>    
                </div>
            `
        })
        // 二、註冊組件
        Vue.component('my-cpn', cnpC)
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        })
    </script>
</body>

</html>