Vue組件的定義、註冊和調用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組件</title>
</head>
<body>
</body>
</html>
<body>
<div id="app">
<heads></heads><!--3.組件在註冊的父組件模板裏以標簽的形式調用-->
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<!--0.定義模板-->
<script type="text/template" id="temp1"><!--該script類型是模板-->
<div><!--該處只能有兩個頂層標簽，即不能有同級的其他標簽如<div></div><div></div>-->
<h3>頭部</h3>
<p>{{mes}}</p><!--組件的data值在模板中調用-->
</div>
</script>
<!--<template id="temp1"></template>該標簽可以代替script模板-->
<script>
//1.定義一個組件，子組件的定義必須在父組件的前面，因為在父組件註冊時要用到定義好 的子組件
var Heads={//組件名首字母大寫，不能用html5標簽
template:"#temp1",//模板，和組件用id進行關聯
data:function(){//數據的格式必須是函數
return{//這裏必須是return
mes:"數據"//值在模板中調用
}
}
}
//2.註冊組件
var app = new Vue({//app是最大的組件 根組件，擁有特殊的el屬性
el:"#app",
data:{
msg:"hello"
},
components:{//英文組件的意思,子組件註冊到父組件下，註冊到app下就要在app容器下以標簽的形式調用
heads:Heads//鍵和值
}
})
</script>
Vue組件的定義、註冊和調用