728x90 Programming/Vue10 [Vue] 동적인 웹 앱을 구현할 때 자주 사용하는 디렉티브 v-if : 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 🚨 해당 태그를 완전히 삭제 v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다. v-show : v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 🚨 css style 효과만 display:none; 으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다. ex) 🧐 코드 해석 : countDownTimer가 0 이상일때만 보여준다. 이런식으로 v-show에 조건을 주면 됨!! v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. ex) v-on:click은 해당 태그의 클릭 이벤트를 감지하.. 2022. 7. 6. [Vue] .vue 파일의 기본 구조 화면에 표시할 요소들을 정의하는 영역 ex) HTML + 뷰 데이터 바인딩 뷰 컴포넌트의 내용을 정의하는 영역 ex) template, data, methods 등 템플릿에 추가한 HTML 태그의 CSS 스타일을 정의하는 영역 v-bind + props : 상위 컴포넌트에서 하위 컴포넌트로의 데이터 전달 v-on + $emit : 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달 2022. 7. 5. [Vue] Vue 인스턴스 작성 new Vue({ el : 어느 html 요소를 연결할 것인가 data : 어떤 데이터인가 methods : 어떤 처리를 하는가 computed : 어느 데이터를 사용하여 계산하는가 watch : 어느 데이터를 감시하는가 }) 2022. 7. 5. [Vue] Vue 약어 🌱 v-bind 약어 ... ... v-bind: = : 단방향 바인딩 🌱 v-on 약어 ... ... v-on: = @ - 참조 : https://kr.vuejs.org/v2/guide/syntax.html 2022. 7. 4. [Vue] 이벤트 버스 형식 🎀 이벤트 버스 형식 이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. .$emit() : 보내는 컴포넌트 .$on() : 받는 컴포넌트 👀 구현 형식 // 이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = enw Vue(); // 이벤트를 보내는 컴포넌트 methods: { 메서드명: function() { eventBus.$emit('이벤트명', 데이터); } } // 이벤트를 받는 컴포넌트 methods: { created: function() { eventBus.$on('이벤트명', function(데이터); } } 👍 이벤트 버스 구현하기 doit-vuejs/index... 2022. 1. 24. [Vue] Vue.js의 라이프 사이클 Creation, Mounting, Updating, Destruction ✏️ 렌더링이란? rendering은 renderer engine(skia)이 한다. Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해준다. (화면에 뿌려주는 역할) ✏️ 바인딩(Binding)이란? 값이 서버상에서 들어간 것 이름을 속성에 연관(bind) 시키는 과정 (특정 객체에서 실행되게끔 고정시키는 그런 역할) 컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(Bind) 상태가 되는 것 정적 바인딩(static binding) : 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩 동적 바인딩(dynamic binding) : 프로그램이 실행되는 과정에서 바인딩 되는.. 2022. 1. 24. [Vue] 상태 관리 패턴 상태 관리 구성 요소 state : 컴포넌트 간에 공유할 data view : 데이터가 표현될 template actions : 사용자의 입력에 따라 반응할 methods new Vue({ // state data() { return { counter: 0 }; }, // view template: ` {{ counter }} `, // actions methods: { increment() { this.counter++; } } }); 단방향 흐름 처리 View → Actions → State → View → Actions → State → ... 2022. 1. 24. [Vue] Vuex의 4가지 속성 state : 공유한 상탯값 데이터 정의 mutations : setters의 의미로 이해하면 좋으며 외부에서 동기 방식으로 저장할 때 사용 getters : state의 데이터값을 외부에서 읽어 올 때 사용 actions : 외부의 API 실행 같은 비동기 실행을 관리할 때 사용 2022. 1. 24. 이전 1 2 다음 728x90
