낮햇볕

기능단위로모듈화를묶어관리 의존성있는모듈 노드뷰 외부파일미리구분해서사용가 v-router package.json lint 오류찾기 eslint디펜던시사용해서설치 웹팩설치 npm install -g vue/cli vue -V :D terminal에서하면 화살표누르고 Command Prompt누르고 시작하기 그러면 경로가 나오는데 cd ..은 상위폴더로가는것임 cd 파일명을해주면 그안에서 작성가능하게됨 폴더안에 작성을하고싶다면 그 폴더안 경로에 들어가서 밑의것을 작성해주면 된다 vue create 폴더명 터미널에서 그파일 만들어줌 Linter/Fotmatter 라우터설치하고싶다면 Router도 같이 포함해준다 2.x ESLint with error preventtion only Lubt on save In d..

행 v-row 12열이 1행 v-row를 이용하면 하나의 행을 만들수 있다 열 v-col v-col를 이용하면 안에 들어가는 열을 만들수있다 cols을 이용하여 차지하는 열의 갯수를 정할수 있다 cols=6작성시 전체 반차지 12넣으면 전체차지 최대가 12다 열사이간격조정 offset 그리드12 그리드6 그리드12 sm4 sm4

뷰티파이홈페이지에서 installation을 클릭하면 밑으로 내려가보면 CDN으로 사용가능하게 되어있다 그중 첫번째 link가 구글아이콘을 쓸수있게 해준다 구글아이콘 |Material+Icons 를 뒤에 넣어주면 구글폰트에서 아이콘을 들고올수있다 |가 또는 이라는말이다 Browse Fonts - Google Fonts 구글아이콘을 적는것은 구글폰트홈페이지에 icon을 클릭하고 선택할거 클릭하면 빨간네모박스를 복사해서 안에 help_outline을 넣어주면된다 help_outline 위의 help_outline 을 넣어주면 아이콘이나온다 구글아이콘은 _(언더라인)을 사용하고 머터리얼(marterial)은 -(하이픈)을 사용한다 v-btn뒤에 icon을 작성해주면 버튼이보이지않고 아이콘이 보인다 마우스를 갖..

카드형태 v-card 이미지 v-img 카드제목 v-card-title 카드내용 v-card-text 버튼공간 v-card-actions 로렘픽숨 웹사이트 임의의 이미지를 규격에 맞게표시; 로렘픽숨에서 이미지를 가지고오고싶다면 Lorem Picsum Lorem Picsum Lorem Ipsum... but for photos picsum.photos https://picsum.photos/ 는 로렘픽숨의 주소 id 다음/193은 #193되어져있는것을 들고온것이다 400/300은 이미지크기이다 가로세로 카드사용시 Card component — Vuetify (vuetifyjs.com) Card component The v-card component is a versatile component that ca..

머티리얼 그림자 자바스크립트 구글의 공식 머티리얼의 디자인을 사용할수있는 컴포넌트 뷰티파이 머티리얼스펙제원 커스터마이징 가능한 옵션제공 v-로 시작 사용방법 cdn사용 https://vuetifyjs.com/en/getting-started/installation/ 저링크와 스크립트들을 사용해야지 vuerify를 사용할수있다 Hello world 링크 연결 이게 vuetify를 쓸때 기본이다 vue./cli사용시 npm으로 설치 v-app 아이콘버튼 v-app-bar css로 shadow를 주지않아도 저렇게 나온다 v-app-bar뒤에 반드시 app을 넣어줘야 저렇게 나온다 v-app-bar-icon 아이콘을 직접넣어주지 않아도 저렇게나온다 타이틀 v-toolbar-title 타이틀 v-app-bar안에..

자바스크립트의 for반복문과 동일하다 사용법은 태그 옆에 v-for = "" 를 붙여주면된다 ex) {{n}} data를 사용하지 않고 숫자반복 v-for="n in 10" -숫자반복 {{n}} ul 안 li태그에 v-for을 사용해주었다 n in 10을해줘서 숫자 열번이 반복되었다 data안에서 배열에 값을 담아 사용할때 {{item.name+ "," + item.stock}} {{`${item.id} ${item.name}이 ${item.stock}개 남았습니다`}} fruit 이라는 배열에 값을 item에 담아서 사용 {{item.name+ "," + item.stock}} {{`${item.id} ${item.name}이 ${item.stock}개 남았습니다`}} fruit의 배열안 name 과 ..

자바스크립트의 if문 else-if 문 else문과 동일하다 v-if는 조건이 참일때 v-else-if 는 if외의 조건이 참일때 v-else 는 v-if나 v-else-if의 조건들이 다 거짓일때 발생한다 클릭시-1 아직v-if입니다 아직 v-else-if입니다 0이 되어 v-else입니다 클릭시-1 버튼에 v-on:click="stock -= 1"을 해줘서 data안의 stock이 버튼클릭때마다 숫자가 1씩줄어든다 아직v-if입니다 v-if를 사용해주어서 stock의 숫자 값이 5보다 크다면 아직 v-if입니다를 랜더링(화면표시)해준다 stock이 지금10 이여서 아직 클릭전일때 v-if의 텍스트를 출력해준다 stock 수가 5가 되기전까지 계속 v-if를 랜더링해준다 아직 v-else-if입니다 v..

v-model은 form요소들을 통해 값을 양방향으로 가져올수있다 input text, input checkbox, input radio (checked를 통해 가지고올수있음) v-model = "값" input이용해 값 들어가게됨 그값을 따로 출력가능 text로 지정 type="text" 일때 v-model은 value값을 양방향으로 바인딩한다. checkbox 체크되었을때 data값을 boolean값으로 하기 v-model에 연결된 data 속성이 배열이 아닐때 checked의 boolean값을 들고온다 data 속성이 배열일때 type="checkbox"일때 v-model에 연결된 data 속성이 배열이면 value값을 들고올수있다 ok:[""] 값안에 글자 적으면 0 번째 배열에 글자가 나오게 된..

class를 data로 넣어주고 싶을때 사용 v-bind: = : v-bind를 축약해서 : (콜론) 만사용할수 있다 v-bind:class = {클래스이름 : boolean값} 으로 참일때 클래스가 실행이 된다 boolean 값은 data객체의 속성이 들어가도 되고 true/false로 값이 들어갈수 있다 기본 html 속성(ex) class) 앞에다 : 붙이면 data 나 js표현식을 사용할수있다 속성접근가능 이미지, 링크, 스타일 크기에 대한 단방향(data에서 html한쪽으로만사용가능) 데이터 바인딩 bind로 접근할수 있는값 이미지 img src : v-bind:src 링크 a href : v-bind:href 클래스 : v-bind:class 스타일 : v-bind:style 키 : v-bin..

Vue.component(컴포넌트이름 (문자열작성), { template : ` ` //사용방법동일 백틱사용 data: function(){ //반드시함수로 return { 값이 여러개로들어가서 객체로 값넣어실행 }, methods : { } html head태그 body 컴포넌트는 같은 것을 계속 랜더링하지만 중복을 제거 data는 같은 컴포넌트라고 해서 다 공유되는 것이 아니라 각각의 들이 각각의 data를 가진다 자체가 캡슐이다 캡슐화 : 안의 내용을 알수없음(template의 html요소를 알수 없음), 간단하게 쓸수 있다 뷰지정공간안 컴포넌트 이름('word-replay')을 태그로 불러온다 컴포넌트는 뷰인스턴스보다 위에 만들어져야되고 뷰인스턴스 = new Vue ({ }) 컴포넌트의 스크립트가..