FRAME WORK (35) 썸네일형 리스트형 Vue.js 3 폴더구조 Vue 프로젝트를 생성하여 열면 아래의 사진처럼 폴더가 구조되어있다. 예외로 jsconfig.json 파일은 https://vuejs.github.io/vetur/guide/setup.html#project-setup 사이트를 참고하여 추가한 파일이다. 1. package.json 중요한 부분은 'dependencies' 와 'devDependencies' 부분인데 이 부분은 필요한 패키지의 리스트들을 저장해 놓은 공간이다. 'dependencies'는 개발을 할 때와 프로덕션에 올릴 때에 필요한 패키지이고, 'devDependencies'는 개발을 할 때에만 필요한 패키지여서 개발이 끝나면 없어도된다. 여기 있는 패키지들은 설치와 동시에 'node-modules'폴더 안에 자동으로 설치된다. 2. in.. Vue - Directive란? 1. Vue에서 디렉티브(Directive)란? Directive를 번역하면 지령이라는 뜻이다. 디렉티브란 Vue엘리먼트에게 어떻게 작동하라는 지령을 내리는 지시문이다. 디렉티브는 Vue의 기능들을 사용하기 위해 HTML태그 안에 들어가는 속성이며 'v-'라는 앞글자를 지닌다. 2. 종류 v-text 엘리먼트의 textContent를 업데이트 합니다. v-html 엘리먼트의 innerHTML을 업데이트 합니다. v-show 토글은 표현식 값의 참에 기반을 둔 display CSS 속성입니다. v-if 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링 합니다. v-else v-if 또는v-if /v-else-if 체인을위한 “else 블록”을 나타냅니다. v-else-if v-if에 대한 “else.. Vue.js 기본 개발 환경 설정하고 프로젝트 생성하기 1. Node.js 설치 https://nodejs.org/ko/ 에서 서 최신기능이 아닌 안정적,신뢰도 높은 LTS 버전으로 설치한다. Node.js와 함께 설치되는 npm을 이용해 Vue.js 와 관련 도구를 설치하고 관리하게 된다. 2. Vue.js dev tools 설치 Vue.js devtools는 크롬의 확장기능으로 Vue에 적용되어 있는 값들, 컴포넌트들을 개발자도구에서 실시간으로 추적하고, 사용자가 눈으로 확인할 수 있도록 GUI로 출력시켜주는 툴이다. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 설치한다. 3. 비주얼 스튜디오 코드(vscode) 확장프로그램 설치 비주.. 이전 1 2 3 4 5 다음
