[1,2,3] vue 설치, 데이터 바인딩

[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

 

 

폴더로 열기

app.vue

 

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를 꽂아넣을 수 있다는 것입니다.

스타일이라는 속성도...data에서 가져다 씀

<h4 :style="데이터이름"> </h4>

스타일 : 'color : blue'

 

 

 

숙제: 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>