vue (13) 썸네일형 리스트형 [Bootstrap-Vue]게시판 만들기 - 게시판 목록 만들기(b-table과 fields) board.vue 파일을 하나 만들어서 bootstrap-vue에 있는 b-table를 가져왔다!! 이제 이걸 방금 만든 데이터를 보여줄 수 있도록 수정하쟈 근데 굳이 보여줄 필요도 없는 요소들이 보인다. 이걸 보여주지 않도록 해주자! 이때 사용하는것이 Fields 속성!!!!!!!!! 내가 출력하길 원하는 데이터만 보여줄 수 있도록 fields를 이용한다. content_id, title,create_at만 보여주도록 한다. 근데 여기서 객체 속성의 이름을 그대로 사용하는것이 좋아 보이진 않다. 컬럼 명을 변경해보쟈!! 실제 속성의 이름은 key로, 보여주고 싶은 이름은 label로 해준다. [Bootstrap-Vue] 게시판 만들기 - bootstrap세팅하고 header만들기 부트스트랩을 이용해서 게시판을 다시 만들어보쟈 프로젝트를 새로 생성하고, https://bootstrap-vue.org/docs BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org Bootstrap-vue사이트를 참고하면서 설치해 주기! npm install vue bootstrap-vue bootstrap 잊지말기!!!!!! Header 만들기 b-navbar-toggle : 화면이 기준보다 작아졌을 때 메뉴대신 보여주는 버튼(토글)이 뜬다. b-collapse : 화면이 기준보다 작아지면 메뉴들을 안보이게 해준다. 그럼 화면이 작아지는 기준을 정하는 방법은?!! 맨 앞에 있는 b-navbar에 있는 t.. vue를 이용해 게시판 기능 만들기 오랜만에 vue를 이용해서 프로젝트를 하나 만들어 보려니까 가물가물해서 유튜브 강의를 보면서 빠르게 복기시켜보려 한다! '개린이르라나' 님의 vue.js로 게시판 만들기를 보면서 만들었다. vue-cli를 이용해서 프로젝트를 생성했더니 기본적인 틀은 자동으로 만들어준다. components 폴더 게시판의 메인(루트)이 될부분! 게시글 목록을 보여준다. write()는 새로운 글을 작성할 메소드. path가 create로 향하도로 해준다. detail()는 상세페이지. 어떤 글을 클릭해서 그 글의 상세페이지를 보여주기 위해 index를 인자로 보내준다. write메소드는 인자전달 없이 create페이지로 이동하기 때문에 path를 사용하였고, detail메소드는 인자를 전달하기 때문에path가 아닌 nam.. 리스트 렌더링 / v-for v-for = "(item in items)" 배열을 기반으로 리스트를 렌더링 할 수 있다. 여기서 items가 원본 데이터의 배열이며 item은 반복되는 배열 요소의 별칭이다! v-for="(value, index) in data " 두번째 전달 인자로 index를 사용할 수 있다. v-for에 key를 사용하는 편이 좋다!! Key값으로 v-for로 인해 반복되어 렌더링이 된 태그를 기억할 수 있도록 해주기 때문에 사용하는 편이 좋다! https://kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org vue 설치하기 / 오류 (해결 못함) 1. npm install vue 2. npm install -g @vue/cli 3. vue init webpack my-project (my-project부분에 본인의 프로젝트 이름 쓰기) 일단 잘 됐다고 치고!!!!ㅋㅋㅋ........ 그럼 이름도 입력하라고 하고 router를 사용할것인지~ 등등 물어보는데 각자 맞게 입력하면 된다. 이제 프로젝트를 열어주고 npm run dev 해주면 로컬 호스트가 뜬다. 아까 문제된것 가져와서ㅋㅋㅋㅋ vue를 분명히 설치했는데..?! vue가 없단다^^ㅋㅋ큐ㅠㅠㅠㅠㅠ 찾아보니까 환경 변수의 path를 설정해주면 해결할 수 있다고 해서 C:\User\{사용자이름}\AppData\Roming\npm 이 한줄만 추가해주면 해결 할 수 있다고 한다. 그래서 해줬는데.... 이전 1 2 다음
