Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

發表於 更新於 分類於 Disqus：

Slot 插槽

在子元件上面開個洞， 由外層元件將內容置放在至子層元件指定的位置中
可解決樣式一樣，但內容不一樣的組件

閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

全局 directive

透過 directive 可以讓每頁都使用共用語法，在 main.js 中添加全局 directive
directive mounted 生命週期等同於 onMounted, 但這裡為純 js 並非 vue 的週期裡，所以這樣使用

閱讀全文 »
❤️

發表於 分類於 Disqus：

透過 ref 綁定，取得 DOM 元素

1
2
3
4
5
6
7
8
9
10
11
12
import { onMounted, ref } from "vue";
export default {
  setup() {
    const inputText = ref(null); // 變數需跟綁定的ref一樣名稱
    onMounted(() => {
      inputText.value.focus(); // 回傳後即可使用inputText
    });
    return {
      inputText, // 回傳inputText
    };
  },
};
閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

$event 事件回傳

取得事件的 target

1
2
3
4
5
6
7
8
9
10
export default {
  setup() {
    const clickFn = (e) => {
      console.log(e.target);
    };
    return {
      clickFn,
    };
  },
};
閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

Enter & Leave Transitions

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

閱讀全文 »
❤️
❤️

發表於 更新於 分類於 Disqus：

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

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

App.vue

1
2
3
4
5
6
7
8
9
10
11
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"
閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

組件基本介紹

main.js

1
2
3
4
5
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");
閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

Node.js 環境建置

下載 NVM

nvm 是 Node.js 的版本管理器 (version manager)，可在同一台主機上安裝多個版本的 Node.js 環境，因為不同專案可能會使用不同的 Node.js 版本，那就需要透過一個版本管理器來切換不同的 Node.js 版本。

NVM install - 點選右邊的 releases
https://github.com/coreybutler/nvm-windows

閱讀全文 »
❤️

發表於 更新於 分類於 Disqus：

使用 Axios 取得 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { onMounted } = Vue;
const app = {
  setup() {
    onMounted(() => {
      // 在DOM元素渲染完成後執行
      axios
        .get("https://vue-lessons-api.herokuapp.com/photo/list")
        .then((res) => {
          console.log(res.data);
        });
    });
    return {};
  },
};
閱讀全文 »
❤️