본문 바로가기

728x90
반응형

FrontEnd

[java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) 1. watch란? 데이터의 수식이나 값이 변할 때 어떤 처리를 하고 싶을 때 사용합니다. 예제를 통해서 바로 알아보겠습니다. ◎ 입력문자를 감지하여 금지문자가 입력되면 alert를 띄우는 예제 입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제 금지문자는、「{{ forbiddenText }}」 '안돼'라는 단어를 입력하면 경고창이 뜨는 예제입니다. 여기서 watch를 통해 입력된 글자가 변하는 것을 감지할 수 있고 substr(0, pos)를 사용해 inputText라는 변수에 금지 글자를 제외하고 남을 수 있도록 만듭니다. 여기서, substr의 특징은 str.substr(시작 인덱스, 추출 개수) : 시작 인덱스를 몇 개 추출할 것인지 입력을 받습니다. 유사한 것으로는 substring입니.. 더보기
[java script] Vue.js 데이터를 사용한 계산 2 (computed) 어제에 이어 computed를 이용한 추가 예제 하나만 더 보겠습니다!! ◎ 적,녹,청색의 슬라이더(range)를 움직이면 완성된 색을 표시하는 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B : Range와 min, max 값을 이용해서 범위를 지정하고 슬라이더를 움직이면 값이 변경되면서 색이 변합니다. 다른 예제들과 다른 점은 기존의 RGB 값을 이용했다는 것입니다. 추가적으로 슬라이더바 옆에 입력 창을 넣어 직접 수치 입력가능하게 하고 새로운 슬라이더 바를 넣어서 글자색을 조절 가능하게 생성해보겠습니다! ◎ 추가 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B .. 더보기
[java script] Vue.js 데이터를 사용한 계산(computed) 1. computed : 데이터의 값을 계산하여 쓸 때 사용하는 산출 프로퍼티 예시로 바로 확인해 보겠습니다. 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 원 소비세 포함 금액 {{ taxIncluded }} 원 taxIncluded라는 프로퍼티에 계산하는 function을 넣어 반환하는 예시입니다. 아래와 같은 출력 값을 확인할 수 있습니다. ◎ 단가와 개수를 입력해 세금 포함 금액을 계산하는 예제 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 원 x 개 합계 {{ sum }} 원 세금포함 {{ taxIncluded }} 원 sum 함수를 따로 지정하고 그 함수는 다른 함수에서 사용할 수 있습니다. alt + 255 하면 ' ' 값이 들어가는 빈 공간을 하나 생성할 수 있습니다. ◎ 국.. 더보기
[java script] Vue.js의 구글 차트란? ◎ Vue.js에서 구글 차트 연동 아래의 문구를 작성하면 차트를 연동할 수 있습니다. google 차트는 움직이지 않는 그래프만 표시할 수 있습니다. 여기서 Vue.js를 연동하면 유저가 조작하면 움직이는 그래프를 만들 수 있습니다. ◎ google chart를 사용하는 예제 Google Charts로 원그래프를 그리는 예제 선호하는 점심 메뉴 투표 구글 차트를 연동하면 아래와 같은 차트가 나타나게 됩니다. 차트별로 적용가능한 배열이 있고 값이 맞지 않으면 출력이 되지 않습니다. 위의 자바스크립트 부분이 전부 chart의 코드고 google charts로 들어가면 확인하실 수 있습니다. Google 차트 사용 | Charts | Google Developers Google 차트 사용 | Charts |.. 더보기
[java script] Vue.js 조건(v-if)과 반복(v-for) 3 이번에는 v-for과 v-if를 조합해서 사용해 보겠습니다. ◎ v-for과 v-if를 사용한 예제 짝수만 표시하는 예제 {{ item }} 조건에 맞는 결과만 출력됩니다.(2, 4, 6) v-for과 v-if는 한 줄에 나열해서 사용할 수 있습니다. 짝수만 표시하는 예제 {{ item }} 짝수만 표시 filter를 이용해서 2의 배수만 출력되도록 합니다. filter는 조건에 만족하는 것만 배열에 변경하는 것입니다. ◎ 숫자 배열 조작과 구구단 출력을 나타내는 예제 숫자 배열 조작과 구구단 출력 {{ item }} 변경 삭제 추가 정렬 구구단 보이기 {{ i }} x {{ j }} = {{ i*j }} 위와 같은 화면이 출력됩니다. 1. 변경을 누르면 값이 1 증가 2. 삭제를 누르면 해당열 삭제 3.. 더보기
[java script] Vue.js 조건(v-if)과 반복(v-for) 2 오늘은 배열을 for문을 통해 나열하는 것을 추가로 배워보겠습니다. 바로 예제로 들어가 볼게요! ◎ table을 통해 다중 배열을 출력하는 예제 버튼으로 리스트에 추가/삭제 예제 {{ a }} 맨 뒤에 추가 네번째에 추가 첫번째를 변경 두번째를 삭제 th(행), td(열)에 모두 for문을 사용하면서 table이 나타나도록 정렬합니다. 이때 방법은 ranking(배열)을 line(배열)에 저장하고 line(배열)을 다시 item에 저장하면서 분리가 되도록 합니다. 자바나, 자바스크립트에서 for문을 이용해서 배열을 출력하는 방법과 유사하고 HTML에 적용한다는 것만 다릅니다. line, item은 다른 글자로 바꿔도 상관없습니다. ◎ 배열 데이터의 추가와 삭제 ▷ 배열.push(추가데이터) ▷ 배열.sp.. 더보기
[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씩 증가합니다. 이 챕터부터는 함수를 이용해서 숫자의 값을 증가하는 동작을 할 수 있도록 만듭니다! ◎ "좋아~" 버튼을 클릭하면 두 번째는 버튼을 누를 수 없는 버튼 생.. 더보기

728x90
반응형