[Vue基础实战]组件基本练习

练习1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件练习1</title>   
</head>
<body>    
    <div id="app">
      <my-login></my-login>    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var login=Vue.extend({
            template:'<h3>登录</h3>'
        });
        Vue.component('myLogin',login);

        const app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

 练习2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件练习2</title>    
</head>
<body>    
    <div id="app">
      <my-login></my-login>    
    </div>
    <script src="../js/vue.js"></script>
    <script>        
        Vue.component('myLogin',{
            template:'<h3>登录</h3>'
        });
        const app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

练习3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件练习3</title>   
</head>
<body>    
    <div id="app">
      <my-login></my-login>    
    </div>
    <script src="../js/vue.js"></script>
    <script id="tmp1" type="x-template">
        <h1>注册</h1>
    </script>   
    <script>        
        Vue.component('myLogin',{
            template:'#tmp1'
        });
        const app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

 练习4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件练习4</title>   
</head>
<body>    
    <div id="app">
      <login></login> 
      <reg></reg>     
    </div>
    <script src="../js/vue.js"></script>
    <script id="tmp1" type="x-template">
        <h1>登录</h1>
    </script>
    <script id="tmp2" type="x-template">
        <h1>注册</h1>
    </script>    
    <script>
        const app = new Vue({
            el: '#app',
            components: {
                login:{
                    template:'#tmp1'
                },
                reg:{
                    template:'#tmp2'
                }
             }      
        });
    </script>
</body>
</html>

练习5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件练习5</title>   
</head>
<body>    
    <div id="app">
      <account></account>    
    </div>
    <script src="../js/vue.js"></script>
    <script id="tmp1" type="x-template">
        <div>
            <h3>登录</h3>
            <a href="#" @click.prevent="login">登录</a>
            <a href="#">注册</a>         
        </div>      
    </script>    
    <script>
        Vue.component('account',{
            template:'#tmp1',
            data(){
                return{
                    title:'后台登录'
                }
            },
            methods: {
                login() {
                    console.log('点击了'+this.title+'页面登录按钮');                    
                }
            }
        });
        const app = new Vue({
            el: '#app',
            components: {
                login:{
                    template:'#tmp1'
                }
             }      
        });
    </script>
</body>
</html>

 

posted @ 2021-01-14 18:09  dshow  阅读(223)  评论(0)  编辑  收藏  举报