Day19:Vue.js（一） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天_Code
我們透過
addEventListener
監聽
input
，將輸入的值傳到
h1
上面，如果
input
內容更改了，
h1
也會更改。
以上的範例中，如果多個標籤需要連動更新程式碼就會變得很肥大，請看下方範例：
<h1 id="message"></h1>
<h1 id="message1"></h1>
<h1 id="message2"></h1>
<input type="text" id="result" value="Hello JavaScript">
<script>
document.querySelector('#message').innerHTML = document.querySelector('#result').value;
document.querySelector('#message1').innerHTML = document.querySelector('#result').value;
document.querySelector('#message2').innerHTML = document.querySelector('#result').value;
document.querySelector('#result').addEventListener('input', (el) => {
document.querySelector('#message').innerHTML = el.target.value;
document.querySelector('#message1').innerHTML = el.target.value;
document.querySelector('#message2').innerHTML = el.target.value;
</script>
</body>
有發現嗎？我只是要控制三個，程式碼直接多一倍出來不管是JS還是HTML。
渲染式的宣告是什麼？我們將上面的例子用Vue來改寫：
<div id="demo">
<h1> {{message}} </h1>
<h1> {{message}} </h1>
<h1> {{message}} </h1>
<input v-model="message">
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}).mount('#demo')
</script>
</body>
有沒有發現，同樣的效果，程式碼卻少很多行！
我們現在來看這段程式碼，其中
{{}}
內容會對應到Vue.js的實體的
message
的狀態，並且渲染至畫面，當我們想要多綁幾組
h1
的時候只需要修改HTML即可！
Vue與MVVM
MVVM
維基百科的解釋！，可以先看完再看以下Kuro大的解釋會比較清楚。
那和Vue有什麼關係呢？
Vue也是採用了MVVM的策略，將 DOM 的事件監聽與狀態的資料綁定封裝起來， 當使用者透過操作 View 或觸發網頁上的事件，ViewModel 層的 Vue.js 就會將狀態回存至 Model (由某個 JavaScript 物件表示)。 若 Model 裡的狀態被修改了，Vue.js 也會同步更新網頁模板 (View) 的對應內容。
元件系統就是，將網頁的應用元件化，可以將同樣邏輯，模板的東西拿來重複使用。
Hello Vue
用法像jQuery一樣，可以將:
<script src="http://unpkg.com/vue@next">//這是Vue3.0的 </script>
加在
</html>
的上方即可開始使用。
Vue的實體物件
使用Vue時，一開始我們需要建立一個實體物件，並將物件指定置
vm
中：
<div id="demo">
{{message}}
const vm = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}).mount('#demo')
vm這個新產生的實體物件就稱為『Vue.js實體物件』，我們將透過這個來掛載在網頁上的某個DOM節點，來控制節點的內容。
Vue實體的核心
同時我們建立Vue實體物件時，還會引入一個物件參數，這個物件參數就是Vue實體的核心，通常被稱為option物件，在這個物件中，我們會定義各式各樣的UI與模板相關的狀態，事件，函式...等，以上方為例的option就是以下這段：
data() {
return {
message: 'Hello Vue!'
掛載至DOM
Vue實體提供了mount()方法來指定：
<div id="demo">
{{message}}
const vm = Vue.createApp({
vm.mount('#demo')
將Vue實體掛載至<div id="demo">。
定義狀態與網頁模版的映射關係
掛載後，我們搭配Hello Vue的例子中來看：
<div id="demo">
{{message}}
const vm = Vue.createApp({
data() {
vm.mount('#demo')
上述程式碼中，掛載後並不會有任何的結果出現在網頁上，
因為Vue是採用MVVM模式來操作網頁內容，我們需要先將網頁畫面會用到的定義，再由HTML模板進行輸出。
Vue實體是透過 data屬性來儲存
<div id="demo">
{{message}}
const vm = Vue.createApp({
data() {
return {
message:'Hello Vue!'
vm.mount('#demo')
上述程式碼在實體中定義了message他的值為Hello Vue!字串。
輸出至網頁模版
Vue.js的模板語法是採用Mustache語法（大鬍子語法），就是上述程式碼中的{{message}}。
p.s.:Vue的Mustache語法允許做一些簡單的運算：
<div id="demo">
{{message}},
數量：{{amount}} 份
單價：{{price}} 元
總計：{{amount*price}} 元
<script>
const vm = Vue.createApp({
data() {
return {
message: '大麥克'
price: 199
amount: 2
vm.mount('#demo')
</script>
</body>
再Vue實體被建立的時候，Vue.js會自動為這個實體加上$data屬性，我們可以透過這個屬性來操作內部狀態vm.$data.xxxx。
這邊要特別注意，以上面例子來說如，結果可能如下：
vm.mount('#demo');
vm.$data.message = '麥香魚';
//Console結果：
//Uncaught TypeError: Cannot set property 'message' of undefined
可以寫成這樣
let product = vm.mount('#demo')
product.$data.message = '麥香魚';
//結果：網頁畫面的『大麥克』換成『麥香魚』
Try1:試著用$data將上述範例中大麥克改成麥香雞，份數改成5份，單價改成109。
template模板屬性
除了Vue.js的模板語法，在HTML使用{{}}，我們也可以透過實體核心(option)內的template屬性來定義：
<div id="app">
<script>
const vm = Vue.createApp({
template:
`<div>品項：{{message}}</div>
<div>單價：{{price}}</div>
<div>數量：{{amount}}</div>
<div>總計：{{amount*price}}</div>`,
data() {
return {
message: '大麥克',
price: 199,
amount: 2
vm.mount('#app');
</script>
</body>
上述範例中，我們使用template來定義網頁的畫面，寫法基本上是和HTML一樣的～
今日總結：
渲染式宣告
實體，實體核心，掛載至DOM
如何輸出到網頁畫面，如何用template
內容有點凌亂，算是我的學習筆記，文內的程式碼都會以Vue3.0來撰寫～
特別推薦一下Vue官方網站的首頁的小短片，個人覺得對認識Vue很有幫助！
別忘了有Try1呦～
