vue 썸네일형 리스트형 [java script] Vue.js ToDo List 만들기 1. ToDo List란? ▷ 할 일을 리스트한 어플리케이션입니다. ◎ 세부 기능 ▷ "체크박스 + 할일"을 나열하여 표시하는 기능 ▷ 체크하면 취소선을 긋는 기능 ▷ "할일"을 추가하는 기능 ▷ 취소선이 그어진 항목을 삭제하는 기능 ▷ ToDo의 총 건수나 처리완료 건수를 표시하는 기능 ToDo리스트 {{todo.text}} 처리완료삭제 {{ remaining }} / {{ todos.length }}건 처리 아래와 같이 값을 넣고 엔터키를 누르면 값이 추가되고 체크한 것은 버튼을 누르면 삭제됩니다. ◎ 추가 세부기능 ▷ 완료일도 같이 입력하여 화면에 나타날 수 있도록 만듭니다. ▷ 완료일 연장을 누르면 기존 입력한 완료일에서 1씩 증가되도록 합니다. ▷ sort를 이용해 할일 또는 완료일 기준으로 오.. 더보기 [java script] Vue.js 조건(v-if)과 반복(v-for) 1 1.v-if : 조건에 따른 표시 이전에 if문을 java와 java script에서 많이 다뤄 보았었습니다. Vue.js에서는 어떻게 사용하는지 예제로 바로 알아보죠! ◎ 체크박스가 true 일때 결과를 출력하는 예제) true일때만 표시하는 예제 표시 체크박스가 ON script의 메서드에 if대신 body 내부에 변수를 넘겨주면서 체크박스가 on이 되면 v-if문 안의 글자가 출력됩니다. 조건이 true라면 표시 의 방법으로 사용하시면 됩니다. ◎ if문을 이용해 두 수를 비교하는 예제) if문을 이용해 두 수를 비교하는 예제 첫 번째 수는 : 두 번째 수는 : 큰 수 : {{ num1 }} 작은 수 : {{ num2 }} 작은 수 : {{ num1 }} 큰 수 : {{ num2 }} 두 수는 같습.. 더보기 [java script] Vue.js 유저 조작과 연동(v-on) 1. v-on : 이벤트와 메서드를 연결합니다. ▷ 메서드(명령문)은 Vue 인스턴스에 methods 옵션을 추가해서 만듭니다. new Vue({ el: "#ID명", data:{ 프로퍼티명1: 값1, 프로퍼티명2: 값2 }, methods:{ 메서드명: function(){ 처리내용 }, 메서드명: function(){ 처리내용 } } }) 'v-on:'을 생략하고 '@'를 사용해도 됩니다. ◎ 버튼을 클릭하면 1씩 증가하는 예제(v-on click) 클릭하면 1씩 증가하는 예제 {{ count }} 1씩증가 버튼을 클릭하면 숫자가 1씩 증가합니다. 이 챕터부터는 함수를 이용해서 숫자의 값을 증가하는 동작을 할 수 있도록 만듭니다! ◎ "좋아~" 버튼을 클릭하면 두 번째는 버튼을 누를 수 없는 버튼 생.. 더보기 [java script] Vue.js 유저 입력 연결(v-model) 1. v-model : 입력 폼을 데이터와 연결해줍니다. ◎ 예제 1) 입력한 문자열을 표시하는 예제 입력한 문자열을 표시하는 예제 나는 {{ myName }} 입니다. 문자열을 텍스트 박스 안에 입력하면 아래에 결과가 출력됩니다. ◎ 예제 2) 입력한 문장과 문자수를 표시하는 예제 입력한 문장과 문자수를 표시하는 예제 문장은, 「{{ myText }}」 문자수는 {{ myText.length }} 자입니다. 문장을 입력하면 enter키와 상관없이 문장을 계속해서 나열하고 문장과 문자수를 표시합니다. ◎ 예제 3) 체크박스의 ON/OFF를 확인하는 예제 체크박스의 ON/OFF를 확인하는 예제 체크박스의 상태는 {{ myCheck }} 체크를 하면 true, 체크를 해제하면 false가 출력됩니다. ◎ 예.. 더보기 [java script] Vue.js 속성(v-bind, a, class) 1. v-bind : 요소의 속성을 데이터로 지정합니다. ◎ image 속성 예제 이미지 속성을 지정하는 예제 직접지정 v-bind로 지정 v-bind 생략 이미지 변수를 만들어 v-bind:src="프로퍼티명"으로 지정할 수 있습니다. 또한, v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ url 속성 예제 링크를 직접지정 링크를 v-bind로 지정 링크를 v-bind로 생략 지정 url 변수를 만들어 v-bind:href="프로퍼티명"으로 지정할 수 있습니다. 이미지와 동일하게 v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다. ◎ align 속성 예제 align 지정 예제 우측정렬 직접 지정 우측정렬을 v-bind로 지정 우측정렬을 v-bind 없이 지정 align 변수.. 더보기 [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) 먼저 Vue의 기본 코드를 살펴보겠습니다!! 1. Vue 인스턴스 만들기 : new Vue, el, data 아래와 같이 Script에 작성하면 Vue를 사용할 수 있습니다. new Vue({Vue 인스턴스 내용}) 또는 var 변수명 = new Vue({Vue 인스턴스 내용}) 보통 Vue의 구성은 아래를 참고하시면 됩니다! new Vue({ el : 어느 HTML 요소를 연결할 것인가 data : 어떤 데이터인가 methods : 어떤 처리를 하는가 computed : 어떤 데이터를 사용하여 계산하는가 watch : 어느 데이터를 감시하는가 }) 2. 데이터 표시 방법 데이터를 표시할 때는 이중 중괄호 {{ 데이터 }} 즉 머스태시(Mustache) 태그로 표시합니다. 머스태시 : 콧수염 더블쿼테이션.. 더보기 이전 1 다음
