<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--view层-->
<div id="myApp">
<!--一级作用域 (放在组件作用域里没效果)-->
{{str}}
<aa></aa>
</div>
<!--template 定义组件-->
<template id="header">
<div>
<!--str 组件作用域 -->
<h1>我是logo {{str}}</h1>
<div class="">
<!--<a href="">首页</a>
<a href="">详情页</a>
<a href="">关于我们</a>-->
<a href="" v-for="item in arr">{{item}}</a>
</div>
</div>
</template>
<!--上面的template还可以写成这种-->
<script type="text/x-template">
</script>
</body>
<script type="text/javascript">
//注册组件
Vue.component("aa",{
template:"#header",
//组件内部data写法
data:function(){
return {
str:"hello data",
arr:["首页","详情页","关于我们"]
}
}
})
new Vue({
el:"#myApp",
data:{
str:"hello component"
}
})
</script>
</html>