vue.js (17) 썸네일형 리스트형 7. vue.js 클래스& 스타일 바인딩 안녕하세요~~~!! 오늘은 vue.js2에서 클래스&스타일바인딩에 대해 알아보도록 하겠습니다. 저는 유튜브 '코지코터' 무료강의를 통해 vue를 공부하고 있습니다! https://www.youtube.com/kossiecoder 코지 코더 Kossie Coder 호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^ www.youtube.com ++정리를 하던 와중에 vue.js2서비스는 곧 종료된다 하여.... 아마 다음 게시물부터는 vue3강의를 보며 공부를 다시 시작하게 될 것 같네요^^ 좋은 정보 감사합니다. 어떤 환경이든지 클래스나 스타일 바인딩은 기본적으로 사용할 테니.. 6. vue.js watch 속성 사용하기 안녕하세요~~!!!> 5. Computed 속성 사용하기 안녕하세요~~!!!> computed와 watch > computed 속성 으로 들어가 보면 computed의 설명을 보실 수 있습니다. 가이드 문서에 예시로 나와있는 것처럼 {{ message.split('').reverse().join('') }} 이렇게 복잡하고 긴 로 januarytree.tistory.com 1.Watch속성이란?! Vue 가이드문서 > coputed와 watch > computed속성 vs watch 속성 를 확인하면 watch에 대한 설명이 잘 나와있습니다. watch속성은 데이터 변경에 대해 반응하는 방법이라고 적혀있습니다. 이렇게 설명을 봐서는 잘 이해가 안 가기 때문에 오늘도 예문을 통해 확인해보도록 하겠습니다. .. 5. vue.js Computed 속성 사용하기 안녕하세요~~!!!> computed와 watch > computed 속성 으로 들어가 보면 computed의 설명을 보실 수 있습니다. 가이드 문서에 예시로 나와있는 것처럼 {{ message.split('').reverse().join('') }} 이렇게 복잡하고 긴 로직이 필요할 때에는 computed를 사용한다고 합니다. (길다고 생각 안 할 수 있지만..! 더 길어질 수도 있고, 양이 많아지면 복잡해질 수 있음!!) 하지만 의문이 생기죠..!!! 우리는 이전까지 메서드 내의 함수를 활용하여 메서드에 로직을 구성하고 인스턴스를 가져다 쓰며 간략하게 사용했었는데!! 같은 거 아닌가???? 하는 의문이 생깁니다..! 그렇다면 메서드와 computed의 차이는 무엇일까?? 가이드 문서에는 이렇게 나와있.. 4. vue.js 데이터 양방향 바인딩 안녕하세요~~!!!> value 을 확인해 보니 input박스 안의 데이터가 찍혀있는 것을 확인할 수 있었습니다.('textㄱㄱ') 우리는 그럼 이것을 활용하여 양방향 바인딩을 할 수 있습니다!!! 어떻게 할까요???? 3. input 박스의 value를 text데이터에 바인딩시켜주기 updateText() 메서드에서 event라는 파라미터를 input박스에서 받고 있습니다. 따라서 콘솔에서 확인한 것과 동일하게 input값인 event.target.value를 text 값으로 리턴 시켜줍니다. 그럼 text에 잘 바인딩되어 나오는지 확인해 볼까요?? 짜잔..!!!!!! text의 값이 keyup이벤트를 통해 바인딩된 것을 확인할 수 있었습니다!!! 이렇게 keyup이벤트와 메서드를 활용하여 바인딩하는 .. 3.vue.js로 이벤트 주기 안녕하세요~~!!!> 이벤트핸들링 > 이벤트수식어로 타고 들어가면 다양한 이벤트 수식어들이 모여있습니다!! 페이징 리로딩을 막아주는 것으로 .prevent를 사용하라고 나와있네요. ★이 외에도 다양한 이벤트 수식어가 잘 설명되어 있으니 쭉~ 확인해 보시면 무진장 도움이 많이 될 것 같습니다 ^^ 자 그럼 저희도 바로 .prevent를 사용하여 잃어버린 'hello'를 찾으러 가보자고요~!!! 위의 사진처럼 v-on:submit="함수명"에서 v-on:submit.prevent="함수명"으로 .prevent를 추가해 주었습니다!! 과연 우리가 그토록 기다리던 hello를 찾을 수 있을까요..?? 오..... .prevent를 사용하여 페이지 리로딩을 막아주었더니 alert확인 후 콘솔에서 'hello'가 .. 2. vue.js 데이터 바인딩 안녕하세요~!! 오늘은 vue 데이터 바인딩하는 방법에 대해 알아보겠습니다!! + 인자 , 파라미터(매개변수) 사용방법도 함께 알아보겠습니다! 일단 저는 유튜브 코지코드의 무료강의를 보면서 공부하며 정리중입니다! https://www.youtube.com/kossiecoder 1.함수 파라미터 사용하기 사진과 같이 nextYear함수에 파라미터명을 적어줍니다. nextYear(hello){} 메서드에서 리턴할때 hello 를 사용하면 되고, 위에 nextYear('안녕하세요') 와 같이 hello 인자값을 문자열로 적어줍니다. 결과값을 한번 확인해 볼까요?? 이와 같이 hello 인자 값인 '안녕하세요'가 return 된 것을 확인할 수 있습니다. 2. 데이터 바인딩 하기(inputBox). 데이터 바인.. 1. vue.js 인스턴스, 데이터와 메소드 생성하기 안녕하세요~! 오늘은 드디어! 환경설정을 마치고 vue.js입문강의를 보며 기초 다지기를 시작하려 합니다! 그럼 시작해 볼까요? 설명 전에 어떤 강의를 보고 따라 했는지 링크 첨부해 드리겠습니다! 저는 유튜브-코지코더 강의를 보고 따라 하였습니다. https://www.youtube.com/@kossiecoder/featured 코지 코더 Kossie Coder 호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^ www.youtube.com 1. 파일 생성하기. 2. 빌드 및 열기 파일을 생성한 후!+Tab을 누르면 저렇게 html 틀이 나옵니다! 틀이 나오면 title명을 .. 1.node.js 설치방법 안녕하세요!>0 고급 시스템 설정 > 환경 변수 > Path C:\Program Files\nodejs nodejs 실행파일의 path경로를 확인하실 수 있습니다. (혹시라도 나중에 VSCode에서 확인할 때 프로그램명을 찾지 못한다는 오류가 난다면 path에 존재하는지 확인해보시면 도움이 될겁니다!확인!) 3-2. node.js 설치 완료 후 잘 설치가 되었는지 확인하는 방법 두 번째! VSCode에서 확인하기.(VSCode설치가 되어있어야 함..!) 새 프로젝트 생성 후 터미널에서 해도 되지만 그 이전에 확인하는 것이라면 view > Terminal 클릭 후 터미널 창을 열어주시면 됩니다. !!!VSCode 설치방법!!! https://januarytree.tistory.com/2 Visual Stu.. 이전 1 2 3 다음
