HTML, JAVASCRIPT 썸네일형 리스트형 [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 공부를 하다보니 관련 예제가 많이 필요했는데 여기서도 도움을 많이 받고 있습니다. 하지만 완성도 높지않은 예제도 많이 있고, 적용해도 잘 안되는 것들도 많았습니다. 스스로 찾아보면서 필요한 것들 추려야 할 것 같습니다. 그리고 아래 두권의 책 보면서 이해력이 많이 올라갔습니다. (책 홍보는 절대 아닙니다. 개인적으로 구매해서 보는 중입니다.) 코드를 만들어 보고 앵귤러 보단 쉽다는 생각이 들었습니다 ㅎ 아직 초반이라 잘 몰라서 그래요;; 공부는 열심히! 더보기 Vuejs란 Vuejs란..Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.공식홈펌------------------------- Vuejs를 얼마전부터 공부하고 있는데 코드가 좀 생소하긴 하네요.열심히 공부해서 여러 팁 공유하도록 하겠습니다~ 공부하시는 분들 사이트 많이 찾으셨겠지만, 그래도 혹시 모르니 링크 걸어둡니다.Vue.. 더보기 브라우저에서 뒤로가기, 펑션키 막기 location.replace("이동할 새로운 URL"); 이런식으로 페이지를 이동하면 history.length가 0 이됩니다. 아래소스는 특수키를 막는 겁니다. 링크의 키코드표와 함께 응용하여 사용하세요. /-----------------------------------------------------------------/ 파이어폭스에서 잘 안되기에 소스를 수정했습니다 /-----------------------------------------------------------------/ /************************ 특수키 Key Protection ************************/ function lockKey(e) { if (e == null) { if (event.. 더보기 javascript 에서 this.form 사용 뭐 이런; 안되길래 뭔가 있는줄 알았더니..어이없다.. 예를 들어 아래와 같은 소스를 보자. 출처 : http://ask.nate.com/qna/view.html?n=3651515 이 소스에서는 this.form(form name으로 선언된 이름) 이 정상적으로 동작한다. 하지만 아래 소스에서는 동작하지 않는다. 무슨 차이가 있을까? 하나는 input tag에서 this.form 을 호출했고, 다른 하나는 a tag에서 호출했다. input에서 부를때는 되지만, a 에서 부르면 안된다는 말이다. 이유를 정확히는 모르겠지만 a tag는 현재 form에 포함되지 않는 객체라서 그런 것 같다. (정확히는 모르겠지만 저렇게 쓰면 안된다는것은 확신한다.) 그 외 form요소에서도 다 된다. 더보기 이전 1 2 다음
