Vue
-
Vue.js 문법 - 리스트 렌더링Vue/Vue.js 문법 2021. 7. 14. 15:20
v-for - v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 - item in items 형태로 특별한 문법이 필요 - items는 원본 데이터 배열, item은 반복되는 배열 엘리먼트의 별칭 예제1 {{ fruit }}-{{ index }} 결과 예제2 {{ fruit.name }} 코드 이해하기 - computed 속성을 통해 정렬된(계산된) 배열을 반환 - 배열 데이터 내부에는 객체 데이터 (id, name)가 들어있음 - :key 값으로 배열의 아이템을 구분 가능한 고유한 속성(id)을 부여 shortid 패키지 # 각각의 아이디를 고유하게 만들어주는 패키지 $ npm i -D shortid 예제3 {{ fruit.name }}-{{ fruit.id }} 결과 객체 구조 분해 {{..
-
Vue-js 문법 - 조건부 렌더링Vue/Vue.js 문법 2021. 7. 14. 15:11
v-if - v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용 - 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 Vue is awesome! Vue is awesome! Oh no 😢 예제 Click me! Hello?! Good~ 코드 이해하기 - 처음에는 태그 (Click me!)와 태그 (Hello?!)가 화면에 출력 - 버튼 (Click me!)을 누르면 메소드 handler()가 동작 - hendler() 메소드는 isShow 데이터가 true면 false, false면 true로 변경 - isShow가 false 이므로 (Hello?!)는 (Good~)으로 변경 결론: 버튼을 누르면 (Hello?!)일때는 (Good~), (Good~)일때는 (Hello?!)로 변경됨 v-..
-
Vue.js 문법 - 클래스와 스타일 바인딩Vue/Vue.js 문법 2021. 7. 13. 20:33
클래스 바인딩 Hello?!({{ isActive }}) 코드 이해하기 - 태그 (Hello?!)를 클릭하면 isActive(기본값 false)가 true로 변경 - class 속성의 값(active)이 데이터이므로 v-bind: 디렉티브(약어)를 사용 :class="{ active: isActive }" - { active: isActive }는 Key와 Value 형태, isActive는 (true, false)값을 가지고 있음 - active: true 라면 active 클래스를 추가, active: false 라면 클래스를 추가하지 않음 - 위의 개념이 클래스 바인딩(Class Binding) 인라인 스타일 바인딩 - :style의 객체 구문은 매우 간단 - JavaScript 객체라는 점을 제외..
-
Vue.js 문법 - ComputedVue/Vue.js 문법 2021. 7. 12. 22:44
Computed 속성 - 계산된 속성, 읽기 전용(Readonly) - 종속 대상을 따라 저장(캐싱) - data 속성에 변화가 있을때 자동으로 다시 연산 예제1 Fruits {{ fruit }} Reverse Fruits {{ fruit }} 결과 Computed 캐싱 {{ reverseMessage() }} {{ reverseMessage() }} {{ reverseMessage() }} {{ reverseMessage() }} {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }}
-
Vue.js 문법 - 템플릿 문법Vue/Vue.js 문법 2021. 7. 12. 19:23
템플릿 문법 Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석할 수 있는 유효한 HTML입니다. 보간법(Interpolation) 문자열 - 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation) - Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체 - msg 속성이 변경될 때 마다 갱신 (반응성) 메시지: {{ msg }} - v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행 결코 변하지 않을 것입니다:..
-
Vue.js 문법 - 인스턴스와 라이프사이클Vue/Vue.js 문법 2021. 7. 9. 10:46
인스턴스 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다 const app = Vue.createApp({ /* options */ }) const vm = createApp(App).mount('#app') 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있습니다. 에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야합니다: 라이프사이클 다이어그램 예제 /* App.vue */ {{ count }} 참고 https://v3.ko.vuejs.org/guide/introduction.html 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신..