最近學習到Vue.js的元件部分，在看完官方文件之後還是一頭霧水，於是自己試驗了一下，將試驗結果記錄下來，以便查閱。

我在跟著文件做了一遍之後，渲染結果為：

<div id="example">
  <div>A custom component!</div>
</div>

<div id="example">
  <div>custom component!</div>
</div>
 

<div id="point"></div> <!-- 元件掛載在這個div之內 -->

// 建立可複用的構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
})
// 建立一個 Profile 例項
var profile = new Profile({
  data: {
    firstName: 'Walter',
    lastName: 'White',
    alias: 'Heisenberg'
  }  
})
// 掛載到元素上
profile.$mount('#point')
 

var profile = new Profile({})

var Profile = Vue.extend({})

建立例項的時候也可以用el屬性來掛載元件，比如：

var profile = new Profile({
		el:"#point",
		  data: {
		    firstName: 'Walter',
		    lastName: 'White',
		    alias: 'Heisenberg'
		  }  
		})

profile.$mount('#point')