레쓰-고

JSON : Java Script Object Notation 으로 속성-값 쌍이나, 배열자료형, 키-값 쌍의 데이터 오브젝트를 전달합니다. : 텍스트를 사용하는 개방형 표준 포맷 으로 알면 될거같습니다! 사용 예제 JSON을 읽어 들이는 예제 (JavaScript) - console 출력 데이터를 파일로 입력받아 뷰를 통해 출력시키는 방법입니다. JSON을 읽어 들이는 예제 Vue.js 이용 읽어 들인 데이터 = {{ loadData }} 배열 데이터를 컴포넌트로 나열하는 방법입니다. 배열(JSON 형태) 데이터를 컴포넌트로 나열하는 예제 소트 셔플 실습예제 입니다. 질문을 출력하고 O/X 답을 할수 있도록 템플릿을 만들것 5개의 정답을 입력받아 각 문제에 할당된 점수로 계산하여 출력할것. 퀴즈 맞추기..

컴포넌트 : 부품처럼 사용이 가능합니다! 같은 종류의 처리하는 부분을 컴포넌트로 정리 합니다. HTML 부 Vue 부 Vue.component('컴포넌트 태그명',{ template: 'HTML 부분' } 와 같은 방법으로 사용합니다. 예제는 다음과 같습니다. 컴포넌트를 만들어서 표시하는 예제 Data를 function 으로 만들어 사용도 가능합니다. 해당 function은 따로 기능합니다. HTML부 스크립트부 Vue.component('컴포넌트 태그명', { template: 'HTML 부분', data: function(){ return{ } } } 의 형식으로 사용합니다. 예제는 다음과 같습니다~ 각각 다른 카운팅을 하는 컴포넌트 예제 Props HTML의 태그에서 값을 받아 저장합니다. prop..

1. 표시 / 비표시 시의 애니메이션 효과. ( transition) 1. 애니메이션 효과를 나타내기 위해서는 효과를 줄 HTML태그를 태그로 감싼후 2. 어떻게 변화시킬지를 CSS로 지정해줍니다. CSS 스타일 - 태그가 나타날 때 .v-enter: 나타나기 전의 상태 .v-enter-active : 나타나고 있는 상태 .v-enter-to : 나타난 상태 태그가 사라질 때 .v-leave : 사라지기전의 상태 .v-leave-active : 사라지고 있는 상태 .v-leave-to : 사라진 상태 태그가 이동할 때 .v-move : 태그가 이동 할때 예제로 바로 확인해볼게용 체크박스로 표시/비표시에 애니메이션 효과를 주는 예제입니다. 체크박스로 표시/비표시에 애니메이션 효과를 주는 예제 변경 표시/비..

Markdown 에디터란? 문장/문서를 가볍게 작성할수 있는 '문장 작성법' 중의 하나입니다. 우선 Vue라이브러리와 Markdown 라이브러리를 읽어들입니다. 항목 Markdown HTML 표제1 # text text 표제2 ## text text 표제2-1 text -- text 표제3 ### text text 표제4 #### text text 표제5 ##### text text 표제6 ###### text text 번호없는 리스트 - text text 번호없는 리스트 * text text 강조 *text* text 강한 강조 **text** text 취소선 ~~aa~~ text 수평선 ---- 링크 [text](url) text 마크다운 입력은 구성이 간단합니다. 코드는 다음과 같습니다. //마크다..

숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 값은 {{animeNumber}} 입니다. TweenMax 테스트 TweenMax 테스트 이동 해당 이미지처럼 이동을 클릭할때마다 움직입니다!

데이터의 변화를 감지할때는 watch 를 사용합니다. 입력 문자를 감지하여 금지문자가 입력 되면 alert을 띄우는 예제 금지문자는, 「{{forbiddenText1}}, {{forbiddenText2}}」 남은 글자는 {{remaining}} 입니다. 추가적으로 배열을 입력도 가능합니다. 입력 문자를 감지하여 금지문자가 입력 되면 alert을 띄우는 예제 금지문자를 입력해주세요. 「{{inputSen}}」 남은 글자는 {{remaining}} 입니다. 종합활용 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수 입력가능) {{arr}} 제한시간을 입력하세요 (초) 시작 남은시간 {{ restTime }} {{inputText.length}} 개의 문자를 입력하였습니다. 벌점 : {{count*12..

데이터의 값을 계산하여서 쓸 때는 computed를 이용합니다. 산출 프로퍼티 작성법 new Vue({ el:"#ID명" data:{ 프로퍼티명:값, 프로퍼티명:값 }, computed:{ computed프로퍼티명:function(){ 처리내용 }, computed프로퍼티명:function(){ 처리내용 } } }) 예시 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 원 X 개 합계 {{sum}} 원 세금포함 {{taxIncluded }} 원 국영수 계산기 국어 영어 수학 총점은 {{sum}} 평균점수는 {{avg}} 문장을 입력하면 남은 글자수를 표시하는 예제를 작성 해보겠습니다. 문장을 입력하면 남은 글자수를 표시하는 예제 감상은 140자 이내로 입력해 주세요. 남은 글자는 {{ remaini..

Google charts 라이브러리의 CDN 지정 방법 구글 차트로 차트 표현해보기 Google Charts로 원 그래프를 그리는 예제 선호하는 점심메뉴 투표 {{item[0]}} : {{item[1]}} 추가 빼기 option 에서의 series에서 0~n까지의 정수로 데이터의 legend 값을 지정해준후 속성을 부여 할수있습니다.

2022.12.23 - [Vue.js] - 뷰 에서의 조건문, 반복문 (Vue.js) 뷰 에서의 조건문, 반복문 (Vue.js) 2022.12.22 - [Vue.js] - 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) 2022.12.22 - [Vue.js] - 이벤트와 연결하기 : v-on (Vue.js) 이벤트와 연결하기 : v-on less-go.tistory.com v-for를 이용한 방법입니다. 배열 데이터를 테이블로 표시하는 예제 관심 받고 있는 언어 랭킹 {{ a }} {{ a }} table nth-of-type(even) 은 짝수행에 대한 값 지정입니당 thead, tbody는 명시하지 않아도 되나, 구분할때 쓰입니다...

2022.12.22 - [Vue.js] - 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) 2022.12.22 - [Vue.js] - 이벤트와 연결하기 : v-on (Vue.js) 이벤트와 연결하기 : v-on (Vue.js) 2022.12.22 - [Vue.js] - 폼 입력과 데이터를 연결할 때 쓰는 v-model (Vue.js) 이벤트와 메소드를 연결 하는 방법입니다. less-go.tistory.com 조건문 v-if 조건을 만족했을때 조건이 true 라면 표시 조건에 따라 표시 태그를 변경합니다 조건이 true 라면 표시합니다 그렇지 않으면 표시 합니다 true 일때만 표시 하는 예제 표시 체크박스가 ON 체크박스 off 복수..