XOOPS輕鬆架

Vue.js 3.0 筆記
=============

1. 範例： 
    ```markup
    <script>
    import { ref } from "vue";
    export default {
      setup() {
        const isAmin = ref(false);
        const goAmin = () => {
          isAmin.value = !isAmin.value;
        };
        return { isAmin, goAmin };
      },
    };
    </script>
    
    <template>
      <button @click="goAmin">click</button>
      <transition name="tad">
        <div id="box" v-if="isAmin"></div>
      </transition>
    </template>
    
    <style>
    .tad-enter-active {
      animation: tad-in 0.5s;
    }
    .tad-leave-active {
      animation: tad-in 0.5s reverse;
    }
    @keyframes tad-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.25);
      }
      100% {
        transform: scale(1);
      }
    }
    
    #box {
      width: 100px;
      height: 100px;
      background-color: rgb(109, 148, 111);
    }
    </style>
    
    ```
2. reverse 是反轉之意
 
範例內容：

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域