본문 바로가기

분류 전체보기

 (185)
Vuejs 2 . 클래스 바인딩 & 스타일 바인딩 1. 클래스 바인딩 아래는 버튼을 클릭하면 클래스를 바인딩하여 스타일을 부여하는 예제입니다. 먼저 에 v-bind:class="{ 클래스: 변수 }를 넣어주었습니다. 예제에서는 v-bind:를 : 로 줄여서 적었습니다. 그 다음 데이터에 해당 변수값 false를 주었습니다. 그러면 일단 버튼을 클릭하기 전까지는 에 클래스가 없는 상태가 될것입니다. 그리고 메소드에 update()함수를 만들어 변수가 true가 되도록 작성한뒤, 이 함수를 의 클릭이벤트값으로 넣어주었습니다. 주석표시한 부분처럼 작성해도 결과는 같습니다. 버튼을 클릭하기 전에는 의 클래스가 없다가 버튼을 클릭하면 변수가 true가 되었으니 클래스가 생기면서 폰트의 컬러는 레드로, 사이즈는 40px로 바뀌게 됩니다. **클래스명에 하이픈이 들..
Vuejs 2 . Watch 속성 대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있습니다. 그래서 Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다. 아래는 을 클릭하면 메세지가 변경되고 그 변경에 반응하여 아래의 문구가 변경되는 예제입니다. 먼저 을 클릭했을때 메세지가 "인영"으로 변경되는 이벤트를 걸어주고, 메세지가 변경되면 watch가 변경된 메세지에 반응하도록 message함수를 만들었습니다. message함수가 실행되면 updated라는 변수가 "메세지가 변경되었습니다."로 바뀔것이고, 웹브라우저는 이를 나타낼 것입니다. **위의 정리 내..
Vuejs 2 . Computed 속성 {{ }}안에는 자바스크립트를 사용할 수 있습니다. 아래의 세 코드는 웹 브라우저에 모두 같은 결과를 도출합니다. 첫번째의 방법은 코드를 수정해야할 때 일일이 변경을 해야하기때문에 불편합니다. 그래서 아무래도 두번째 methods를 사용한 방법과 세번째 computed를 사용한 방법이 좋아보입니다. 그럼 두 방법은 어떤 차이점이 있을까요? computed 와 methods의 차이점은 캐싱의 차이입니다. computed는 캐싱되고 methods는 캐싱되지 않습니다. 캐싱에 대해 간단하게 설명하자면 computed는 computed 안에 있는 함수를 먼저 계산합니다. 그 다음 태그 안에서 해당 함수를 호출했을 때 이미 계산된 값을 가져다 사용하므로 한번만 계산합니다. 반면, methods는 methods안에..
Vuejs 2 . 데이터 양방향 바인딩 (Data Two Way Binding - v-model) 아래는 태그에 텍스트를 입력하면 아래에 미리보기가 지원되는 기능을 만든 예제입니다. 먼저 태그 아래 데이터의 text라는 변수의 값을 받아오는 {{ text }}를 만들었습니다. 그 다음 태그에 v-on:keyup속성을 넣어주었습니다. 이 때 v-on:keyup은 @keyup으로 줄여 사용하였습니다. **keyup 속성이란? 키보드가 눌러졌다 올라올때 이벤트를 주는 속성입니다. @keyup의 속성값으로 updateText라는 함수를 넣어주고, 메소드에 updateText 함수를 만들었습니다. 여기서 this.text는 데이터의 text이고 target.value는 태그에 텍스트를 작성하였을때의 값을 console.log를 통해 어디에 저장되는지 확인해보니 target.value 라는 곳에 저장이되어 th..
Vuejs 2 . 이벤트 (Events) 태그에 클릭이벤트를 만들어보는 예제입니다. 메소드에 alert()함수를 만들고 v-on:click 속성을 만들어 버튼을 클릭했을 때 alert창이 뜨도록 만들었습니다. 이번에는 더하기 버튼을 클릭하면 년도수가 1씩 증가하고 빼기 버튼을 클릭하면 년도수가 1씩 줄어드는 이벤트를 만들어본 예제입니다. 이번 예제는 버튼을 클릭하면 alert창이 뜨는 예제입니다. 이 예제로 새로 알게된것은 vue.js에서 event.preventDefault() 를 사용하는 방법입니다. submit버튼을 클릭하면 재로드가 되는데 이것을 막기 위하여 자바스크립트에서는 event.preventDefault()을 씁니다. vue.js에서는 더 간편하게 속성뒤에 .prevent를 붙여 사용할 수 있습니다. console.log로 보면..
vuejs 2 . 데이터 바인딩 (Data Binding) 태그안의 속성값을 바인딩해보는 예제입니다. 데이터에 type과 inputData라는 변수를 넣어주었습니다. 그리고 태그 속성앞에 v-bind: 를 붙여준뒤 속성값에 변수를 넣었습니다. v-bind: 는 : 로 줄여서 사용할 수 있습니다. 이번에는 태그를 만들고 link라는 변수를 만들어 바인딩해주었습니다. 추가로 메소드에 getInyoungLink 함수를 넣어주고 getInyoungLink 함수에 chennel이라는 매개변수를 넣어주었습니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!
Vuejs 2 . 뷰 데이터 (data) 와 메소드 (methods) 데이터안에 변수를 넣어 웹브라우저에 표현하는 방법입니다. 아래 두 코드 모두 같은 결과를 보여줍니다. 메소드 안에는 함수를 넣을 수 있습니다. 메소드 안에 nextYear라는 함수를 넣어 출력하였습니다. nextYear함수에 greeting이라는 매개변수를 넣어주었습니다. 그리고 '안녕하세요'라는 인자를 넣었주었습니다. **인자란? 함수를 사용할때 넣어주는 값(아규먼트) **매개변수란? 함수안에서 설정된 변수(파라미터) function을 생략하여 적을 수 있습니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!
Vuejs 2 . 뷰 인스턴스 생성하기 아래의 링크에서 CDN을 복사하여 헤드에 넣어주면 뷰를 사용할 수 있습니다. https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 데이터 오브젝트안에 name이라는 변수를 만들어서 웹브라우저안에 보여주는 방법입니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브강의를 들으면서 정리된 글을 보면 더 좋을것같아요!

티스토리툴바