omaeng

Vue의 인스턴스와 속성 그리고 메서드에 대해서 포스팅해 보겠습니다! Vue 인스턴스 만들기 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. var app = new Vue({ //옵션 }) MVVM 패턴과 유사하지만 완벽하게 일치하지는 않습니다. 변수명은 app or vm(ViewModel)을 주로 사용합니다. Vue 인스턴스를 인스턴스화 할때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 option 객체를 전달해야 합니다. 전체 옵션 목록은 API reference에서 찾을 수 있습니다. Vue 생성자는 미리 정의 된 옵션으로 재 사용 가능한 컴포넌트 생성자를 생성하도록 확장할 수 있습니다. Vue앱은 new Vue 를..

웹을 사용하는 사용자가 상호작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있습니다. 이제 JS Bin을 실행하시고 코드를 직접 작성해 봅시다. https://jsbin.com/?html,js,console,output JS Bin Sample of the bin: jsbin.com 먼저 바인딩할 메세지를 p태그로 명시해줍니다. html {{message}} 메세지 뒤집기 버튼 Javascript var app = new Vue({ el : "#app", data:{ message:"123456789" }, methods:{ reversemessage: function(){ this.message = this.message.s..

엘리먼트를 사용자에게 보여줄지 결정하여 웹에 표현하는것은 어렵지 않아요. 이제부터 우리가 Vue.js를 통해 개발하면서 주도적으로 사용하게 되는 디렉티브를 사용하면 됩니다. 여기서 잠깐, 디렉티브란? v- 로 시작하는 모든 속성을 의미 합니다. JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용합니다. v-if: if문과 같다. True, False 값에 따라 화면에 표시될지를 결정한다. v-for: 지정한 뷰 데이터의 개수만큼 반복하여 출력한다. v-show: css의 display:none으로 속성을 준다. If문의 경우 태그를 완전 삭제한다, v-bind: Vue 데이터 속성과 html태그 기본속성을 연결해준다. v-on: 화면요소의 이벤트를 감지하요 처리할 때 사용함 ..

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다. 그전에 앞서 전 포스팅에서 Vue.js의 스크립트가 JSBin에서 작동하지 않아, 해결법을 찾아보던 중 https://unpkg.com/vue/dist/vue.js 주소로 적어야 동작했습니다. 원인은 잘 모르겠으나 JS Bin에서 작동하는 버전이 따로 있는듯 합니다. 먼저 탬플릿을 작성해 보겠습니다. {{ message }} 그리고 불러올 메세지를 스크립트에 작성해 보겠습니다. var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) 작성을 올바르게 하셨다면 다음과 같은 Output을 보실 수 있습니다. 지금 만드신 앱이 ..

에약 시스템 토이 프로젝트가 끝나고 Vue.js를 공부하려고 합니다. 사실상 기록을 남기면서 학습하는 것이 귀찮기는 하지만, 나중에 구글링을 하는것 보다 빠를거 같아서 기록을 남겨보고자 합니다. 시작하기 저는 Vue.js를 처음 공부하는 것이기 때문에 빌드부터 다루기 쉽지 않습니다. 그렇기 때문에 웹 브라우저에서 코딩하고 실행해 볼수 있는 https://jsbin.com JS Bin Sample of the bin: jsbin.com JS Bin을 사용하려고 합니다. 링크를 클리해보시게 되면 다음과 같은 화면을 보실수가 있습니다. 차례대로 html, JavaScript 작성란이 보이고 Output 출력란이 보입니다. 작성이 되는 순간마다 실행이 되는것으로 보이고, 자동 실행을 이용하지 않을수도 있습니다(..