父与子之间通信练习

hanni_xie

于 2020-04-14 18:35:37 发布

阅读量140

点赞数

文章标签： vue

vue 作业

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
       <title>父与子之间通信练习</title>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   </head>
<body>
    <div id='container'>
       <p>{{msg}}</p>
    <my-login></my-login>
    </div>
<script>
    Vue.component('my-label',{
           props:["myLabel"],
           template:'<div><label>{{myLabel}}</label></div>'
             })
    Vue.component("my-input",{
           template:'<div><input type="text" /></div>'
         })
    Vue.component("my-button",{
           props:["myButton"],
           template:'<div><button>{{myButton}}</button></div>'
        })
   Vue.component("my-login",{
          data:function(){
          return {uname:"用户名",upwd:"密码",login:"登录",register:"注册"}
     },
          template:`
             <div>
             <my-label v-bind:myLabel="uname"></my-label>
             <my-input></my-input><br>
             <my-label v-bind:myLabel="upwd"></my-label>
             <my-input></my-input><br>
             <my-button v-bind:myButton="login"></my-button><br>
             <my-button v-bind:myButton="register"></my-button><br>
             
             
             
             
             </div>`
   }) 
      new Vue({
        el:'#container',
        data:{
              msg:"Hello VueJs"
    }
})
</script>
</body>
</html>