Language/Vue (5) 썸네일형 리스트형 [Vue.js] 함께 공부하는 Vue 기초_04(사용자 입력 핸들링) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_04(사용자 입력 핸들링)입니다. 그 디렉티브 종류는 v-on과 v-model 두 가지에 대해서 간단히 살펴 보겠습니다. v-on Intro 사용자가 직접 앱과 상호작용 할 수 있도록 하기 위한 Vue의 디렉티브에 대해서 알아보겠다. v-on 라고 하며, Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있다. 여기서 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리킨다. 또는 이벤트 핸들러(event handler)라고도 한다. Code(코드) 먼저 아래 사진과 같이 HTML과 스크립트를 살펴보도록 하자. Process(순서) 태그의 id와 Vue의 el과 일치 시킨다.. [Vue.js] 함께 공부하는 Vue 기초_03(반복문) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_03(반복문)입니다. Intro 이번 포스팅도 지난번 Vue 조건문 사용하기에 이어서 반복문 사용법에 대해서 알아보자. 반복문은 Vue의 디렉티브 중 하나로 각 디렉티브는 고유한 기능이 있다. 문법은 v-for라고 사용하며, 배열의 데이터를 바인딩하여 화면에 목록 등을 표시하는데 사용할 수 있다. 수도없이 쓰게 될 문법이니 꼭! 잊어버리지 말도록 하자. Code(코드) 아래와 같이 HTML과 스크립트를 작성해보자. 결과는 당연히 아래와 같이 data에 본인이 배열형태로 작성한 값들이 표시 될 것이다. Process(순서) 태그의 id와 el을 일치시켜준다. data에 배열 형태로 text들을 넣어준다. 여.. [Vue.js] 함께 공부하는 Vue 기초_02(조건문) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_02(조건문)입니다. Intro 이번 포스팅도 지난번과 동일하게 공식홈페이지의 가이드를 기초로 하여 추가된 내용까지 따라해보는 내용이다. 지난번에 가장 기본적으로 어떻게 태그와 Vue를 연결하여 사용하는지 알아보았다. 이번에는 Vue의 조건문 사용법에 대해 간단히 알아보려 한다. Html (태그) 먼저 따라해보기 위해 아래와 같은 Html을 만들어 둔다. 이제 나를 볼 수 있어요! Vue에 대해 아직 아무것도 모른다지만 위의 태그 속성만으로도 대충 머리속에 드는 생각이 있을 것이다. 일단 if는 그냥 조건문이고, seen이 true이면 표시되나 보네!? v-는 뭐야? Vue인가? 정확하다!^^ Script.. [Vue.js] 함께 공부하는 Vue 기초_01 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_01입니다. 기본적인 Html, CSS, Javascript를 배운 제가 최근에 많이 듣는 이야기가 '이거 vue로 하면 엄청 편할텐데..'였습니다. 때문에 그 뷰(vue.js)!가 도대체 뭔지 공부를 하기위해 겸사겸사 포스팅하려 합니다. 하나하나 처음부터 같이 공부해봐요! Intro 먼저 어떤 새로운 기술이나 언어를 공부하든 공식홈페이지의 가이드는 한번씩 읽는 것이 좋다. 나도 그렇듯 공식홈페이지라는 막연한 거부감에 확인 하지 않는 경우가 많은데, Vue는 한글화도 잘 되어있고 나도 많이 참고하여 포스팅 할 예정이라 한번씩은 추천드린다. 일단 Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프.. [Vue.js] Vue CLI로 뷰 설치하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] Vue CLI로 뷰 설치하기입니다. Intro 일반적으로 Vue를 사용하는 방법은 두가지가 있다. Script를 이용한 방법 스크립트 방식 바로가기 Vue-CLI를 이용한 방법 스크립트를 이용하여 간단히 문법이나 사용법에 대해서 어느정도 숙지를 했다면 Vue CLI를 이용하여 Vue를 활용해볼 시간이다. Vue-CLI 란? Vue CLI란 Vue Command Line Interface의 약자이다. 터미널에서 명령어를 통해 Vue를 설치하거나 Vue와 관련된 패키지를 추가할 때 명령어로 간단하게 실행할 수 있도록 하는 도구이다. Install (설치하기) cli.vuejs.org Vue CLI cli.vuejs.org 먼저 위의 U.. 이전 1 다음
