vue 설치 및 기초

 vue 설치

- node.js 최신으로 설치
- VSC 터미널에서 npm install -g @vue/cli

 

 

 VSC extention 설치

- Vetur
- html css support
- html css support

 

 

뷰 프로젝트 생성

- vue create vuestudy
- 오류 발생 : workspace\vue공부> vue create vueStudy
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\ge.lee\AppData\Roaming\npm\vue.ps1 파 
일을 로드할 수 없습니다. 보안 오류: (:) [], PSSecurityException
- 해결 방안 :  Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤
Set-ExecutionPolicy Unrestricted

 

 

뷰 실행

- App.vue 내용 수정
- 터미널에 npm run serve

 

 

 데이터바인딩

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4 :style="스타일">abc</h4>
    <p>{{price}}원</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      price : 1234,
      스타일 : 'color:purple',
    }
  },
  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>

 

 

 

v-for 반복문

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div class="menu">
    <a v-for="a in products" :key="a">{{a}}</a>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      products : ['딸기', '복숭아', '한라봉'],
    }
  },
  components: {
  }
}
</script>

 

 

i도 사용

<template>
  <div class="menu">
    <a v-for="(a,i) in products" :key="i">{{a}}</a>
  </div>
</template>

 

 

 

 

<div v-for="(a,i) in products" :key="i">
    <h4>{{products[i]}}</h4>
</div>

위와 아래 동일

<div v-for="(a,i) in products" :key="i">
    <h4>{{a}}</h4>
</div>

 

 

 

 

참고. 코딩애플
https://www.youtube.com/watch?v=Agm-F366ZwY&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=5