홈런볼

다음은 조건문을 사용한 예제를 보여주겠습니다. 첫번째 V-IF v-if 안에 true 에 값이 들어가 있으므로 출력되는걸 확인할 수 있다. 안믿어도 어쩔 수 없습니다. 다음은 버튼을 이용해 show 에 값을 true -> false 로 바꾸는 프로그래밍을 해보겠습니다. 처음 브라우저 화면 모습이고 눈에 보였는데 사라졌다 ㅠㅠ 다음은 V-ELSE 도 이용해 보겠다. v-if 가 false 이면 NO 가 출력되며 True 면 YES 가 보인다. 요렇게 왔다 갔다 보인다. 다음은 TEMPLATE 태그를 이용 다중에 div 를 출력하거나 미출력할 수 있다. 다음은 V-ELSE-IF 를 이용해 코딩을 해보겠다. 첫번째 number 에 값이 1 일 경우에는 1,2,3 노출 , 2일때는 HII 노출 나머지 (ELSE..

Vue 공식 가이드 : kr.vuejs.org/v2/guide/class-and-style.html 클래스와 스타일 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 오늘은 클래스와 스타일 바인딩 !! 위에서 태그 아래 생성한 .red 와 .blod 클래스를 사용해 보겠다. 다음엔 클래스 바인딩을 적용해 보도록 하겠다. 바인딩을 하기위해 class 앞에 콜론을 붙여준뒤 아래 data 부분에 isRed 의 값을 선언해 준다. isRed 가 True 면 red에 값이 class 에 들어가고 false 시 바인딩이 안된다. 보기와 같이 맨 처음 브라우저에서는 class 에 값이 없다. 이유는 isRed 가 false 이기 때문이다. 클릭 버튼 클릭 ! isRed..

먼저 VUE 공식 가이드에 나와있는 Computed 와 Watch 에 대한 속성이다. 가이드에 나와 있듯이 Watch 보다는 Computed 를 사용하라고 권장하고 있다. 소개를 하자면 처음 브라우저에는 욱태 눈이와요 가 출력될 것이고 버튼을 클릭하게 되면 message 는 홈런볼로 변하게 되며 !! message를 감시하고 있던 watch 에서 먼저 콘솔로그에 메개변수로 받은 newValue 와 oldValue 를 출력하고 updated 는 눈이 그쳤어요 로 변환시킨다.

05 Method 에 이어 두번째 Method 와 비슷하지만 비슷하지 않은 Computed 1. 기본 연산자 먼저 간단한 연산자를 구현해 보겠다. data 에 number 라는 변수명으로 1 값을 생성 2. 약간 복잡 연산자 ? 만약 이런 연산자를 써야 한다고 보자. message 는 변수명이고 나머지는 자바스크립트 언어에도 존재하는 함수들이다. ( 단어들을 나눠 역순으로 한다음 다시 합친다 라는 의미) 이렇게 선언된 message에 위에 선언한 연산자를 구현한 값을 브라우저로 확인하면 !!! 각 글자로 나눈뒤 역순으로 배열하고 그걸 다시 합친 결과값 3. Computed 사용 !! 여기서 포인트는 !!!? 다음은 메서드에 선언하여 사용했을때 인데 여기서 차이점은 reversedMessage 다음에 ()..

간단간단으로 input 박스에 입력시 하단에 실시간으로 입력한 값 동시에 노출하기 이벤트 구현 몸풀기로 keyup 사용시 해당 글자들을 console창에 노출 시키도록 해보자.. 먼저 input 박스에 keyup을 선언하는데, v-on:keyup 으로 선언할 수 있지만 위에 이미지 처럼 v-on: 대신 @ 로 대체할 수 있다. keyboardEvent 를 클릭해서 보면 다양한 키-밸류 들을 확인할 수 있다. 이중 우린 Target 에 Value 를 이용 양방향 데이터 바인딩을 해보겠다. 브라우저에서 INPUT 박스에 문자 222 를 입력하니 아래 {{ }} 선언한 곳에도 같이 222 가 동시에 입력되는 걸 확인할 수 있다. 더 간단히 !!? 위에 이벤트를 @keyup="updateText" 대신 v-mo..

① 기본 : 이벤트 설명 기본 CSS, JavaScript 에서는 OnClick 으로 button 에 이벤트를 설정 했으나, VUE 에서는 V-ON:click 를 사용 한다. 다음은 method 를 이용 버튼 클릭시 Alert 띄우는 기능을 만든 후 실행해 보겠다. ② 기본 보다 약간 심화된 이벤트 ③ 이벤트 핸들러 ( 참고 : kr.vuejs.org/v2/guide/events.html ) 다음은 공식 vue 가이드에서 제공하는 이벤트 핸들러를 통한 맛보기 코딩 form 태그안에 v-on:submit.prevent 를 사용하면 자동으로 reload는 되는걸 막아준다.

1. 뷰 데이터 (DATA) 위에 그림과 같이 {{ }} 를 먼저 입력한 뒤 {{ 선언한 데이터 명 입력 }} data 안에 person 이란 오브젝트 안에 name 과 age 를 선언 하면 이와 같이 브라우저 에서 입력값 확인 가능 ! 2. 메소드 (METHODS) 먼저 메소드를 선언하자 nextYear 에 보면 this.data.person.name 이라고 안한 이유는 vue 에서는 this.person으로 사용할 수 있도록 자동으로 찾아준다고 한다. (참고해서 보는 유투브 설명이 그랬음) 선언한 메소드를 사용하기위해 {{ 사용한 메소드 명과 인자 값을 입력했다. }} 그리고 브라우저를 보게 되면 !! 메소드에 선언한 내용이 잘 출력되는걸 확인할 수 있다. ( 정석적으로는 메소드 선언시 메소드명: f..

Vue JS 에서는 바인딩 하기 위해 정석으로는 v-bind:type="바인딩할 이름" 이런식으로 V-BIND: 를 붙여야 하나 너무 길기 때문에 첨부한 이미지와 같이 v-bind:type < 만 사용해도 자동 바인딩이 된다. 또한 바인딩할 부분을 선언해 줘야지 당연히 해당 값이 자동 바인딩이 된다.