<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义组件的两种方式</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <hello></hello> <my-world></my-world> </div> <script> /** * 方式1：先创建组件构造器，然后由组件构造器创建组件 */ //1.使用Vue.extend()创建一个组件构造器 var MyComponent=Vue.extend({ template:'<h3>Hello World</h3>' }); //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件 Vue.component('hello',MyComponent); /** * 方式2：直接创建组件(推荐) */ // Vue.component('world',{ Vue.component('my-world',{ template:'<h1>你好，世界</h1>' }); var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root el:'#itany', data:{ msg:'网博' } }); </script> </body> </html>