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을 보실 수 있습니다. 지금 만드신 앱이 ..