엉터리 개발 이야기/vue 썸네일형 리스트형 npm 모듈 publish npm 모듈 publish https://vuejsdevelopers.com/2017/07/31/vue-component-publish-npm/ https://codeburst.io/fastest-way-to-publish-a-vue-js-component-on-npm-d58f59e185f8 더보기 [Vue] Object, Array 형태 Watch 시 유의점..? Object, Array 일 경우에는 obj.a = 1로 변경하면 트리거가 안된다. // arr: { // handler: function(cur, prev) { // console.log(cur) // console.log(prev) // }, // deep: true // }, 이렇게 해줘도 cur값과 prev가 동일하다.. 변경된 내용을 다시 재할당 해야한다.? let copyArr = Object.assign({}, this.arr)또는 이렇게 let copyArr = {...this.arr}copyArr.a = 1this.arr = copyArr하면 cur, prev를 확인할 수 있다.Vue.set(this.arr, 'e', 1) 새로 추가된 property는 트리거가 되지만Vue.set(thi.. 더보기 [Vue] javascript library 추가해서 사용하는 방법 https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/ 더보기 [Vue] 확인필요한 사항 Down Link 1 Link 2 Link 3 btnClick3: function(evt) { console.log(evt); console.log(evt.target); console.log(evt.target.nextSibling); } 태그의 화살표를 클릭 하면 evt.target.nextSibling 가 null 인 상태 하지만, 그냥 html 파일로 작성했을 경우에는 태그가 출력된다. 에 주고.. 클릭에 대한 이벤트는 발생하기 때문에 클릭에 대한 정의만 없을 뿐이지.. capturing 과 raising 과 bubbling 은 발생한다.. evt.currentTarget.nextSibling해야한다... 더보기 [Vue] mounted 에서 data undefined 발생할 경우 mounted : function() { let $vm = this this.$nextTick(function() { document.getElementById('btn1').addEventListener('click', function () { console.log(typeof($vm.items)) console.log($vm.items) $vm.items.push('B') }) }); },아니면arrow function 사용 출처 : https://stackoverflow.com/questions/51929737/vuejs-data-property-returns-undefined-in-mounted-function 더보기 [Vue] SideBar 예제 {{item.title}} {{item.title}} {{subItem.title}} 더보기 [Vue][Vuex] store 관리 방법 참고 소스 https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js module로 추가해서 사용함각 모듈마다 state, mutations, actions, getters 정의해서 사용 더보기 [Vue] 간단한 Side Icon Bar 적용해보기 이전에 생성했던 vue ui 로 만들었던 내용에 덧붙인다. views 폴더 밑에 SideBar.vue 생성 .icon-bar { height: 100%; width: 90px; background-color: #555; position: fixed; /* Fixed Sidebar (stay in place on scroll) */ /*z-index: 1;*/ /* Stay on top */ top: 0; /* Stay at the top */ left: 0; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 0; } .icon-bar a { display: block; text-align: center; padding: 16px; tran.. 더보기 이전 1 2 다음
