Lala Code

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

0%

全局 directive

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

閱讀全文 »
❤️

透過 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
};
},
};
閱讀全文 »
❤️

$event 事件回傳

取得事件的 target

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

Enter & Leave Transitions

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

閱讀全文 »
❤️
❤️

組件資料傳遞 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"
閱讀全文 »
❤️

組件基本介紹

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");
閱讀全文 »
❤️

Node.js 環境建置

下載 NVM

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

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

閱讀全文 »
❤️

使用 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 {};
},
};
閱讀全文 »
❤️

VUE 的生命週期(Lifecycle Hooks)

setup => vue 掛載到 app 上面後執行
onBeforeMount => DOM 渲染前執行
onMounted => DOM 渲染完成後執行
onBeforeUpdate => 資料更新 DOM 更改前執行
onUpdated => 資料更新 DOM 更改後執行

閱讀全文 »
❤️