Vue实现一个简单的登录页面【自定义】

最新推荐文章于 2024-06-16 18:56:06 发布

南蓬幽

最新推荐文章于 2024-06-16 18:56:06 发布

阅读量5.1k

点赞数 2

分类专栏： web 文章标签： Vue 自定义插件 install 组件注册 Vue.use

本文链接：https://blog.csdn.net/qq_46556714/article/details/121165236

版权

web 专栏收录该内容

16 篇文章 29 订阅

订阅专栏

创建一个自定义插件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component><my-component/>
      </div>
      <script>
        // 定义一个MyPlugin（自定义插件）对象
        let MyPlugin = {}
        // 编写插件对象的install方法
        // install()方法有两个参数，第1个参数Vue是Vue的构造器，options是一个可选的配置对象。
        MyPlugin.install = function (Vue, options) {
          // 在插件中为Vue创建组件myComponent
          Vue.component('my-component', {
            template: '<button>{{msg}}</button>',
            data() {
              return {
                msg: '登录'
              }
            }
          })
        }
        // 调用Vue.use()方法安装插件，在第1个参数中传入插件对象MyPlugin，第2个参数传入可选配置。
        Vue.use(MyPlugin, {
          someOption: true
        })
        var vm = new Vue({
          el: '#app'
        })
      </script>
      
</body>
</html>

需要下载vue.js然后替换成自己的地址。

南蓬幽

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实现一个简单的登录页面【自定义】

创建一个自定义插件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫