Develope/Vue.JS

오늘은 Vue.JS step 4. 데이터 바인딩(data binding)에 대해 포스팅하려고 합니다. 데이터 바인딩(data binding)은 HTML 태그 안에 vue 인스턴스에서 속성들을 정의한 data를 연결하여 화면에 표시하는 방법으로 {{ }} 콧수염 괄호 형태의 템플릿 엔진 Mustache 또는 v-bind 속성을 사용합니다. 아래 예제 소스코드를 통해 확인해 보도록 하겠습니다. data-binding.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. vue 인스턴스를 생성하고 엘리먼트(el)에 html의 div id가 app인 태그를 연결합니다. data에 key - value 형태의 데이터를 만들고 v-bind 또는 {{ }} Mustache형태로 app 태그 안에 정의한 ..

오늘은 Vue.JS step3. 컴포넌트(component)에 대해 포스팅하려고 합니다. Vue.JS에서 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다. HTML Element를 확장하고 재사용 가능한 형태로 구현이 가능하며 Vue.JS에서 사용된 모든 컴포넌트는 하나하나가 인스턴스라고 볼 수 있습니다. 컴포넌트는 일반적으로 전역 컴포넌트와 지역 컴포넌트가 있습니다. 컴포넌트 이름으로 template속성에서 사용할 HTML 태그를 직접 정의하여 사용할 수 있고, 컴포넌트 내용으로 template, data, methods 등의 인스턴스 옵션 속성을 정의하여 사용할 수 있습니다. 1) 전역(Global) 컴포넌트 인스턴스 밖에서 Vue.component() 형태로 등록할 컴포넌트의 이름과 내..

오늘은 Vue.js step 2. 인스턴스(instance)에 대해 포스팅하려고 합니다. Vue.JS에서 인스턴스란 Vue를 구성하는 가장 기본적인 베이스이며 객체이고, Vue의 라이프사이클의 시작점으로 여러 동작들의 초기화 작업을 수행합니다. 일반적으로 var vm = new Vue({ // 옵션 }) 형태로 인스턴스를 생성하며, 인스턴스 생성자라고 표현합니다. vue 인스턴스의 가장 대표적인 옵션은 다음과 같이 6가지가 있습니다. 옵션 설명 el Vue가 실행될 HTML의 DOM 요소를 지정. Vue 인스턴스에 연결할 HTML 요소 data Vue가 관찰하는 data 객체를 지정, 변경 사항을 즉시 감지 computed 화면 로직 제어와 관련된 함수를 정의하고 계산된 값을 리턴해줌 methods 화면..

오늘은 Vue.JS를 시작하기 위한 기본 환경설정에 대해 포스팅 하려고 합니다. 본 포스팅을 Vue.js에 대한 공부 및 쉽고 간단하게 시작하기 위한 step by step 형태로 이어가도록 하겠습니다. Vue.JS에 대해 차근차근 접근하기 위해 당분간은 아래 환경설정에서 설치한 npm 모듈을 사용하지 않고 html에서 vue lib를 사용하는 방식으로 진행하겠습니다. Vue.JS를 사용하기 위해서는 Node.js visual studio code vue.js vue.js devtools Chrome 확장 프로그램 을 설치하도록 하겠습니다. 1) Node.js를 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runti..

오늘은 Vue.JS의 error defined but never used no-unused-vars 해결방법에 대해 포스팅하려고 합니다. 먼저 ESLint란 Javascript에서 문법 오류 또는 사용하지 않는 변수, 함수 및 함수 매개 변수를 제거하는 검사기입니다. 린트(lint)는 소스 코드에 문제가 있는지 탐색하여 런타임 전에 에러를 미리 잡아주는 역할을 합니다. ESLint는 javascript에서 동작하는 린트(lint)라고 볼 수 있습니다. ESLint는 VSCode에서 PlugIn으로 install이 가능하며, npm으로 lib를 install 하여 사용할 수도 있습니다. 현재는 저도 VSCode에서 플러그인으로 사용중이며, error defined but never used no-unuse..

오늘은 Vue.JS의 $refs으로 Dom에 접근하는 방법에 대해 포스팅 하려고 합니다. 일반적으로 Vue를 사용하면 직접 Dom요소에 접근할 일은 거의 없습니다. 하지만 Dom요소에 직접 접근하여 컨트롤 하게되는 경우가 간혹 있기 때문에 사용되는 방법이 있습니다. dom에 ref속성을 정의하고 $refs태그를 이용하여 Dom요소에 접근을 할 수 있습니다. 아래 예제를 통해 보도록 하겠습니다. // gs_test.html {{message}} click_me test vue ref button태그에는 ref="click_btn" 속성을 입력하고, p태그에는 ref="ref_p" 속성을 입력하였습니다. click_me test vue ref 일반적으로 javascript의 document 또는 JQuery..

오늘은 Vue.JS Windows Terminal 실행시 나타나는 오류에 대한 해결 방법에 대해 포스팅 하려고 합니다. 오류의 상세 내용은 다음과 같습니다. vue를 install하고 난 이후에 vue에 대한 명령어 들을 실행할때 나타나게 됩니다. PS C:\Users\gs\Desktop\learn-vue-js-master> vue --version vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\gs\AppData\Roaming\npm\vue.p s1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.co m/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue + ~~..