vue复合组件----注册表单

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <my-article></my-article>
    </div>
    <script>
        //要采用组件化的方式来编写页面，
    // 把任何一个可被重用的元素封装成组件
    // everything is component
    Vue.component("my-title",{
        template:`<div>
                    <h1>清风手纸</h1>
                    <h4>原木</h4>
        </div>`
    })
    Vue.component("my-content",{
    //一个就可以用引号或者``
        template:'<p>源于纯净，归于健康</p>'
    })
    Vue.component("my-article",{
        //当调用多个组件时要用``符号,而且要用顶层标签包含
        template:`
            <div>
                <my-title></my-title>
                <my-content></my-content>
            </div>
        `
    })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <!--调用根组件  -->
        <my-form></my-form>
    </div>
    <script>
        //创建组件my-user
        Vue.component("my-user",{
            template:`
                <label>用户名：</label>
            `
        })
        Vue.component("user-input",{
            template:`
                <input type="text" placeholder="请输入用户名"/>
            `
        })
        Vue.component("my-pwd",{
            template:`
                <label>密码：</label>
            `
        })
        Vue.component("pwd-input",{
            template:`
                <input type="text" placeholder="请输入密码"/>
            `
        })
        Vue.component("my-login",{
            template:`
                <button>登录</button>
            `
        })
        Vue.component("my-resign",{
            template:`
                <button>注册</button>
            `
        })
        //复合组件作为根组件名字必须是烤串式的,驼峰的会报错
        Vue.component("my-form",{
        //可以用table、form、div等……
            template:`
                <form>
                    <my-user></my-user>
                    <user-input></user-input>
                    <br>
                    <my-pwd></my-pwd>
                    <pwd-input></pwd-input>
                    <br>            
                    <my-resign></my-resign>
                    <my-login></my-login>

　　　　　　　　　　　　　//写法或者
　　　　　　　　　　　　　　<my-login/>

                </form>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>