티스토리

낮햇볕

검색하기

블로그 홈

낮햇볕

lightofsun.tistory.com/m

낮햇볕 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

vue $route $router.push() router-link 기능단위로모듈화를묶어관리 의존성있는모듈 노드뷰 외부파일미리구분해서사용가 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.. 공감수 0 댓글수 0 2022. 4. 16.
뷰티파이 그리드레이아웃 v-row v-col cols 기기별 정렬속성 행 v-row 12열이 1행 v-row를 이용하면 하나의 행을 만들수 있다 열 v-col v-col를 이용하면 안에 들어가는 열을 만들수있다 cols을 이용하여 차지하는 열의 갯수를 정할수 있다 cols=6작성시 전체 반차지 12넣으면 전체차지 최대가 12다 열사이간격조정 offset 그리드12 그리드6 그리드12 sm4 sm4 공감수 0 댓글수 0 2022. 3. 29.
뷰티파이로 google font 에서 icon들고오기 뷰티파이홈페이지에서 installation을 클릭하면 밑으로 내려가보면 CDN으로 사용가능하게 되어있다 그중 첫번째 link가 구글아이콘을 쓸수있게 해준다 구글아이콘 |Material+Icons 를 뒤에 넣어주면 구글폰트에서 아이콘을 들고올수있다 |가 또는 이라는말이다 Browse Fonts - Google Fonts 구글아이콘을 적는것은 구글폰트홈페이지에 icon을 클릭하고 선택할거 클릭하면 빨간네모박스를 복사해서 안에 help_outline을 넣어주면된다 help_outline 위의 help_outline 을 넣어주면 아이콘이나온다 구글아이콘은 _(언더라인)을 사용하고 머터리얼(marterial)은 -(하이픈)을 사용한다 v-btn뒤에 icon을 작성해주면 버튼이보이지않고 아이콘이 보인다 마우스를 갖.. 공감수 0 댓글수 0 2022. 3. 29.
뷰티파이 Lorem Picsum으로 카드ul만들기 카드형태 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.. 공감수 0 댓글수 0 2022. 3. 29.
뷰티파이 cdn 사용법 디자인툴 material아이콘 머티리얼 그림자 자바스크립트 구글의 공식 머티리얼의 디자인을 사용할수있는 컴포넌트 뷰티파이 머티리얼스펙제원 커스터마이징 가능한 옵션제공 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안에.. 공감수 1 댓글수 0 2022. 3. 28.
v-for 자바스크립트의 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 과 .. 공감수 0 댓글수 0 2022. 3. 21.
v-if v-else-if v-else 자바스크립트의 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.. 공감수 0 댓글수 0 2022. 3. 21.
v-model 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 번째 배열에 글자가 나오게 된.. 공감수 0 댓글수 0 2022. 3. 21.
V-bind 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.. 공감수 0 댓글수 0 2022. 3. 20.
[Vue] 끝말잇기 만들기 컴포넌트사용 전역 컴포넌트 지역컴포넌트 Vue.component(컴포넌트이름 (문자열작성), { template : ` ` //사용방법동일 백틱사용 data: function(){ //반드시함수로 return { 값이 여러개로들어가서 객체로 값넣어실행 }, methods : { } html head태그 body 컴포넌트는 같은 것을 계속 랜더링하지만 중복을 제거 data는 같은 컴포넌트라고 해서 다 공유되는 것이 아니라 각각의 들이 각각의 data를 가진다 자체가 캡슐이다 캡슐화 : 안의 내용을 알수없음(template의 html요소를 알수 없음), 간단하게 쓸수 있다 뷰지정공간안 컴포넌트 이름('word-replay')을 태그로 불러온다 컴포넌트는 뷰인스턴스보다 위에 만들어져야되고 뷰인스턴스 = new Vue ({ }) 컴포넌트의 스크립트가.. 공감수 0 댓글수 0 2022. 3. 19.
구구단만들기 $refs html {{first}}곱하기{{second}} 는? 입력 {{result}} {{}} 를 사용하여 html에 텍스트를 만들어준다 js const app = new Vue({ el: '#root', //data만 수정한다 data : { //Math.ceil = 소수점이하의 값을 올림해준다 //ex) Math.ceil(23.5) /24가 된다 first: Math.ceil(Math.random()*9), second: Math.ceil(Math.random()*9), value: '',//정답 result: ''//결과 }, methods : { onSubmitForm(e) { e.preventDefault();//페이지새로고침막기 //console.log(this)//콘솔창에 Vue라고 나오는데 이곳.. 공감수 0 댓글수 0 2022. 3. 19.
vue 사용법 vue를 처음 배우는데 헷갈려서 작성해 보았다 html 버튼 눌렀음 버튼 data에 연결할 태그들을 (id바꿔도됨)안으로 감싸줘야 "#root"안의 태그들을 data로 연결되게 된다 new Vue 안의 el(element) = "#root" 를 입력해줘야 한다 버튼 눌렀음 v-if="clicked" 를 통해 data에서 clicked : false 되어서 보이지 않게 된다 v-if는 조건문과 같아서 true면 실행된다 v-else는 v-if나 v-else-if가 true가 아닐때 실행 지금 data의 clicked : false 가 되어있어서 v-if 가 아닌 v-else가 실행된다 버튼 그냥 html은 onclick인데 vue는v-on:click으로 사용 "onClickButton" v-on:click.. 공감수 0 댓글수 0 2022. 3. 19.
뷰인스턴스 template 사용 vue.js이용 웹페이지필요기능만들때 기본적으로 생성하는객체 new vue를 이용해서 생성 = 뷰인스턴스 new Vue({ el엘리먼트약자 data 값을 묶어둠 }) 변수담아서 사용가능 const vm = new Vue({ }) vm은 vue모델약자 template 속성 vue화면 표시할 dir h3같은 html요소 스타일설정 문자열로 작성하기 data값 쓰고 싶다면 ` `(백틱)으로 사용 문자열이요소""로 사용가능 div메세지 값 담을수있도록 template : `백틱사용` "문자열사용" html {{msg}} js template사용안했을때 new Vue({ el : "#app", data : { msg : "data에서의 텍스트입니다" } }) js template사용했을때 new Vue({ el .. 공감수 0 댓글수 0 2022. 3. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.