20230214 Vue & Axios

vue 작성 예시

<template>
  <!-- HTML -->
  <h1>My first Project</h1>
  <!-- 변수값을 불러올때는 {{  }} 안에 변수명 입력 -->
  <p>{{ msg }}</p>
  <!-- vue에서 연결 시, @넣고 입력 -->
  <button @click="changeMsg()">변경</button>
  <!-- v-bind : 뷰 최초 로드 시 값 설정만 된다. -->
  <!-- a, img 등 URL 들어가는 부분  -->
  <!-- <input type="text" v-bind:value="mymsg"> -->
  <!-- <input type="checkbox" v-bind:checked="chk"> -->

  <!-- v-model : 뷰 최초 로드 시 값 설정 & 변수와 동기화 -->
  <!-- 대부분 input에 적용  -->
  <input type="text" v-model="mymsg">
  <input type="checkbox" v-model="chk">
  <label for="areashow">area 보이기</label>
  <p>{{ mymsg }}</p>
  <p>{{ chk }}</p>
  <!-- v-if 안쪽 값이 true이거나, 연산결과가 true 일 때만 화면에 보여줌 -->
  <div id="area" v-if="chk">
    <p>Area 보이기</p>
  </div>
  <input type="text" v-model="inputValue">
  <button @click="addToList">리스트에 추가</button>
  <div id="contents">
    <p v-for="n in list" :key="n">{{ n }}</p>
  </div>
  <MyComp />
</template>

<script>
  import MyComp from './components/MyComp.vue';
  // javaScript
  export default {
  name: 'App',
  components:{MyComp},
    // return안의 변수 값은 App.vue안에서만 사용가능
    data() {
      return {
        msg: "첫번째 프로젝트",
        mymsg: "adfadfsf",
        chk: true,
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        inputValue: ""
      }
    },
    methods: {
      changeMsg() {
        this.msg = "버튼을 누름"
      },
      addToList() {
        if (this.inputValue == "") {
          alert("빈 값은 입력 불가");
          return;
        }
        this.list.push(this.inputValue);
        this.inputValue = "";
      }
    }
  }
</script>

<style>
  /* CSS */
  #area {background-color: #fab; width: 300px; height: 100px;}
</style>

PS D:\Students\raeeun\work\vue\first> npm install --save axios
로 axios를 설치

create -> mount (종료시, 화면에 노출) -> unmount (프로젝트가 종료가 되고 화면에서 나가야 실행) -> (reload시) create -> update (데이터에 저장해 놓은 값이 달라졌을 때 실행되는 cycle) -> dactivated or unmounted or updated (값을 초기화 할때 사용)