📌 style scoped
vue 파일들에 있던 CSS 는 하나로 합쳐짐
<template>
<!-- Composition API 실습 -->
<div style="padding : 10px">
<h4>팔로워</h4>
<input placeholder="검색"/>
<div v-for="(a,i) in follower" :key="i" class="post-header">
<div :style="`background-image: url(${a.image})`" class="profile"></div>
<span class="profile-name">{{ a.name }}</span>
</div>
</div>
</template>
<script>
import {onMounted, ref} from "vue";
import axios from "axios";
export default {
name: 'MyPage',
setup() {
let follower = ref([]);
onMounted(() => {
axios.get('/follower.json').then((res) => {
follower.value = res.data; // 데이터 담고 싶다면 변수명.value
})
})
return {follower}
}
}
</script>
<style>
</style>
전 포스팅에서 만들었던 MyPage.vue 에 css 가 없음에도 이쁘게 노출 됐던 것은 css 파일이 하나로 합쳐졌기 때문임
Post.vue 에 해당하는 css 가 있었다.
근데 특정 vue 파일에만 css 를 적용하고 싶다면?
<style scoped>
</style>
안에 css 를 작성하면 된다.
📌 ref() 와 비슷한 reactive()
데이터를 만들 때 두 가지 방법이 있다.
1. ref() - primitive 자료형
2. reactive() - array, object 자료형 (reference data type)
reactive 에는 보통 array, object 를 집어 넣는다.
그 나머지 자료형은 ref 에 넣는다. (primitive 자료형)
기능적으로는 큰 차이는 없음
reactive 도 쓰려면 import 해와야 한다.
import {reactive} from "vue";
📌 toRefs() - 여러 개의 props 이용할 때
MyPage.vue 파일에서 props를 사용해보자
부모 컴포넌트에서 1 이란 데이터를 props 를 보낸다.
props 로 받아온 one 이란 데이터를 쓰려면 setup 함수에 파라미터가 필요하다.
setup(props, context) {}
setup 의 첫번째 파라미터는 항상 props 이다.
두번째 파라미터에는 attrs, slots, emit 이런 것들이 담겨있다.
props 도 실시간 반영이 필요하기때문에 항상 ref() 로 감싸야 한다.
이 때 여러 개의 props 를 감쌀 때 toRefs(props) 를 이용한다.
마찬가지로 import 가 필요
import {toRefs} from "vue";
setup(props) {
let {프롭스} = toRefs(props);
}
사용할 땐 프롭스.value
🔎 let {one, two} 같은 문법을 Destructuring 문법이라고 함
📌 watch 사용법
watch(감시할 데이터, ()=>{ 실행할 코드 })
// watch 사용하기
watch(one, () => {
// one 데이터가 변경될 때마다 실행되는 코드
})
watch 도 import 필요! (보통 자동으로 import 해준다)
참고로 props 도 감시 가능
📌 computed 사용법
computed(()=> {return 연산결과})
// computed 사용하기
let num = computed(() => {
return '3'
})
console.log('num >', num.value)
computed 도 데이터이름.value 로 해야 잘 출력된다.
📌 vuex store 사용법
import {useStore} from "vuex";
// vuex의 store 사용하기
let store = useStore();
console.log('store > ', store.state.데이터명)
let store = useStore();
이제 store 을 $store 과 비슷하게 사용할 수 있다.
store.commit() 등등
⚡ Composition API 에서 mapState 는 없다. (단점) Vuex5 이상이면 될 수도 있음 // 강의 기준으론 없었음
📌 methods 함수 사용하는 법
// 함수 사용하기
function doThis () {
console.log('doThis 함수입니다');
}
return {doThis}
return 에 함수명 적어야 한다.
'Vue3 > 코딩애플 part3' 카테고리의 다른 글
[Vue/코딩애플/part3] 12. Composition API (ref, onMounted()) (0) | 2024.08.06 |
---|---|
[Vue/코딩애플/part3] 11. 디버깅 하기 위한 Vue devtools 설치하기 (for Vue3) (0) | 2024.08.06 |
[Vue/코딩애플/part3] 10. Progressive Web App (PWA) (0) | 2024.08.06 |
[Vue/코딩애플/part3] 9. methods와 comptued 차이점 / vuex - mapState, mapMutatiuons (0) | 2024.08.05 |
[Vue/코딩애플/part3] 8. vuex - actions/dispatch (ajax, 오래 걸리는 작업 실행하기) (0) | 2024.08.05 |