[1] vue 장점
[2] vue 설치
개발환경 세팅
nodejs설치하기
최신버전으로
윈도우, 맥은 똑같음
npm install -g @vue/cli
뷰 cli 를 설치함.. 뷰 환경을 설치해줌
에디터 부가기능: extensions
vetur
html css support
vue 3 snippets
npm install --global yarn
yarn global add @vue/cli
프로젝트 생성
vue create 프로젝트명
vue create vuedongsan
폴더로 열기
npm run serve 실시간 미리보기
[오류 발생함]
이거 안되면 nodejs 버전이 17이라서 그래.. 16으로 다운그레이드 해줘
어떻게 하냐고? 제어판에서 nodejs삭제하고 다시 다운 받아..
nodejs 설치 왜함? npm 사용하고 싶어서
npm은 뭐임? (패키지 매니저)각종 웹개발 라이브러리 설치 도우미
npm으로 @vue/cli 설치함 : 뷰 프로젝트를 쉽게 만들어줌.. ㅋㅋㅋ --> vue create 프로젝트명
뷰는 이렇지 않아도 된다.
자료이름: 자료 내용
오브젝트 모양..
[3] 데이터 바인딩
전통적인 javascirpt | vue |
document.getElementById("어쩌구").innerHTML = 데이터; | {{ 변수 이름 }} |
이 문법을 왜씀??
html에 하드코딩하면 되잖아!!!
1. 나중에 변경이 힘듦
쇼핑몰은 가격이 맨날 변함.. 다 찾아서 변경할거야??
2. vue 실시간 자동 렌더링
vue는 신기해서 데이터와 관련된 html을 변경함
웹앱 사이트를 만들수 있다 : html이 갈아치우면서 부드럽게 넘어간다.
HTML 속성도 데이터바인딩이 가능합니다.
그니까 style="" id="" class="" 이런 것들에도
밑에 저장해둔 data를 꽂아넣을 수 있다는 것입니다.
<h4 :style="데이터이름"> </h4>
숙제: array를 template에 출력해봐라
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div>
{{logo}}
<h4 class="red" :style="스타일">{{price1}} 원룸</h4>
<p>{{price1}} 만원</p>
</div>
<div>
<h4 class="red" :style="스타일">{{price2}} 원룸</h4>
<p>{{price2}} 만원</p>
</div>
</template>
<script>
//데이터 바인딩.. js데이터를 Html에 꽂아넣음
export default {
name: 'App',
data(){
return{
price1:60,
price2:70,
logo:"로고샵",
스타일 : 'color : red'
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template>
<img alt="Vue logo" src="./assets/logo.png">
{{logo}}
<div>
<h4 class="red" :style="스타일">{{products[0]}}</h4>
<p>{{price1}} 만원</p>
</div>
<div>
<h4 class="red" :style="스타일">{{products[1]}}</h4>
<p>{{price2}} 만원</p>
</div>
<div>
<h4 class="red" :style="스타일">{{products[2]}}</h4>
<p>{{price2}} 만원</p>
</div>
</template>
<script>
//데이터 바인딩.. js데이터를 Html에 꽂아넣음
export default {
name: 'App',
data(){
return{
products : ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
logo:"로고샵",
스타일 : 'color : red'
}
},
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
'코딩애플 > 코딩애플-vue.js' 카테고리의 다른 글
[9,10,11] Component, props (0) | 2022.01.03 |
---|---|
[8] 모달창 내에 상세페이지 만들기 (0) | 2022.01.03 |
[7] import / export (0) | 2022.01.03 |
[6] v-if 와 모달창 만들기 (0) | 2022.01.03 |
[4,5] v-for, @click(이벤트 핸들러) (0) | 2022.01.03 |