綜合以上模板語法的學習，過程中照著教學步驟做了一遍，官方範例都很清楚，但實際做的時候一定會遇到滿多問題的，所以想了一個簡單的例子讓自己實作，雖然被範例洗腦太深可能會大同小異就是了XD。

今天的練習的主題：謎樣的這樣母湯Tom姆熊之粉墨登場
至於什麼是這樣母Tom姆熊？既然這麼誠心誠意發問，那我就大發慈悲告訴你
˙
˙
˙

94我不服來辯R

Tom是我們隊的吉祥物，憂鬱中又帶點警世意味，彷彿一直在你耳邊說：ㄚ捏甘丟？
此時的我真的是被Tom盯得背脊發涼(你是在看ㄙㄒ)，冬天快到了...，要不然給Tom加個地毯好了

I have tom, I have a carpet~
uh! tom carpet (◕ܫ◕)

這時候我們有Tom有carpet，然而一隻吉祥物怎麼能沒有華麗的開場動作，這個開場動作就叫，imComing。
另外Tom有一個好朋友叫spiral(哪來的)，在他華麗出場的時候怎麼能不當花瓶，所以在他出場的時候，他就要當花瓶。

從上面的故事我們整理一下Tom跟他好朋友的狀態(class)：

• Tom的class
  • hide
  • imcoming
  • carpet
• spiral的class
  • imFlower

差點忘了，在華麗登場前，也是要有一個路人甲在那邊醞釀，他叫sensor，下圖那個圓圈87臉就是他：

總結一下上述動作，在出場前Tom要躲起來，所以會先給他一個hide的class，碰到sensor後，Tom要出場了，所以移除他的hide class新增imcoming以及carpet(出場就出場幹嘛還要carpet)，spiral這時也會新增imflower的class在後面當花瓶。

所以html結構長這樣：

<div id="app">
   <img id="spiral" :class="{imflower:isTrue}" src="svg/spiral.svg" alt="">
   <div id="tom" :class="tomClass">
     <img src="https://i.imgur.com/L8380PA.png" alt="">
   </div>
   <div id="sensor" @mouseenter="toggle" @mouseleave="toggle">(◕ܫ◕)</div>
 </div>

初始狀態：

#spiral
#tom.hide

登場狀態：

#spiral.imflower
#tom.imcoming.carpet

因此在初始給定data時只有tomclass的hide是true，並在sensor使用@mouseenter及@mouseleave綁定methods裡的togglefunction，而在toggle內要做的就是把data值原本true的變false、false變true。

new Vue({
     el: "#app",
     data: {
       tomClass: {
         imcoming: false,
         carpet: false,
         hide: true
       },
       isTrue: false
     },
     methods: {
       toggle() {
         this.tomClass.carpet = !this.tomClass.carpet;
         this.tomClass.imcoming = !this.tomClass.imcoming;
         this.tomClass.hide = !this.tomClass.hide;
         this.isTrue = !this.isTrue;
       }
     }
   });

最後粉墨登場啦 燈燈

(結果最後沒人知道spiral是誰，是後面的彈簧啦)

今天練習使用v-on及v-bind來做一個腦殘的實作，明天來學習v-model指令