[2021-09-05] 12~27강

1. direction :  v-for

- 사용방법 : <li v-for "book in books"> 수행내용  </li>

   app.js 에서 정의된 books 배열의 모든 원소(book)들에 대하여 수행내용을 실행

  ※ 이때, book 자리의 명칭은 아무거나 원하는거 해도 상관없음 (ex. v-for "apple in books)

 

- app.js 코드

const app = Vue.createApp({
    data() {
        return {
            showBooks: true,
            books : [
                {title: 'name of the wind', author: 'patrick rothfuss'},
                {title: 'the way of kings', author: 'brandon sanderson'},
                {title: 'the final empire', author: 'brandon sanderson'}
            ]
        }
    },

 

---

2. directive :  v-bind  -  attribute binding

- app.js에서 정의된 속성 중 하나인 애들(url)을 마음껏 index.html 태그안에서도 사용가능하도록 안면 트는 directive

 

- 간단 표현법   :  = v-bind:

 

- 사용방법:  <a v-bind:href="url">Text</a>

                <a :href="url">Text</a>

 

                <li v-for="book in books">

                    <img :src="book.img" :alt="book.title">

 

- app.js 코드

const app = Vue.createApp({
    data() {
        return {
            url: 'http://www.thenetninja.co.uk',
            showBooks: true,

 

---

3. Computed Properties

- Vue 객체의 속성으로 정의된 배열을 가공하여 내가 원하는 조건을 가진 배열을 만들어낼 수 있는 속성

- app.js 코드 ( isFav=true 인 원소들만 뽑아내서 만든 배열을 리턴하는 함수 filteredBooks

 const app = Vue.createApp({
  methods: {
        toggleShowBooks() {
            this.showBooks = !this.showBooks
        },
        toggleFav(book) {
            book.isFav = !book.isFav
        }
  },
  computed: {
        filteredBooks() {
            return this.books.filter((book) => book.isFav)
        }
    }
 })

- index.html 코드

<li v-for="book in filteredBooks">
     ...

 

---

4. Template refs

- 태그에 붙여서 해당 태그의 주소값(reference)를 나타내는 것

- 사용방법: 

<template>

  <h1>{{ title }}</h1>

  <input type="text" ref="name">

  <button @click="handleClick">Click me</button>

</template>

 

<script>

export default {

  name: 'App',

  data() {

    return {

      title: 'My First Vue App :)'

    }

  },

  methods: {

    handleClick() {

      console.log(this.$refs.name)

      this.$ref.name.focus()

    }

  }

}

</script>

 

---

5. component별로 따로 파일 만들어서 정리해두고, 메인 페이지인 App.vue에서 갖다 쓰기

[ 1st ] : src/components에 원하는 component 뷰 파일 만들기 (Modal.vue)

[ 2nd ] : Modal.vue에 원하는대로 <template>, <script>, <style> 작성하기

[ 3rd ] : App.vue에 돌아와서 Modal.vue 가져다 쓰기

          ① App.vue의 <script>안에 import Modal from './components/Modal.vue' 추가하기

          ② App.vue의 <script>안의 export default { }안에 components: { Modal }, 추가하기

          ③ App.vue의 <template>안에 <Modal /> 작성하면, Modal.vue의 <template> 내용들이 모두 불러와진다.

※ 이때, 원래 App.vue의 style보다 Modal.vue의 style이 우위를 가지기 때문에 Modal.vue의 style을
    Modal component에만 한정해야 한다.
    ▶ sol [1]: Modal.vue의 <style>을 <style scoped>로 변경하기
    ▶ sol [2]: Modal.vue의 <style>  .h1 { CSS }를  .스타일 대상의 class명 h1 { CSS }으로 변경하기

※ 만약, 모든 component에서 global하게 사용하고 싶은 style이 있다면,
1st. src/assets에 global.css 파일 만들어서 거기에 스타일 저장
2nd. main.js 파일에 import './assets/global.css'

 

---

6. parent component에서 → child component 조작하기 : props

- 방법 : (parrent : App.vue // child : Modal.vue) 

1st) Parent인 App.vue <template>의 <Modal />을 <Modal (:)header(변수로 쓸 아무이름)="원하는 내용(값)" />으로 변경

      - 원하는 개수만큼 자유롭게 지정 가능

2nd) Child인 Modal.vue <script>에서 export default { props: ['header'] } 추가 

3rd) Child인 Modal.vue <template>에서 원하는 자리에 변수처럼 header 사용하면 그 값이 사용됨

      ex.  <h1>{{ header }}</h1>

 

---

7. child component에서 정의된 것을 → parent component에서 사용 :  custom events 

- 이를 위해서는 child component의 것을 parent component로 emit(배출=소개) 해줘야 함

- 방법:

1st) Modal.vue의 <script> methods에 closeModal() {  this.$emit('close')  } 정의

 

 

---

8. Click event Modifier

- click 이벤트를 조금 더 구체화하는 도구 : modifier

- 방법: <button  @click.   ="toggleModal">   </button>

           에 right(마우스 오른쪽 클릭  시), shift(shift키 누르고 클릭 시) 등의 세부 조건 추가 가능!