情景回現：

<div id="app-28">
    <!--用在元件上-->
    <myComponent v-bind:class="{active:isActive}"></myComponent>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
    Vue.component('myComponent',{
	    template:'<p class="h3 h4">選單,採狗，菜園子</p>'
    })
    var app28 = new Vue({
	    el:'#app-28',
	    data:{
		    isActive:true
	    }
    })
</script>
 

錯誤現象：

html表象：

解析不出來，真是坑死人了。。。

解決方法：元件名稱只有首字母可以出現大寫，中間不能出現大寫。

修改方法：

<div id="app-28">
	<!--用在元件上-->
	<mycomponent v-bind:class="{active:isActive}"></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent',{
		template:'<p class="h3 h4">選單,採狗，菜園子</p>'
	})
    var app28 = new Vue({
		el:'#app-28',
		data:{
			isActive:true
		}
	})
</script>
 

問題解決。