반응형 DEVLOG/Vue.js17 Vue.js 시작하기 - #3 사용자 입력 핸들링 사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있습니다 {{ message }} 메시지 뒤집기 var app5 = new Vue({ el: '#app-5', data: { message: '안녕하세요! Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) 이 메소드에서 우리는 단순히 DOM을 건드리지 않고 앱의 상태를 업데이트 합니다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다. Vue는 또한 양식에 대한 입.. 2019. 5. 8. Vue.js 시작하기 - #2 조건문과 반복문 엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다. 이제 나를 볼 수 있어요 var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 콘솔에서 app3.seen = false 를 입력해보세요. 메시지가 사라지는 것을 확인할 수 있습니다. 이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다. 몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for 디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다. {{ todo.text }} var.. 2019. 5. 8. Vue.js와 Django를 이용한 웹앱 만들기 Build an App with VueJS and Django Part One를 참고하여 작성하였습니다. 서론 이전에 VueJS와 ExpressJS를 이용하여 웹앱을 만든적이 있는데, Python 공부도 할 겸 Django를 써보려고 하는데 VueJS와 Django를 결합? 연결하는데 어려움이 있어 자료를 찾던 중 좋은 소스가 있어 공유합니다. Vue.js Vue.js는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응.. 2019. 5. 1. Vue.js 스터디 참고자료 Vue.js 스터디하면서 참고할 자료들입니다 클론 코딩까지 완성하면 뿌듯할 것 같네요ㅎㅎ [참고자료] Vue.js 공식 가이드 - https://kr.vuejs.org/v2/guide/ 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue.js 입문서 - https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/ Vue.js 입문서 - 프론트엔드 개발자를 위한 초심자를 위한 Vue.js 소개, 구성요소, 구조, Vue Router, Vue Resource 등 joshua1988.github.io TodoList 만들기 - https://blog.storyg.co/vue.. 2019. 5. 1. 이전 1 2 3 4 5 다음 반응형