목록dev-log/vue·nuxt.js (16)
H-Log
table에서 넘버링을 할 때 0001, 0002 처럼 4자리 숫자로 맞추는 스크립트! {{review.id|numbering}} {{review.title}} {{review.reviewer}} {{review.date}} {{review.views}} id에 0부터 숫자가 들어가있고, filters 중 numbering을 접목시켰따 numbering 함수를 보자 filters:{ numbering(v){ return v.toString().padStart(4,'0') } } padStart를 사용해서 총 4자리의 숫자로 셋팅하고, 그 자리를0 으로 채운다고 해준다. 주의할 점! padStart는 string요소만 사용이 가능해서 number인 id값을 문자열로 변환해줘야한다!
vue, nuxt에서 url에 붙은 파라미터를 지우고 싶을 때 사용하는 코드! beforeDestroy(){ this.$router.push($route.path) } 페이지 나가면서 지워버리기~
input에 v-model로 미리 선언해놓은 data 변수에 연결해준다. template 내에서 input값을 출력할 때 {{ input | comma }}를 사용해서 출력될 때 comma함수를 거쳐 출력되게 해준다. comma에서는 value를 받아 정규식을 이용해서 변환된 값을 return해준다. filters 사용 숫자만 입력되게 + 3자리마다 콤마 Value: {{input | comma}}
세가지 타입의 input이 있다. Value: Value: Value: nuxt를 사용하지 않는다면, script에서 input의 input/keyup 등의 이벤트를 받아 innerHTML을 하여 출력을 할 것이다. nuxt에서는 input의 이벤트 작성 없이 간단히 출력이 가능하다. 1. data에 각각의 input을 선언 나는 values 라는 하나의 객체로 묶어서 사용했다. 2. input에 v-model을 셋팅해준다. v-model은 input과 data의 양방향 바인딩을 가능하게 해준다. 3. value값을 출력할 위치에 {{v-model data name}}을 입력하면 해당 인풋의 value 값이 출력된다. Value: {{values.textInput}} Value: {{values.numb..
코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 지금까지 fullpage.js는 구현이 다 되었다! 이번 포스트는 필수는 아니지만, 페이지별로 다른 함수를 필요로 할 때, 또는 같은 함수에서 타겟을 현재 페이지의 요소들로 설정할 때 용이할 것이다. watch로 pageIndex 감시 우선 console.log 하나만 넣어놓으면, 페이지가 바뀔 때 pageIndex를 출력해준다. 그것을 응용하여 section별로 필요한 함수를 호출할 수 있을 것이다.
코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue pagination에 click이벤트 적용시키기 @click으로 이벤트를 바인딩 해준다. 인자로 pagination의 index를 넘겨 같은 index의 페이지로 넘어가도록 한다. moveEnet 에 pagination index를 pageIndex에 적용해주는 코드 추가. 그래야 이동 후 휠, 드래그 등에서 에러가 발생하지 않는다. 마우스 드래그 / 터치 이벤트 이 두 이벤트는 사용하는 함수가 같다. 아래 사이트에서 긁어온 후 조금 수정한 거라 이해하기에는 원 블로그가 편할 듯 하다. 참고 블로그 : marshall-ku.com/web/tips/%EC%..