vue 基礎入門筆記 11:元件

September發表於2019-08-16
  1. 什麼是元件
    • 為了拆分Vue示例的程式碼量,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼的功能,就可以去呼叫對應的元件即可
    • 模組化: 是從程式碼邏輯的角度進行劃分的,方便程式碼分層開發
    • 元件和: 是從UI介面的角度進行劃分的
  2. 全域性元件和區域性元件
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
    <div id="app">
        <app2></app2>
        <big></big>
    </div>
    <template id="app2">
        <h1>哈哈哈哈</h1>
    </template>
    <template id="big">
        <h2>嘿嘿</h2>    
    </template>
    <script>
        //元件建立的一種方法,直接指向dom的 id
        //定義全域性元件
        Vue.component('app2',{
            template:'#app2'
        })
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{},
           //定義區域性元件
           components:{
                big:{
                    template:'#big'
                }
           }
        });
    Vue.config.devtools = true
    </script>
    </body>
    </html>
本作品採用《CC 協議》,轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章