<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- <mylogin></mylogin> --> <login></login> </div> <script> // 定义组件的时候，如果要定义全局的组件， Vue.component('组件的名称', {}) // 通过 对象 字面量的形式， 定义了一个 组件模板对象 var login = { template: '<h1>1234</h1>' } // 通过 Vue.component 把 组件模板对象，注册为一个全局的Vue 组件，同时，为这个组件起了一个名称，可以让我们 通过 标签形式，在页面中直接引入这个组件 // Vue.component('mylogin', login) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { // '组件的名称': 组件的模板对象 // 'mylogin': login login } }); </script> </body> </html>