Lala Code

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

0%

使用 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 更改後執行

閱讀全文 »
❤️

computed

範例 1: 自動長出 menu 高度

計算屬性

1
2
3
4
<a @click="HandListShow" class="title">菜單</a>
<ul class="box" :style="{height: toggleH}">
<li v-for="(list, idx) in listArr" :key="list">{{list.name}}</li>
</ul>
閱讀全文 »
❤️

vue.js 的起手式

1
<script src="https://unpkg.com/vue@next"></script>
1
2
3
4
<div id="app">
<h1>{{msg}}</h1>
<button @click="handAddInt">Add</button>
</div>
閱讀全文 »
❤️
❤️