Vue_기본함수,기능

Data binding

---

데이터를 실시간 바인딩

/src/views/Test.vue

<template>
  <div>
    <h1>binding test {{ title }}</h1>
    <div>
      <input v-model="title" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

---

 

Life-cyle-Hooks

---

vue <script> 아래에 사용하는 애들.

vue의 life-cyle은 다음과 같다.
beforeCreated --> created --> beforeMount --> mounted (–> beforeUpdated --> updated) --> beforeDestroy --> destroyed

언제 동작하는 지 알아야한다.

<template>
  <div>test vue</div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<style lang="scss" scoped></style>

 

---

 

event, method

---

 

이벤트를 발생시켜 method에서 처리할 수 있다.

/src/views/TestEvent.vue

<template>
  <div>
    <h1>Event test</h1>
    <h3>1. 클릭/더블클릭 이벤트</h3>
    <div>
      <div>
        <p>나의 나이는: {{ age }}</p>
        <button @click="addAge(1)">1살 추가</button>
        <button @click="deleteAge(1)">1살 삭제</button>
        <button @dblclick="addAge(10)">10살씩 추가(더블클릭)</button>
        <button @click.once="addAge(1)">1살 추가(한번만)</button>
      </div>
      <div style="margin-top: 20px">
        <input v-model="message" />
        <button @click="printMessage">콘솔 프린트</button>
      </div>
    </div>
    <h3>3. 마우스 추적 이벤트</h3>
    <div>
      <div style="margin-top: 20px; height: 200px; width: 300px; border: 1px solid red" @mousemove="mouseTrack">
        마우스 X: {{ mouseX }}, 마우스 Y: {{ mouseY }}
      </div>
    </div>
    <h3>4. 키보드 이벤트</h3>
    <div>
      <div>이름: <input v-model="inputName" @keyup.enter="setMyName" />(Enter 이벤트)</div>
      <div>아이디: <input v-model="inputId" @keyup.ctrl.enter="setMyId" />(Ctrl-Enter 이벤트)</div>
      <p>나의 이름: {{ myName }}</p>
      <p>나의 아이디: {{ myId }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 20,
      message: null,
      mouseX: 0,
      mouseY: 0,
      inputName: null,
      inputId: null,
      myName: null,
      myId: null
    }
  },
  methods: {
    addAge: function (year) {
      this.age += year
    },
    deleteAge: function (year) {
      this.age -= year
    },
    printMessage() {
      console.log(this.message)
    },
    mouseTrack(event) {
      // console.log(event)
      this.mouseX = event.offsetX
      this.mouseY = event.offsetY
    },
    setMyName() {
      this.myName = this.inputName
    },
    setMyId() {
      this.myId = this.inputId
    }
  }
}
</script>

(v-on:click은 @click와 같다.)
@click: 클릭 이벤트
@dblclick: 더블클릭 이벤트
@mousemove: 마우스 움직임 감지 이벤트
@keyup: 키보드 감지 이벤트(keyup, keydown, keypress)

이벤트가 많기 때문에 필요할때마다 찾아서 사용하도록 한다

 

---

 

method vs computed

---

method와 computed의 차이점은 다음과 같다.

차이점methodcomputed

차이점	method	computed
동작 시점	함수를 호출했을 때(수동)	페이지가 로딩될 때(자동)
전달 인자	세팅 가능	세팅 불가
리턴 값	리턴값이 없어도 됨	*리턴값이 반드시 필요함

/src/views/TestComputed.vue

<template>
  <div>
    <h1>Computed Test</h1>
    <button @click="a++">Add To A</button>
    <button @click="b++">Add To B</button>
    <p>A - {{ a }}</p>
    <p>B - {{ b }}</p>
    <p>Age + A = {{ addToA }}</p>
    <p>Age + B = {{ addToB }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 0,
      b: 0,
      age: 20
    }
  },
  computed: {
    addToA: function () {
      console.log('addToA')
      return this.a + this.age
    },
    addToB: function () {
      console.log('addToB')
      return this.b + this.age
    }
  }
}
</script>

computed는 이벤트가 발생하지 않아도 페이지 로딩 시 실행 된다.

 

---

 

v-if, v-show

---

if문과 show문을 사용하여 특정 조건일 때 해당 노드를 제어할 수 있다.

/src/views/TestCondition.vue

<template>
  <div>
    <h1>v-if, v-show Test</h1>
    <button @click="error = !error">Toogle error</button>
    <button @click="success = !success">Toggle success</button>
    <div>
      <h3>v-if</h3>
      <div>
        <p>현재 error 상태는?</p>
        <p v-if="error" class="errBox">에러입니다.</p>
        <p v-else>에러 상태가 아닙니다.</p>
      </div>
      <h3>v-show</h3>
      <div>
        <p>현재 success 상태는?</p>
        <p v-show="success" class="sucBox">성공입니다.</p>
        <p v-show="!success">성공 상태가 아닙니다.</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: false,
      success: false
    }
  }
}
</script>

<style scoped>
.errBox {
  background: red;
  color: white;
}
.sucBox {
  background: green;
  color: white;
}
</style>

v-if는 해당 노드 자체가 실제로 나타나거나 사라지는 반면
v-show는 해당 노드의 style속성에서 display:none값으로 제어 한다.
(브라우저의 개발자 모드에서 확인할 것)

---

 

v-for

---

for문을 이용해 반복 처리를 할 수 있다.

/src/views/TestLoop.vue

<template>
  <div>
    <h1>v-for Test</h1>
    <h2>원본 출력</h2>
    <div>
      <div>{{ fruits }}</div>
      <div>{{ users }}</div>
    </div>
    <h2>다듬어서 출력</h2>
    <div>
      <h3>과일 리스트</h3>
      <ul>
        <li v-for="(fruit, index) in fruits" :key="`fruit-${index}`">{{ fruit }}</li>
      </ul>
      <h3>사용자 리스트</h3>
      1) 그대로 출력
      <div v-for="(user, index) in users" :key="`user-${index}`">
        {{ user }}
      </div>
      2) 항목별 출력
      <div v-for="(user, index) in users" :key="index">
        <span>{{ user.name }}: {{ user.age }}, {{ user.gender }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['apple', 'orange', 'banana', 'mango'],
      users: [
        { name: '홍길동', age: 20, gender: 'male' },
        { name: '김길동', age: 23, gender: 'male' },
        { name: '고길순', age: 25, gender: 'female' }
      ]
    }
  }
}
</script>

참고 :key 속성은 필수 이며 전체 노드로 부터 유일해야 한다. (이것이 지켜지지 않는 경우 [Vue warn]: Duplicate keys detected에러가 나타난다.)
(:key는 v-bind:key(바인드 변수)를 의미 한다.)