VUE3 (9) 썸네일형 리스트형 Vue3 - 목록 렌더링 ## V-for V-for 디렉티브를 사용하여 배열인 목록을 렌더링할 수 있습니다. V-for=“item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다. v-for=“(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다. 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야합니다. (vue2.2.0 부터 필수) const items = reactive([ { id: 1, message: 'Java' }, { id: 2, message: 'HTML' }, { id: 3, message: 'CSS' }, { id: 4, message: 'Javascript' }, ]); {{ item.message }} V-for 객체 v-for를 사용.. Vue3 - 클래스와 Style 바인딩 ## HTML 클래스 바인딩 ### 객체 바인딩 클래스를 동적으로 바인딩 하기 위해서는 :class(v-bind:class)를 사용할 수 있습니다. class="text" :class="{ active: isActive, 'text-danger': hasError }" 위 예시처럼 v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있습니다. 그리고 객체를 반환하는 computed에 바인딩할 수도 있습니다. const classObject = computed(() => { return { active: isActive.value && !hasError.value, 'text-danger': !isActive.value && hasError.value, }; }); ### 배열에 바인딩 배.. Vue3 - Computed ## computed 템플릿 문법 ( {{ }} ) 은 간단히 사용하면 매우 편리합니다. 하지만 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 예를 들어 아래와 같이 객체가 있는 경우 : const teacher = reactive({ name: '짐코딩', lectures: [ 'HTML/CSS', 'JavaScript', 'Vue3' ] }) 그리고 에 author가 책을 갖고 있는지 없는지 여부를 표시하고 있습니다. 강의가 존재합니까?: {{ teacher.lectures.length > 0 ? 'Yes' : 'No' }} 이 시점에서 템플릿 표현식은 복잡해지며 선언적이지 않습니다. 또 이러한 코드를 여러곳에서 반복적으로 사용해야한다면 더더욱 비효율 적일 .. Vue3 - 반응형 기초 (Reactivity) ## 반응형 상태 선언하기 Javascript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있습니다. import { reactive } from 'vue'; // 반응형 상태 const state = reactive({ count: 0 }) 컴포넌트 에서 반응형 객체를 사용하려면 setup() 함수에서 선언하고 리턴해야 합니다. 반환된 상태는 반응형 객체 입니다. 반응형 변환은 “깊습니다” 컴포넌트의 data()에서 객체를 반환할 때, 이것은 내부적으로 reactive()에 의해 반응형으로 만들어집니다. import { reactive } from 'vue'; export default { setup () { // 반응형 상태 const state = reactive(.. Vue3 - 템플릿 문법 ## 텍스트 보간법 데이터 바인딩의 가장 기본형태는 {{ data }} (이중 중고라호, 콧수염 괄호)를 사용하는 것 입니다. 이중 중괄호를 사용하면 해당 문법은 컴포넌트 인스턴스의 message 값으로 대체됩니다. Message 속성이 변경될 때마다 갱신(반응)됩니다. 문자열 : {{ message }} v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신(반응) 되지 않는 일회성 보간을 수행할 수 있습니다. (예) 문자열 : {{ message }} (예제) 보간법 {{ message }} {{ message }} Click! V-once는 일회성만 보관하므로 버튼 클릭시 반응성 작용이 일어나지 않는다. ## HTML (v-html) 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다.. Vue3 - Setup hook ## Setup Setup setup() 함수(hook)는 Composition API 사용을 위한 진입점 역할을 합니다. 그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다. 기본 사용 반응형 API(Reactivity API)를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 에 노출할 수 있습니다. 반환된 객체의 속성은 구성 요소 인스턴스에서도 사용할 수 있습니다. (다른 옵션이 사용되는 경우) : ## Props 접근 Setup 함수의 첫번째 매개변수는 props 입니다. props는 반응형 객체 입니다. export default { props: { title: String }, setup(props) { console.log(props.title) } } P.. Vue3 - Composition API ## Compositon API Compositon API는 옵션(data, method, ..)을 선언하는 대신 가져온 함수(ref, onMounted, …)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말합니다. Composition API는 논리적인 관심사를 한곳에 뭉쳐놓을 수 있습니다. 다음은 Composition API에서 각각의 API(ref, onMounted, …)들을 포괄하는 용어 입니다. 반응형 API (Reactivity API) 예를 들어 ref(), reactive() 와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watchers(감시자) 와 같은 것들을 만들 수 있습니다. 라이프 사이클 훅 (Lifec.. Provide/Inject 란? Provide/Inject 의 역할은 무엇? Provide 는 최상위 부모 컴포턴트에서 자식에 자식(손자) 컴포넌트에 데이터를 주입하기 위해서 사용됩니다. 최상위 부모컴포넌트에서는 Provide를 통해 데이터를 전달하고, 자식(손자) 컴포넌트에서는 Inject를 통해 데이터를 전달 받습니다. 최상위 부모 컴포넌트.vue export default { setup() { const staticMessage = 'static message'; const message = ref('message'); const count = ref(10); provide('static-message', staticMessage); provide('message', message); provide('count', count); .. TIL_Vue3완벽마스터_1_230131 defer 속성 : HTML 파싱과 함께, 비동기로 Javascript 파일을 불러온다. - HTML 파싱 + Javascript fetch가 완료된 후, Javascript 코드를 실행한다. - async 속성 : HTML 파싱과 함께, 비동기로 Javascript 파일을 불러온다. - HTML 파싱이 완료되지 않았더라도, 먼저 로딩되는 Javascript 파일부터 실행이 시작된다. - Javascript 파일을 실행할 때는 HTML 파싱이 중단된다. this의 정의 = this는 호출한놈 = 선호출에 의해서 결정된 놈(객체) this 는 객체를 가리키는 키워드 = 객체 = 어떤 객체일까 ? 누구 ? 전역은 this는 window 객체이다. window는 브라우저에서 제공하는 브라우저를 컨트롤할 수 있.. 이전 1 다음