vuejs 썸네일형 리스트형 [Vuejs] EventBus에서 this 사용법 예제를 잘못 찾았는지 몰라도, 아니면 사용법을 잘 몰랐던 것이거나.. javascript를 오랜만에 하면서 여러 문법들이 많이 생겨났다는 것을 알았다. 대표적으로 함수의 사용법이었는데..(다들 알고 있는 것을 나만 잘 몰랐음..) 뭐 그건 그렇고.. Vue에서 axios를 자주 쓰는데, 원래 ajax로 통신하던걸 axios로 바꾸다 보니 새로운 문제가 생겼다. 바로 메인 콤포넌트의 변수를 바로 사용하지 못한다는 것.. var eventbus = new Vue() var vm = new Vue({el: '#app',data: {name: ''},created: function () {eventbus.$on('test', function () {this.name = '고양이'})}}) 위 예제처럼 쓰라는 곳.. 더보기 Vuejs watch 사용법 이래저래 많이 유용할 것 같아 올립니다. watch 기능은 Vue에서 특정 값이 변했을 때 감시자 역할을 해줍니다. 현업에서 데이터 변경 시 어떤 작업을 해야한다 하면 watch 로 하면 편합니다. 이걸 몰랐을 때에는 이벤트 생성해서 작업을 해라라는 명령을 했었는데.. 역시 아는게 힘입니다~ 소스는 jsfiddle 에 있습니다. https://jsfiddle.net/holecjh/901y3dg4/4/ 더보기 이벤트버스에서 parent 함수 호출 방법 이벤트 버스를 이용해서 콤포넌트간 이벤트 및 데이터를 편하게 주고받을 수 있는데요, 코딩을 하다가 하도 안되는게 있어서 좌절할 뻔했습니다.. 이유인 즉.. componentB에서 componentA의 close() 를 호출하고 싶었습니다.. 공통을 쓰는 여러 변수들도 있었고.. 꼭 호출해야만 하는 상황이었고. 하지만 아무리 해도 undefinded 만 계속 나오고, 함수도 못찾고.. 아래 테스트 코드입니다.. (콤포넌트 부분만 발췌) var eventBus = new Vue() var componentA = { template: 'A임', created: function () { eventBus.$on('closeA', function () { //close() close 못찾음 //this.close(.. 더보기 Vuejs 간단한 게시판 예제 간단하게 게시판 구현해 보았습니다. paging 번호는 부트스트랩 썼습니다. 특이한건 자식 component를 사용하여 리스트를 구현했는데 x-template script 사용하여 목록이 루프되는 구문만 분리했습니다. 그리고 원래 코드는 axios써서 서블릿으로 데이터 받아왔었는데, 그냥 하드코딩한거 넣었습니다. 코드 보시고 응용하시면 됩니다. 프로그래스는 리스트 불러올 때 시작해서 다 불러오면 종료입니다. 코드자체는 어려울게 없고, 책이나 도큐먼트 사이트 참조하시면 쉽게 이해 되실겁니다. ---------------------------------------------------------------------------------{{ responseMsg }} No. Title Created Date.. 더보기 Vuejs 예제 예제사이트 : https://vuejsexamples.com 공부를 하다보니 관련 예제가 많이 필요했는데 여기서도 도움을 많이 받고 있습니다. 하지만 완성도 높지않은 예제도 많이 있고, 적용해도 잘 안되는 것들도 많았습니다. 스스로 찾아보면서 필요한 것들 추려야 할 것 같습니다. 그리고 아래 두권의 책 보면서 이해력이 많이 올라갔습니다. (책 홍보는 절대 아닙니다. 개인적으로 구매해서 보는 중입니다.) 코드를 만들어 보고 앵귤러 보단 쉽다는 생각이 들었습니다 ㅎ 아직 초반이라 잘 몰라서 그래요;; 공부는 열심히! 더보기 이전 1 다음
