레쓰-고

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

예제1번 Todo 리스트 1. 체크박스 + 할일을 나열하여 표시하는 기능 2. 체크하면 취소선을 긋는 기능 3. 할일을 추가 하는 기능 4. 취소선이 그어진 항목을 삭제하는 기능 5. ToDo의 총 건수나 처리 완료 건수를 표시하는 기능 ToDo 리스트 {{todo.text}} 처리완료삭제 총 할일은 {{todos.length}}건, 완료한 건수는 {{ remaining }} 건 이다. 2번.교재에 있지롱 좀더 좋아진 ToDo리스트 {{todo.text}} ( 완료일 {{todo.DueDate}} ) 완료일 연장 / (YYYYMMDD 형식으로 입력) 처리완료삭제 할일순으로 정렬 완료일로 정렬 {{ todos.length }}건 중 {{ remaining }}건 처리, {{overdate}} 완료일 지남 ..

컴포넌트 : 부품처럼 사용이 가능합니다! 같은 종류의 처리하는 부분을 컴포넌트로 정리 합니다. 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 마크다운 입력은 구성이 간단합니다. 코드는 다음과 같습니다. //마크다..

데이터의 변화를 감지할때는 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..

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 복수..

2022.12.22 - [Vue.js] - 이벤트와 연결하기 : v-on (Vue.js) 이벤트와 연결하기 : v-on (Vue.js) 2022.12.22 - [Vue.js] - 폼 입력과 데이터를 연결할 때 쓰는 v-model (Vue.js) 이벤트와 메소드를 연결 하는 방법입니다. 이벤트와 메소드를 연결할때는 v-on 을 사용합니다. 버튼을 클릭 했거나 키를 입력 less-go.tistory.com 이전글 입니다. 키 입력 키 수식자 키 수식자를 지정하지 않으면 아무키나 입력해도 메소드가 실행되기 때문에 특정 수식어를 입력했을때만 반응하도록 하기 위해 키 수식자를 지정합니다. .enter .down .tab .left .delete .right .esc .48~.57(0~9) .space .65~.9..