<!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>