<div id="app">{{ name }}</div>
let vm = new Vue({
el: '#app',
data: {
name: 'aka allen'
}
})
el
,當我們不提供的時候,就必須呼叫 vm.$mount(el)
讓生命週期繼續往下走判斷是否有 template
,el
的部分就是 '#app'
或者自己訂下的其他名稱。let vm = new Vue({
template: `
<div id="replace">
<span> {{ name }} </span>
</div>
`,
data: {
name: 'aka allen'
}
})
再往下看生命週期,有 template
就會將他丟進 render
函式編譯,沒有 template
,就會抓元素的 outerHTML
來做為 template
編譯並渲染掛載。
vm.$mount(el)
( el 自行替換成可辨識的 id or class )就會看見內容被渲染了,並且可以發現若你有提供 template,裡面的內容是直接被替換掉的。以下是小範例,請自行琢磨。https://codepen.io/fiftybillionHuang/pen/NWNvJKV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鐵人賽Vue-CLI-30-01</title>
</head>
<body>
<div id="app"></div>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]>"></script>
<script>
new Vue({
el: '#app',
data: {
title: '鐵人賽第一天 - 組件'
}
});
</script>
</body>
</html>
Vue.component
物件來對組件做全域註冊,注意註冊的動作必須在new Vue
之前完成,若使用開發版 Vue, 且沒有在實例產生前完成全域註冊的話,會顯示 unknown custom element: <name-generator> - did you register the component correctly?
的錯誤訊息。