hwigaeng 님의 블로그

Single-File ComponentsVue에서 Single-File Components 는 template , script style을 하나의 파일로 캡슐화 하는 특수 파일의 형식 언어 블록top-level 블록에서 하나만을 가질 수 있다.콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고 , JS 렌더 기능으로 사전 컴파일 되고 , render 옵션으로 내보내어 컴포넌트에 첨부된다.script 또한 최대 하나의 블록을 포함할 수 있다.파일 하나당 하나의 블록을 가질 수 있다.사전에 처리되어 컴포넌트의 setup() 함수로 사용된다. 컴포넌트의 각 인스턴스에 대하여 실행되며 최상위 바인딩은 템플릿에 자동으로 노출된다. style - module 속성CSS 모듈로 컴파일 되고 CSS ..

컴포넌트UI를 재사용할 수 있도록 정의한 것사용 이유컴포넌트를 사용하면 UI를 재사용할 수 있다.컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.컴포넌트 만들기컴포넌트 정의 Single-File Components (SFC) => 실무에서 일반적으로 사용하며 *.vue 를 가지는 단일 파일문자열 템플릿 => 빌드 도구를 사용하지 않을 때 javascript 객체로 정의컴포넌트 등록전역등록app.component() 메서드를 사용하여 현재 vue 애플리케이션에서 전역적으로 사용할 수 있도록 할 수 있다.전역적으로 등록된 컴포넌트는 애플리케이션 어떤 곳에서든 사용이 가능하다. 단점빌드 시스템을 사용하는 경우 컴포넌트를 전역 등록하는 것은 컴포넌트를 사용하지 않더라도 최종 빌드에..

watch반응형 데이터가 변경 되었을 때를 감지하여 다른 작업을 수행해야 하는 경우에 사용하는 함수특정한 상태가 변경되었을 때 특정 작업을 수행할 수 있다.const message = ref('Hello World');watch(message , (newValue, oldValue) => {}); //감지할 반응형 데이터 , (newValue, oldValue)를 매개변수로 갖는 콜백함수첫 번째 매개변수는 다양한 타입이 될 수 있다. ex) ref, computed, object, getter , function ,array//getterwatch(() => { return x.value + y.value}, (sum, oldValue) => { console.log('sum: ', sum) conso..

이벤트 처리Vue에서 이벤트 처리는 v-on 디렉티브로 사용할 수 있다.v-on 이벤트는 자주 사용하기 때문에 @ 단축 표현으로 많이 사용된다.const counter = ref(0) printEventInfo 과 동일 --> 메소드 이벤트 핸들러v-on 디렉티브에서 메소드를 호출할 수 있다. 이 때 매개변수로 event 객체를 받는다.const printEventInfo = (event) => { console.log(event.target); console.log(event.target.tagName);} 이벤트 객체 접근인라인 핸들링으로 메소드를 호출할 때 $event 키워드를 사용하여 event 객체를 넘겨줄 수 있다.event 객체의 위치는 함수에서 정의한 매개변수 순서에 따르며 $event로..

디렉티브디렉티브는 v- 접두사가 있는 특수 속성으로 디렉티브의 값이 변경될 때 특정 효과를 반응적으로 DOM에 적용하는 것을 말한다.전달인자 (Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자를 가질 수 있다.ex) v-on:click수식어 ( modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사로 디렉티브가 특별한 방식으로 바인딩 되어야 함을 나타낸다.ex) v-on:submit.prevent='onSubmit'디렉티브는 기능상에서 중요한 역할인 컴포넌트 또는 DOM 요소에게 ~~하게 작동하라고 지시해주는 지시문이다.v-text요구 값: string엘리먼트의 textContent를 속성을 설정하므로 텍스트 컨텐츠를 덮어쓰게 된다. 만약 텍스트 컨텐츠의 ..

v-for 디렉티브v-for 디렉티브를 사용하여 배열을 리스트로 렌더링할 수 있다.v-for 디렉티브는 item in items 형식의 특별한 문법이 필요하며 items 는 배열이고 item은 엘리먼트의 별칭이다.javascript 반복문 문법처럼 in 대신 of 를 구분기호로 사용하여 반복도 가능하다.항목을 나열할 때는 :key 속성에 고유한 값을 지정하여야 한다(vue2.2.0 부터 필수) {{ item.message }} import { reactive } from 'vue';export default { setup(){ const itmes = reactive([{id : 1, message : "Foo", {id: 2, message: "Bar"}]) ..

v-if 디렉티브v-if 디렉티브는 조건부로 블록을 렌더링을 하는데 사용되는 디렉티브이다.디렉티브의 표현식이 truthy 값을 반환하는 경우에 블록이 렌더링 된다.Vue는 정말 멋지죠!v-if 는 디렉티브이므로 단일 엘리먼트에 연결이 되어야 하는데 둘 이상의 엘리먼트를 조건문에 따라 렌더링 하기 위해서는 래퍼역할을 하는 엘리먼트에 v-if를 사용한다.렌더링 되는 결과에는 template 엘리먼트가 포함되지 않는다. 제목 단락 1 단락 2 v-else 디렉티브v-else 디렉티브는 v-if 에 대한 else 블록을 나타내는데 사용이 된다.v-if 또는 v-else-if 엘리먼트 바로 다음에 와야 인식이 된다. 전환Vue는 정말 멋지죠!아닌가요? 😢v-else-if 디렉티브v-else-if 는 v-..

v-bind:class클래스를 동적으로 바인딩 하기 위해서는 :class (v-bind:class)를 사용할 수 있다.v-bind:class 디렉티브는 일반 class 속성과 공존이 가능하다. 텍스트입니다. toggle toggleError 인라인 스타일:style 디렉티브를 통하여 인라인 스타일을 바인딩 할 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate asperiores exercitationem ab deleniti explicabo enim labore molestias quos temporibus tenetur tempore similique est consequuntur, re..

Computed API템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워 질 수 있다.이 때 computed API를 이용하여 선언적이고 읽기 전용 속성으로 사용할 수 있게 된다. {{ student.name }} 수강 중인 강의가 있습니까? {{ student.lectures.length > 0 ? '있음' : '없음' }} {{ isLearnLecture }} Writable Computedcomputed는 getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 반응형 ref 객체로 반환한다.그러나 setter 를 설정해주면 쓰기 가능한 ref 객체를 반환하게 된다. method 와 computed차이점 method 로 선언한 경우에 템플릿 문법에서 사..

반응형 상태 선언하기JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있다. 반응형 객체가 변경되면 바인딩 된 화면도 업데이트가 된다.import {reactive} from 'vue'const state = reactive({count : 0}); 객체나 배열 같은 참조 타입을 반응형으로 만들 수 있으며 depth 가 깊어도 정상적으로 작동을 한다export default { setup() { const state = reactive({ count: 0, deep: { count: 0, }, }); const increment = () => { state.count++; state.deep.count++; }; retur..