vue2.0 組件化

時間 2019-11-18

標籤 vue2.0 vue 組件简体版

原文原文鏈接

簡單理解其實組件就是製做自定義的標籤，這些標籤在HTML中是沒有的。html

組件註冊的是一個標籤，而指令註冊的是已有標籤裏的一個屬性。在實際開發中咱們仍是用組件比較多，指令用的比較少。vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
            <!--<my-component></my-component>-->
            <!--可重用性-->
            <!--<my-component2></my-component2>-->
            <!--此處不渲染-->
        </div>
        <!--<my-component></my-component>-->
        <!--此處不渲染-->
        <p>----------------分割線--------------------</p>
        <div id="app2">
            <my-component></my-component>
            <my-component2></my-component2>
            <my-component3></my-component3>
        </div>
        <my-component3></my-component3>
        <script>
            var myComponent = Vue.extend({
                template: "<div>這是個人第一個component</div>"
            })

            //全局組件
            Vue.component('my-component', myComponent)

            new Vue({
                el: "#app"
            })
            var hello = {
                template: "<div>這是個人第三個component</div>"
            }
            new Vue({
                el: '#app2',
                //局部組件
                components: {
                    "my-component2": {
                        template: "<div>這是個人第二個component</div>"
                    },
                    "my-component3": hello
                }
            })
        </script>
    </body>

</html>

全局註冊：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        <template id="myComponent">
            <div>這是一個component
                <p>123</p>
                <a>456</a>
            </div>
        </template>
        <script>
            //全局註冊
            /*Vue.component("my-component",{
                template:"#myComponent"
            })*/
            var vm = new Vue({
                el: "#app",
                components: {
                    "my-component": {
                        template: "#myComponent"
                    }
                }
            })
        </script>
    </body>

</html>

局部註冊：spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../vue2.2.js"></script>
    </head>
    <body>
        <div id="app">
            <parent-component></parent-component>            
        </div>        
        <script>
        var Child = {
            template:"<p>This is a child Component</p>"
        }        
        //var Parent = Vue.extend()        
        Vue.component("parent-component",{
            //局部註冊child組件，child組件只能在parent組件內使用。
            template:"<div><p>This is a parent Component</p><child-component></child-component></div>",
            components:{
                'child-component':Child
            }
        })
        new Vue({
            el:"#app"
        })
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。