FRAME WORK/Vue.js (17) 썸네일형 리스트형 Vuejs 2 . v-for 리스트 렌더링 1. v-for v-for는 반복해야할때 사용합니다. 아래의 예제는 v-for를 사용하여 반복한 예제입니다. 데이터에 people이라는 배열을 만들어 값을 넣어주었습니다. 이것을 {{ people[0].name }} {{ people[0].age }}를 사용하여 웹브라우저에 출력해주었습니다. 하지만 이렇게하면 데이터가 추가될 때 마다 계속 입력을 해줘야하는 번거로움이 있습니다. 그래서 이것을 v-for를 사용하여 반복문을 만들어주면 데이터가 추가되어도 알아서 출력해냅니다. person은 오브젝트이고 people은 데이터에 있는 배열을 의미합니다. in 대신에 of를 넣어도 상관없습니다. 만약 인덱스(순번정도의 의미)가 필요하다면 아래처럼 작성할 수도 있습니다. 2. key Vue에서 개별 DOM 노드들을.. Vuejs 2 . v-if 와 v-show 1. v-if v-if 속성은 이름처럼 vue에서의 조건 속성입니다. v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. 아래의 예제는 버튼을 클릭하면 True가 False로 바뀌는 예제입니다. 먼저 버튼에 클릭이벤트를 넣어주고 메소드에 함수를 설정합니다. this.show = !this.show; --> 토글 효과, 버튼을 클릭할때마다 true와 false가 교차됨 this.show = false; --> 버튼을 클릭하면 false되고 버튼을 다시 클릭해도 이미 false이기 때문에 변화가 없음 데이터에 show를 true로 설정했으므로 처음 웹 브라우저에서는 3개가 모두 보일것입니다. 버튼을 누르면 false로 바뀌면.. 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강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! 이전 1 2 3 다음
