Vue 動態路由設定

import { onMounted, ref } from "vue";
export default {
  setup() {
    const inputText = ref(null); // 變數需跟綁定的ref一樣名稱
    onMounted(() => {
      inputText.value.focus(); // 回傳後即可使用inputText
    });
    return {
      inputText, // 回傳inputText
    };
  },
};

閱讀全文 »

Vue 的 $event 事件回傳

發表於 2021-03-14 更新於 2022-04-26 分類於 Vue3 Disqus：

$event 事件回傳

取得事件的 target

export default {
  setup() {
    const clickFn = (e) => {
      console.log(e.target);
    };
    return {
      clickFn,
    };
  },
};

閱讀全文 »

使用 Vue transition 製作動畫過渡組件

發表於 2021-03-14 更新於 2022-04-26 分類於 Vue3 Disqus：

Enter & Leave Transitions

Vue.js 將過場漸變的效果包裝成一個獨立的 transition 元件，再由開發者自行定義元素的進場 (Enter) 、退場 (Leave) 以及動畫過程漸變 (Transitions) 的樣式。動畫執行完後才會把 DOM 元素拔掉

閱讀全文 »

組件資料傳遞 emit-子層傳參數到父層

發表於 2021-03-14 更新於 2022-04-26 分類於 Vue3 Disqus：

組件資料傳遞 emit (子傳父)

使用 emit 往上傳遞資料

閱讀全文 »

組件資料傳遞 Props-父層傳參數到子層

發表於 2021-03-11 更新於 2022-04-26 分類於 Vue3 Disqus：

組件資料傳遞 Props (父傳子)

上層的 data 透過 props 往下傳，不會往上傳回 data，所以下層的資料改變不會影響到上層(data)

App.vue

import PropsTest from "@/components/PropsTest.vue";
import { ref } from "vue";
export default {
  components: {
    PropsTest,
  },
  setup() {
    const data = ref("hello Vue!");
    return { data };
  },
};

1	<PropsTest :msg="data" /> // :子層屬性="父層 data"

閱讀全文 »

Vue Component 組件基本介紹

發表於 2021-03-10 更新於 2021-03-14 分類於 Vue3 Disqus：

組件基本介紹

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

閱讀全文 »