[Vue] 기초 속성 및 바인딩 개념 정리

기초 속성

el (elemnt)
- Vue instance와 DOM을 연결하는 옵션
- View와 Model을 연결
- Vue instance와 연결되지 않은 DOM 외부는 Vue의 영향을 받지 않음

<div id ="app">
  {{ message }} // 정의 되지 않았다는 경고 출력
</div>
<div>
  {{ message }} // {{ message }} 그대로 출력
</div>
<script>
  const app = new Vue({
    el: '#app' // DOM 연결
    })
</script>​

data
- Vue instance의 데이터 객체 혹은 인스턴스 속성
- 기본 객체여야하며, 객체 내부 아이템들은 모든 타입의 객체를 가질 수 있음

<div id ="app">
  {{ message }} // Vue 출력
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      message : "Vue"
    },
  })
</script>​

methods
- Vue instance의 method를 정의하는 곳
- method를 호출하여 data 변경이 가능함

<script>
  const app = new Vue({
    el: '#app',
    data : {
      message : "Vue"
    },
    methods : {
      start : function() {
        console.log(this.message)
      },
    }
  })
</script>​

----- // 콘솔창에 명령어 사용
app.start() // Vue

- 정의 시에 Arrow 함수 사용할 경우 this 사용이 불가능 (Arrow 사용하지 않는 것 권장)

단방향 데이터 바인딩

바인딩 
- UI를 통해 표시하고자 하는 데이터와 연결해 주는 프로세스를 의미
- v-bind 예약어를 통해 데이터를 바인딩 (콜론(:)으로 축약 가능)

단방향 데이터 바인당
- 데이터 변화에 다른 성능 저하 없이 DOM 객체 갱신 가능
- 데이터 흐름이 단방향이므로 코드를 이해하기 쉽고 데이터 추적과 디버깅 용이
- 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 함

// v-text → 가장 기본적인 바인딩 방법
<div id="app">
  <p> v-text="meesage"></p>
</div>
...
<script>
  const app = new Vue({
    el: '#app',
    data : {
      message : "Vue"
    },
  })
</script>​

// v-html → RAW HTML을 표현할 수 있으나, XSS 공격에 취약하므로 
// 사용자가 입력, 제공하는 컨텐츠에 사용 금지
<div id="app">
  <p> v-html="meesage"></p>
</div>
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      html : "<a hrf=https://edder773.tistory.com/">blog</a>
    },
  })
</script>​

// v-show → 표현식에 작성된 값에 따라 요소를 보여 줄 것인지 결정

<div id="app">
  <p> v-show="Activated">활성화</p>
</div>
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      Activated : true // false면 보이지 않고 true면 보여짐 (단, DOM에는 존재)
    },
  })
</script>​

// v-if → 표현식에 작성된 값에 따라 요소를 보여 줄 것인지 결정 (show와 비슷)

<div id="app">
  <p> v-if="Activated">활성화</p>
</div>
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      Activated : true // false면 보이지 않고 true면 보여짐 (false면 DOM에도 존재하지 않음)
    },
  })
</script>​​

- v-show의 경우 표현식 결과와 관계없이 렌더링 되므로 초기 렌더링에 필요한 비용은 v-if보다 높으나, 표현식 값이 자주 변경되는 경우 유리함
- v-if의 경우 표현식 true일 경우에만 렌더링 되므로 초기 렌더링에 필요한 비용은 v-show보다 낮으나, 표현식 값이 자주 변경되는 경우 잦은 렌더링으로 비용이 증가할 수 있음

// v-for 반복 데이터 타입에 사용
<div id="app">
  <div v-for = "(char, index) in items>
    <p> {{ index}} 번째 문자 {{ char }}
</div>

...
<script>
  const app = new Vue({
    el: '#app',
    data : {
      items : "Vue"
    },
  })
</script>​

// 배열에 사용시 각 요소가 객체라면 점표기법으로 접근 가능
<div id="app">
  <div v-for = "(char, index) in items>
    <p> {{ index}} 번째 내용물 {{char.name}} </p>
  
</div>
...
<script>
  const app = new Vue({
    el: '#app',
    data : {
      items: [
      { id : 1, name : "Vue"},
      ...
    },
  })
</script>​

// v-for 사용 시 반드시 key 속성을 각 요소에 작성(각 요소가 고유한 값을 가진다면 생략 가능)
<div id="app">
  <div v-for = "(char, index) in items :key="`arr-${index}`">
    <p> {{ index}} 번째 내용물 {{char.name}} </p>
  
</div>

양방향 데이터 바인딩

양방향 데이터 바인딩
- Controller와 View 양쪽 데이터 일치가 모두 가능한 것
- 데이터 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것

// v-on 이벤트 발생시 할당된 표현식 실행
<div id="app">
  <button v-on:click="number++"> + </button>
  <p> {{ number }}
</div>

...
<script>
  const app = new Vue({
    el: '#app',
    data : {
      number : 0,
    },
  })
</script>​
//method를 통한 data 조작이 가능하고 @를 통해 shorcut 사용 가능


//v-bind
<div id="app">
  <p> v-bind:html="url">blog</p>
</div>
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      url : "<a hrf=https://edder773.tistory.com/">blog</a>
    },
  })
</script>​
// Vue의 데이터 변화에 반응하여 DOM에 반영하므로 상황에 따라 유동적으로 할당 가능하고 :을 통해 shorcut 사용 가능

//v-model // 양방향으로 연결하여 v-model로 연결된 사용자 입력에도 반응
<div id="app">
  <p> {{ message }} </p>
  <input v-model = "message" type = "text">
</div>
...

<script>
  const app = new Vue({
    el: '#app',
    data : {
      message: '',
    },
  })
</script>​