XOOPS輕鬆架 - 線上書籍

:::

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

1. 中文手冊：<https://juejin.cn/post/6844903919907258382#articleHeader19>
2. 安裝 
    ```bash
    npm install --save axios vue-axios 
    ```
3. 一般會等動元素都渲染完成才去執行api，以免資料抓回來沒地方塞，也就是 `onMounted(()=>{})` 中去執行api 
    ```markup
    <div id="app">
      <ul class="box" v-show="isLoad">
        <li v-for="(news, i) in allNews.data" :key="news.nsn">
          {{i + 1}}. <a :href="news.url">{{news.news_title}}</a>
        </li>
      </ul>
      <img v-show="!isLoad" class="load" src="https://i.giphy.com/media/52qtwCtj9OLTi/giphy.webp" alt="" />
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const { ref, reactive, onMounted } = Vue;
      const app = {
        setup() {
          const allNews = reactive({ data: [] });
          const isLoad = ref(false);
    
          onMounted(() => {
            axios.defaults.baseURL = "https://www.lces.tn.edu.tw";
            axios
              .get("/modules/tadnews/app_api.php?op=list_all_news")
              .then((res) => {
                allNews.data = res.data;
                isLoad.value = true;
              })
              .catch((error) => {
                console.dir(error);
              });
          });
    
          return {
            allNews,
            isLoad,
          };
        },
      };
      Vue.createApp(app).mount("#app");
    </script>
    ```
4. 
 
完整範例：

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1731

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器