Vue 3 Cheat Sheet - VUE - Nhập môn Công nghệ phần mềm | Trường Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

Vue 3 Cheat Sheet - VUE - Nhập môn Công nghệ phần mềm | Trường Đại học Khoa học Tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh. Tài liệu được sưu tầm giúp bạn tham khảo, ôn tập và đạt kết quả cao trong kì thi sắp tới. Mời bạn đọc đón xem !

31 16 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: Nhập môn Công nghệ phần mềm (HCMUS)

Trường: Trường Đại học Khoa học tự nhiên, Đại học Quốc gia Thành phố Hồ Chí Minh

Thông tin:

3 trang 1 tháng trước

Tác giả:

Profile Phạm Thị Huyền
lOMoARcPSD|46958826
lOMoARcPSD|46958826
VUE 3 COMPOSITION API
CHEAT SHEET
<template>
Use the composition API when:
<div>
The component is too large, and
<p>Spaces Left: {{ spacesLeft }} out of {{ capacity }}</p>
should be organized by logical
<h2>Attending</h2>
concerns(feature).
<ul>
AND / OR
<li v-for="(name, index) in attending" :key="index">
Code needs to be extracted and reused
{{ name }}
across mulitiple components, as an
</li>
alternative to Mixins/Scoped Slots.
</ul>
AND / OR
<button @click="increaseCapacity()">Increase Capacity</button>
Type safety in TypeScript is important.
</div>
</template>
If using Vue 2 with Composition API plugin configured:
<script>
import { ref, computed } from "vue"; import { ref, computed } from "@vue/composition-api";
export default {
setup() {
Reactive Reference
const capacity = ref(4);
Wraps primitives in an object to track changes
const attending = ref(["Tim", "Bob", "Joe"]);
const spacesLeft = computed(() => {
Computed Property
return capacity.value - attending.value.length;
});
Access the value of a Reactive Reference by calling
.value
function increaseCapacity() {
capacity.value++;
Methods declared as functions
}
return { capacity, attending, spacesLeft, increaseCapacity };
}
};
Gives our template access to these objects & functions
</script>
CAN ALSO BE WRITTEN AS:
import { reactive, computed, toRefs } from "vue";
export default {
setup() {
Reactive takes an object and returns a reactive object
const event = reactive({
capacity: 4,
attending: ["Tim", "Bob", "Joe"],
spacesLeft: computed(() => { return event.capacity - event.attending.length; })
});
function increaseCapacity() {
Notice we don’t have to use
.value
since the object is reactive
event.capacity++;
}
toRefs creates a plain object with reactive references
return { ...toRefs(event), increaseCapacity };
}
};
Watch the Vue 3 Essentials course on VueMastery.com
lOMoARcPSD|46958826
VUE 3 COMPOSITION API
CHEAT SHEET
TO ORGANIZE BY FEATURE:
<template> … </template>
<script>
export default {
setup() {
const productSearch = useSearch( )
const resultSorting = useSorting({ })
return { productSearch, resultSorting }
}
}
function useSearch(getResults) {
Watch the Vue 3 Essentials
course at VueMastery.com, taught
by Gregg Pollack.
The setup() method
Called after beforeCreate hook and before created hook.
Does not have access to this.
props The first optional argument of setup:
}
function useSorting({ input, options }) {
}
</script>
TO EXTRACT SHARED CODE:
<template> … </template>
<script>
import useSearch from '@use/search' import
useSorting from '@use/sorting' export default {
setup() {
const productSearch = useSearch( )
const resultSorting = useSorting({ })
return { productSearch, resultSorting }
}
}
</script>
use/search.js
export default function useSearch(getResults) {
}
use/sorting.js
export default {
props: {
name: String Props are reactive
}, and can be watched
setup(props) {
watch(() => {
console.log(`name is: ` + props.name)
})
}
}
context The second optional argument of setup:
setup(props, context) {
context.attrs;
context.slots;
Exposes properties previously
accessed using
this
context.emit;
}
life-cycle hooks Declare them inside setup
setup() {
onMounted(() => { ... });
onUpdated(() => { ... });
onUnmounted(() => { ... });
}
Instead of using beforeCreate or created hooks, just write code
or call functions inside setup() instead.
export default function useSorting({ input, options }) {
See the API documentation for additional info.
}
| 1/3
| | Tải xuống

Có thể bạn quan tâm:

Preview text:

lOMoARcPSD|46958826 lOMoARcPSD|46958826 VUE 3 COMPOSITION API CHEAT SHEET
Use the composition API when:
The component is too large, and

Spaces Left: {{ spacesLeft }} out of {{ capacity }}

should be organized by logical Attending concerns(feature).
 AND / OR
v-for="(name, index) in attending" :key="index">
Code needs to be extracted and reused {{ name }}
across mulitiple components, as an
alternative to Mixins/Scoped Slots. AND / OR
click="increaseCapacity()">Increase Capacity
Type safety in TypeScript is important.

If using Vue 2 with Composition API plugin configured:
import { ref, computed } from "vue";
import { ref, computed } from "@vue/composition-api"; export default { setup() { Reactive Reference
const capacity = ref(4);
Wraps primitives in an object to track changes
const attending = ref(["Tim", "Bob", "Joe"]);
const spacesLeft = computed(() => { Computed Property
return capacity.value - attending.value.length; });
Access the value of a Reactive Reference by cal ing .value
function increaseCapacity() {
capacity.value++; }
Methods declared as functions
return { capacity, attending, spacesLeft, increaseCapacity }; } };
Gives our template access to these objects & functions CAN ALSO BE WRITTEN AS:
import { reactive, computed, toRefs } from "vue"; export default { setup() {
Reactive takes an object and returns a reactive object const
event = reactive({
capacity: 4,
attending: ["Tim", "Bob", "Joe"],
spacesLeft: computed(() => { return event.capacity - event.attending.length; }) });
function increaseCapacity() {
Notice we don’t have to use .value since the object is reactive
event.capacity++; }
toRefs creates a plain object with reactive references
return { ...toRefs(event), increaseCapacity }; } }; Watch the Vue 3 E ssentials course on Vu eMastery.com lOMoARcPSD|46958826 VUE 3 COMPOSITION API CHEAT SHEET TO ORGANIZE BY FEATURE: … Watch the Vue 3 Essentials
course at VueMastery.com, taught export default { by Gregg Pollack. setup() {
const productSearch = useSearch( )
const resultSorting = useSorting({ }) The setup() method
return { productSearch, resultSorting }
Cal ed after beforeCreate hook and before created hook. } Does not have access to this. }
function useSearch(getResults) { props
The first optional argument of setup: export default { } props: {
function useSorting({ input, options }) { name: String Props are reactive }, and can be watched } setup(props) { watch(() => {
console.log(`name is: ` + props.name) TO EXTRACT SHARED CODE: }) } … }
import useSearch from '@use/search' import context
The second optional argument of setup:
useSorting from '@use/sorting' export default {
setup(props, context) { setup() { context.attrs;
const productSearch = useSearch( ) context.slots; Exposes properties previously
accessed using this
const resultSorting = useSorting({ }) context.emit; }
return { productSearch, resultSorting } } life-cycle hooks Declare them inside setup } setup() {
onMounted(() => { ... });
onUpdated(() => { ... }); use/search.js
onUnmounted(() => { ... });
export default function useSearch(getResults) { } }
Instead of using beforeCreate or created hooks, just write code
or call functions inside setup() instead. use/sorting.js
export default function useSorting({ input, options }) {
See the API documentation for additional info. }