루지

Vue CLIVue CLI는 Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 기능을 모두 제공하는 Vue.js 개발 도구이자 시스템이다. 개발자들에게 표준화된 개발의 기준선을 제공하고 정해진 틀 속에서 개발이 가능하면서도 기본 제공되거나 제 3자가 제공하는 다양한 플러그인과 프리셋을 로딩하여 프로젝트의 초기 설정과 개발을 손쉽게 할 수 있도록 도와준다. 따라서 개발자가 프로젝트 구성을 설정하는데 드는 노력을 줄이고 개발에 좀더 집중할 수 있도록한다. 1. Vue CLI 구성요소1) CLI : @vue/cli컴퓨터 내부 어디에서나 실행할 수 있도록 npm을 이용해 전역에 설치하며 터미널창에서 vue 명령어를 실행할 수있도록 한다. vue 명령어로 수행할 수 있는 기능은 다음과 같다. - 새로운 V..

Component 대규모 어플리케이션인 경우 확장자가 .vue인 단일 파일 컴포넌트(SIngle File Component)형태로 많이 개발되지만 이번에는 컴포넌트 개념부터 정확히 잡아보려고 한다.대규모 어플리케이션에서 사용되는 단일 파일 컴포넌트를 작성하기 위해서는 ECMAScript 6에 대한 지식이 있어야한다. 컴포넌트의 장점은 아래와 같다.1. 뛰어난 재사용성한 애플리케이션에서 내부에 사용되는 UI와 기능은 반복되는 것들이 꽤 많다. 반복되는 부분을 컴포넌트로 작성해두면 여러 곳에서 재사용할 수 있어 생상선을 높일 수 있다.2. 테스트가 용이하다.컴포넌트 단위로 기능을 테스트할 수 있기 때문이다. Karma, Mocha와 같은 단위 테스트도구를 이용해 쉽게 테스트 할 수 있다.3. 디버깅이 편하다..

Vue.js Event 처리동적인 화면을 구성할때 다이나믹한 UI는 HTML 요소에서 발행하는 이벤츠 처리를 통해서 구현되는경우가 많다. HTML 문서에서 발생하는 이벤트는 다양하다 키보드를 누를 때 발생하는 keyup, keypress, keydown 이벤트 마우스 클릭할 때 발생하는 click, doubleclick 이벤트, 마우스를 움직일 때 발생하는 mousemove 이벤트 등이 있다. 1. 인라인 이벤트 처리Vue.js에서는 v-on 디렉티브를 이용해서 처리할 수있다. 가장 많이 쓰이는 Click 이벤트 처리를 예제로 만들어 보았다. hello vue.js .layout1 { margin: 30px 30px 30px 30px; } 예금 인출 계좌 잔고 : {{balance}} var vm = n..

Vue 인스턴스var app = new Vue({}) 형식으로 생성한 객체들을 Vue 인스턴스라고 부른다. 때로는 뷰모델을 의미하는 vm을 삽입해서 vue vm 인스턴스라고도 칭한다. 1. el, data computed 옵션data 옵션은 data 옵션에 주어진 모든 속성들을 Vue 인스턴스 내부에서 직접이용되지 않고 Vue 인스턴스와 Data옵션에 주어진 객체 사이에 프록시를 두어 처리한다. {{ name }} var model = { name: "홍길동" } var vm = new Vue({ el: '#test', data: model }) data 옵션 값이 vue 인스턴스에 의해 프록시 처리되어 vm.name과 같이 사용할 수 있음을 알 수 있다. 직접 data 옵션을 통해 접근하고 싶다면 vm..

Computed Property (계산형 속성) 앞서 v-bind 디렉티브를 이용한 간단한 데이터 바인딩 방법을 설명했는데 만약 연산 로직이 필요한 경우에는 이 방법만으로는 문제를 해결하기가 쉽지 않다. Vue.js의 Computed Property(계산형 속성)은 이러한 문제를 해결해주는 방법 중의 하나이다. Vue 객체를 만들때 computed 속성과 함께 함수를 등록해두면 마치 속성처럼 이용할 수 있다. 1부터 입력된 수까지의 합 : {{ sum }} var vmSum = new Vue({ el: '#exmaple', data: { num: 0 }, computed: { sum: function() { var n = Number(this.num) if (Number.isNaN(n) || n < 1)..

Vue.js 기본 디렉티브 1) v-text, v-html 디렉티브선언적 렌더링을 위해 html 요소 내부에 템플릿 표현식(콧수염 표현식:mustache Expression)만 사용할 수 있는건 아니다. 동일한 코드를 디렉티브라는 것을 이용해 표현해볼 수 있다. v-test, {{ }} : InnerText 속성에 연결된다. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남v-html : innerHtml 속성에 연결된. 태그 문자열을 파싱하여 화면에 나타냄 v-html 태그는 태그 그대로 바인딩한다. 요즘 문제가되는 XSS(Cross Site Scripting)공격 등에 취약하기 때문에 꼭 필요한 경우가 아니라면 v-text를 사용하는것이 더 안전하다. 2) v-b..

vue 예제 분석 hello vue.js {{message}} var model = { message: 'Hello Vue.js World!' }; var simple = new Vue({ el: '#simple', data: model }) Model 객체는 변수명 그대로 모델 객체이다.데이터를 가지고 있음 SImple 객체는 Vue 객체이자 뷰모델 객체이다. Vue 객체의 el 속성의 html 요소를 나타낸다. 또한 data 속성을 모델 객체를 참조한다.vue 객체가 html 요소와 데이터를 참조하고 있다. 이제 데이터가 변경되면 뷰모델 객체는 즉시 html 요소에 반영시킨다. html 요소에서는 {{ }}과 같은 콧수명르 닮은 모양의 템플릿 표현식을 사용해 선언ㅇ적으로 html dom에 데이터를 렌..

개발 환경 설정 1) Node.js : 서버측 JavaScript언어이자 플랫폼2) npm : app의 의존성 관리를 위해 사용하는 노드 패키지 관리자3) Visual Studio Code : 코드 편집 도구(IDE)4) 크롬 브라우저 + vue.js Devtools : 디버깅을 위한 개발도구5) Vue-cli : app 작성을 위한 기본 틀을 제공하는 도구 1. Node.js, npm 설치Node.js는 Google의 v8엔진을 기반으로 만들어진 서버측 JavaScript 언어이자 Flatform이다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리한다. https://nodejs.org/ko( 위의 사이트에서 Node.js 다운로드 후 설..

.vue 파일 밑에 빈줄 추가

집에서 심심하면 만들고 있는 토이 프로젝트가 있는데 익숙치 않은 mfc라 힘들다~ 위와 같이 기본 list control을 생성 후각 컬럼과 열에 data를 넣어준 뒤 클릭벤트를 걸어주면row 전체가 선택이 되는게 아니라 첫번째 열(column)만이 선택이된다. 이럴때 마법과 같은 코드 한줄이면 전체 선택이 된다. 리스트컨트롤 변수를 생성하여 아래의 코드를 onInitDialog쪽에 쳐주면 끝 CListCtrl test;test.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_GRIDLINES); LVS_EX_FULLROWSELECT만 적용된 경우 LVS_EX_FULLROWSELEC | LVS_EX_GRIDLINES 적용된 경우 그 이외에 스타일 추가는 msdn에 있을..