创建一个自定义插件，实现一个登录页面

bug遍地跑

已于 2022-03-24 09:34:32 修改

阅读量4.4k

点赞数 13

分类专栏： vue基础文章标签： javascript vue.js 前端

于 2021-10-25 20:21:46 首次发布

本文链接：https://blog.csdn.net/weixin_47518648/article/details/120959506

版权

vue基础专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何使用Vue.js构建一个简单的登录组件。通过定义模板、数据属性和方法，实现了用户输入验证及登录功能。在组件中定义了一个插件，用于处理登录逻辑，并在全局注册以便复用。登录时，如果用户名为'123456'且密码为'123'，则显示'登录成功'，否则提示错误信息。

摘要由CSDN通过智能技术生成

运行结果如下：

话不多说，直接开整：

<body>
    <div id="app"><loginhtml></loginhtml></div>
    <template id="loginhtml">
        <div>
            用户名：<input type="text" v-model='admin'>
            <br>
            密码：<input type="password" v-model='password'>
            <br>
            <button v-on:click='login'>登录 </button>
            <br>
            <h3>{{msg}}</h3>
        </div>
    </template>
    <script>

        let plugin = {}
        plugin.install=function(Vue,options){
            console.log(options)
            Vue.prototype.llogin=function(ad,pa){
                console.log("啦啦啦啦啦")
                console.log(ad)
                console.log(pa)
                if(ad=="123456" && pa=="123")
                {
                    return "登录成功"
                }
                return "密码或用户名错误"
                
            }
        }
        Vue.use(plugin,{someoption:true})
        //console.log(Vue.prototype.$llogin('asdf','dafs'))
        Vue.component('loginhtml',{
            template:'#loginhtml',
            data(){
                return{
                    admin:'',
                    password:'',
                    msg:''
                }
            },
            methods:{
                
                login(){
                    console.log("执行全局之前")
                    this.msg=this.llogin(this.admin,this.password)
                    console.log(this.password)
                    console.log("执行全局之后")
                }
            }
           
        })
        
        var vm = new Vue({
            el:'#app',

        })
    </script>
</body>

谁还没有点初学者的艰难岁月呢？

We only need to be on ourselves own admantly.