FrontEnd 썸네일형 리스트형 [java script] Vue.js 애니메이션 효과 적용(transition) 1. transition : 표시/비표시 애니메이션 효과를 나타냅니다. ▷ 나타날(혹은 사라질) HTML 태그를 transition 태그로 감쌉니다. ▷ 어떻게 변화할지를 CSS로 준비합니다. 바로 예제로 알아보도록 하습니다!! ◎ 체크박스를 누르면 애니메이션 효과가 나타나는 예제 체크박스로 표시/비표시 애니메이션 효과를 주는 예제 변경 표시/비표시의 애니메이션~ 애니메이션 효과를 사용할 때 효과를 주고싶은 문구에 으로 감쌉니다. 그리고 어떻게 변화할지 CSS로 준비합니다. 적용 가능한 CSS 스타일 (1) 태그가 나타날 때 ▷ .v-enter : 나타나기 전의 상태 ▷ .v-enter-active : 나타나고 있는 상태 ▷ .v-enter-to : 나타난 상태 (2) 태그가 사라질 때 ▷ .v-leav.. 더보기 [java script] Vue.js markdown 에디터 만들기 1. Markdown 에디터란? ▷ 문장/문서를 가볍게 작성할 수있는 '문장 작성법' 중 하나입니다. ▷ 간단한 기호를 사용해서 표제나 강조 등을 표시하고 이를 HTML로 변경하는 것도 가능합니다. Markdown을 사용할 때, 아래의 코드를 하나 추가해야 합니다. Markdown은 표준이 없다는 단점이 있고 모든 HTML을 대신하지 못합니다. NO 항목 Markdown HTML 1 표제1 # text text 2 표제2 ## text text 3 표제3 ### text text 4 표제4 #### text text 5 표제5 ##### text text 6 번호 없는 리스트 - text text 7 번호 없는 리스트 * text text 8 강조(기울임) *text* text 9 강한 강조(진하게) *.. 더보기 [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 ◎ 이번에 배운 computed, watch를 이용한 예제 조건) ▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다. ▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다. ▷ 제한 시간이 실시간으로 표시된다. ▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이 +10초 추가된다. ▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며 금지어를 사용한 횟수 * 12 한 벌점을 출력한다. 결과 화면) 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수입력가능) 제한시간을 입력하세요 (초) 시작 남은 시간 {{ restTime }}초 {{ inputText.length }} 개의 문자를 입력.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) ◎ 애니매이션 효과 적용 예제 TweenMax 테스트 이동 위와 같은 코드를 사용하면 애니매이션을 적용할 수 있습니다. 여기서는 따로 Vue를 사용하지 않고 그냥 method로만 결과를 출력했습니다. TweenMax.to( ' id명 ', 이동시간, { 이동축 : "이동 값"}) 과 같은 방법으로 사용하면 애니매이션 효과가 나타납니다. ◎ watch를 이용한 애니매이션 추가 예제 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 값은 {{ animeNumber }}입니다. 숫자를 입력하면 해당 값만큼 애니메이션 효과를 이용해 값을 증가시킵니다. this.$data는 data에 있는 모든 데이터 값을 다 가져오는 것입니다. 애니메이션 효과는 tweenedNumber를 myNum.. 더보기 [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 |.. 더보기 이전 1 2 3 4 5 다음
