머털&보약의 기록

문제: modal 표시 시 ajax로 데이터는 가져오지만 바인딩이 되지 않음 환경: thyemelaf 파일에 vue.js를 적용(별도 node.js 환경 X) thymeleaf파일에 vue.js를 적용한 경우에 modal창에 아래처럼 바인딩이 안된 경우가 있었다. 원인은 간단했다. 기존 thyemelaf파일에서는 아래처럼 전체를 나타내는 div 영역 밖에 모달창 div가 있었음 기존에는 javascript/jQuery로 페이지 로드 후 DOM에 직접 접근해서 작업해서 문제가 안되었음 하지만 vue.js에서는 root element안에 모달영역이 포함되어 있어야 vue.js의 인스턴스와 연결되어 vue.js의 바인딩 기능 사용 가능(vue.js에서는 DOM에 직접 접근하는 일이 거의 없음) 위 코드처럼 m..

하위(자식)컴포넌트에서 상위(부모) 컴포넌트로 데이터 전달 시 사용하는 속성 //하위컴포넌트인 app-header에 click 이벤트(v-on:click을 @click으로 표현 가능)를 설정 let appHeader = { template: 'click me', //methods 속성에 리벤트 핸들러를 생성 후 this.$emit('이벤트명')으로 이벤트 발생 시킴 //해당 이벤트는 부모 컴포넌트에서 감지해서 처리 가능 methods: { passEvent: function() { this.$emit('pass'); } }, } new Vue({ el: '#app', components: { 'app-header': appHeader, }, }) 결과 버튼 클릭 시 pass라는 이벤트가 발생하는 것 확인..

목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) Vue.component('app-header', { template: ' {{ message }} 결과 Root 컴포넌트를 기준으로 계층구조를 이룸 image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 부모 컴포넌트에서 자식 컴포넌트로는 props 속성으로 데이터 전달 자식 컴포넌트에서 부모 컴포넌트로는 event로 데이터 전달 통신 규칙이 있으면 데이터 흐름 추적이 용이함 reference: https://www.inflearn.com/course/age-of..

인스턴스 뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드 {{ message }} console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들 new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용 크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음 인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨 생성자 함수 일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성 생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용 reference: https://www.inflearn.com/cour..

Vue.js에서 컴포넌트 등록 시 부모-자식관계가 형성되는데 각 컴포넌트는 데이터를 독립적으로 가지고 있음 부모 자식끼리 데이터를 전달 방법: 부모는 자식에게 내려만 주고, 자식은 부모에게 올려만 준다. 이 때 부모가 사용하는 속성이 props이고 자식이 사용하는 속성이 event emit이다. 이를 활용한 간단한 예제 동영상 내용 정리 부모에서 props를 활용해 부모의 data 중 message를 자식에게 내려주고 자식에서 이벤트 발생 시 부모의 메소드를 실행해서 부모 컴포넌트의 데이터 중 num을 1증가 시킨다. image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크..

Vue.js에서 ajax로 서버에서 데이터 받아와서 테이블에 뿌리는 간단한 예제 cli 환경 기반이라 npm install로 vue.js cli를 설치해야 함(미리 설치한 상태라 동영상에는 설치과정 누락됨) npm install -g @vue/cli cli 설치 후 vue create 프로젝트명으로 cli 기반 vue 프로젝트 생성 vue create vue-test1(생성할 프로젝트명) 아래 명령어로 node.js 런타임을 실행해서 페이지를 띄움 npm run serve 페이지를 띄운 순간부터 vue.js는 데이터가 변경되는 순간 실시간으로 반영한다. mounted(DOM 그린 다음 실행되는 함수) 부분에 console.log() 찍어보면 렌더링을 다시 하는게 보인다. (이놈도 React처럼 가상 DO..