vue 1 定义组件的两种方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件的两种方式</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 方式1：先创建组件构造器，然后由组件构造器创建组件
         */
        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent=Vue.extend({
            template:'<h3>Hello World</h3>'
        });
        //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
        Vue.component('hello',MyComponent);
        
        /**
         * 方式2：直接创建组件(推荐)
         */
        // Vue.component('world',{
        Vue.component('my-world',{
            template:'<h1>你好，世界</h1>'
        });

        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
            el:'#itany',
            data:{
                msg:'网博'
            }
        });    
    </script>
</body>
</html>

 

posted @ 2019-12-06 15:44  独孤白菜  阅读(284)  评论(0)    收藏  举报