vue 基礎入門筆記 11

click_man發表於2019-08-16
Vue筆記
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>

日照香爐生紫煙

相關文章