240327 뷰 vue

 

 

Default ([Vue 3] babel, eslint) > 선택

 

 

 

 

npm 기본 명령어

npm --version

npm -v

npm help

npm install

npm serve

localhost:8080

 

 

vue MVVM 패턴

Model-View-ViewModel

데이터 Model

UI담당 View

상태, 동작을 정의, 데이터 바인딩 ViewModel

 

vue는 재사용을 할 수 있는 UI를 묶어 화면을 컴포넌트로 구성

독립적인 기능, 상태를 가질 수 있게 하고 

필요시 컴포넌트를 조합하여 사용하는 템플릿 기반

 

 

vue 열기

 

 

터미널 열기

 

 

 

 

 

 

터미널에서 열기

PS C:\vue\vue-app> npm run serve

> vue-app@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 1614ms  오전 11:12:57

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.30.1.220:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

 

 

소스 > 앱뷰

 

 

원래코드

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <TestText test="연습해봅니다."/>
  <HelloWorld msg="안녕, vue"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import TestText from './components/TestText.vue'

export default {
  name: 'App',
  components: {
    HelloWorld, 
    TestText
  }
}
</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>
<h1>연습중</h1>
</template>

<script>


export default {
  name: 'App',
  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>
<h1>연습중</h1>
<div>
  이름 :{{human.name}}<br>
  {{ name }}<br>
  나이 : {{ human.age }}<br>
  사는 곳 : {{ human.addr }}<br>
</div>
</template>

<script>


export default {
  name: 'App',
  components: {},
  data(){
    return{
      name : '홍길순',
      human : {name : '홍길동', age : 38, addr: '조선'}//
    
    
    }
  }
}
</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-text 사용

 

 

export default {
  name: 'App',
  components: {},
  data(){
    return{
      name : '홍길순',
      human : {name : '홍길동', age : 38, addr: '조선'}//
    
    
    }
  }
}

 

 

<div>
  이름 :{{human.name}}<br>><!-- 머스타치 -->
  이름 : <span v-text="name"></span> <br>
  나이 : {{ human.age }}<br>
  사는 곳 : {{ human.addr }}<br>
</div>

 

 

 

 

v-html

<div>
  이름 :{{human.name}}<br>><!-- 머스타치 -->
  이름 : <span v-text="name"></span> <br>
  이름 : <span v-html="name + '<br>' + '같이 사용'"></span> <br>
  나이 : {{ human.age }}<br>
  사는 곳 : {{ human.addr }}<br>
</div>

 

 

 

 

 

v-bind 사용

 

 

 test : 'test1' 설정

<script>
export default {
  name: 'App',
  components: {},
  data(){
    return{
      test : 'test1',
      name : '홍길순',
      human : {name : '홍길동', age : 38, addr: '조선'}//
    
    }
  }
}
</script>

 

 

v-bind

<template>
<h1>연습중</h1>
<div>
  이름 :{{human.name}}<br>><!-- 머스타치 -->
  이름 : <span v-text="name"></span> <br>
  이름 : <span v-html="name + '<br>' + '같이 사용'"></span> <br>
  나이 : {{ human.age }}<br>
  사는 곳 : {{ human.addr }}<br>
  <div v-bind:id="test">id="test1"/없어도된다.</div>

</div>
</template>