<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Component</title> <!--引用vue.js文件 没有可以在网上下载--> <script src="vue.js"></script> <script> //方法1,先创建组件构造器,然后由组件构造来创建组件 var myComponent=Vue.extend({ template:'<h3>Hello Word</h3>' }) Vue.component('Hello',myComponent); //方法2,直接创建组件 Vue.component('hello2',{ template:'<h2>你好,lqwvje</h2>' }) window.onload=function(){ new Vue({ el:'#my',//element元素 data:{ msg:'hello666' }, components:{//局部组件 //方法3 'my-address':{ template:'<div>欢迎使用Vue组件</div>' }, //方法4 'my-list':{ template:'#my-list', data(){ return{ msg:'lqwvje罗分明123', lists:['a','b','c'] } } } } }) } </script> <!--方法4的一部分--> <template id='my-list'> <!--注:只能有一个DIV不能有多个并列,div子项可以多个并列--> <div> <!--局部的--> {{msg}} <!--遍历数组--> <li v-for='item in lists'>{{item}}</li> </div> </template> </head> <body> <div id="my"> <!--全局的--> {{msg}} <Hello></Hello><!--引用方法1--> <hello2></hello2><!--引用方法2--> <my-address></my-address><!--引用方法3--> <my-list></my-list><!--引用方法4--> </div> </body> </html>