vue2.0 组件化

简单理解其实组件就是制作自定义的标签，这些标签在HTML中是没有的。

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。

<!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>

全局注册：

<!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>

局部注册：

<!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>

 

posted @ 2017-09-08 14:54  鱼樱前端  阅读(531)  评论(0)  编辑  收藏  举报