Vue.js의 템플릿 문법 : 데이터 바인딩

1. data()

• Vue.js 데이터 속성 정의와 반환

data(){
	return{ 
	// 오브젝트 형태(키와 값)로 반환
	}:
}

or

data:()⇒{
}

<script>

export default {
  name: 'App',  // 컴포넌트의 이름

  // 여기서는 컴포넌트들을 등록
  components: {},

  // 컴포넌트의 데이터는 data() 메소드 안에 정의
  data() {
    return {  // 오브젝트 형태로 반환
      animal: 'Cat'  // 'animal'이라는 키에 'Cat'이라는 값을 저장
    };
  }
}
</script>

• 변수를 화면에 연결하기
• mustache 문법

{{ 변수명}}

<!--HTML 코드 작성-->
<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1> // mustache 문법
</template>

2. v-text

• HTML 요소의 텍스트 콘텐츠만을 설정

• 태그 안에 다른 HTML 요소나 텍스트를 삽입하면 오류가 발생

<template>
<img alt="Vue logo" src="./assets/logo.png">
<H1>Hello~ {{ animal }}</H1>
<H2>고양이는 {{ food }}을 좋아합니다</H2>
<h3 v-text="food"></h3>
</template>

• input 태그

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" />
</template>

3. v-model

• 직접 input 태그의 값을 바꿔도 적용됨

• 상태 관리가 되고 있음

• 복잡한 JS 코드 없이 손 쉽게 데이터를 업데이트 하고 공유하는 것끼리 연결 가능

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
</template>

• 직접 웹에서 내용을 바꿀 경우 상태 관리됨

4. v-html

• 태그 자체를 가져와서 보여주고 싶을 경우 사용

• 확실하게 믿을 수 있는 경우에만 사용하기
• 보안 문제
• HTML을 직접 삽입
• 사용자 입력을 HTML로 렌더링할 때 XSS(교차 사이트 스크립팅) 공격에 취약할 수 있음
• HTML 인젝션
• 외부 소스에서 HTML 콘텐츠를 삽입할 때는 반드시 신뢰할 수 있는지 확인 필수
• 불필요한 HTML 태그나 악성 스크립트가 포함되어 있을 수 있기 때문에 주의
• 성능 문제
• 대량의 HTML 콘텐츠를 v-html로 삽입하면 렌더링 성능에 영향을 줄 수 있음

• 그냥 사용하면 String으로 인식됨

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <div>{{ alertMessage }}</div> <!--String으로 인식됨-->
</template>

• 태그로 인식됨

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <div v-html="alertMessage"></div> <!--String으로 인식됨-->
</template>

5. v-bind

• 이미지를 동적으로 연결

• Pexels에서 제공하는 이미지 URL

 https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg

<!--HTML 코드 작성-->
<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <div v-html="alertMessage"></div>
    <img v-bind:src="imageSource" alt="random">
</template>

<!--Java Script 코드 작성-->
<script>

export default {
  name: 'App',  // 컴포넌트의 이름

  // 여기서는 컴포넌트들을 등록
  components: {},

  // 컴포넌트의 데이터는 data() 메소드 안에 정의
  data() {
    return {  // 오브젝트 형태로 반환
      animal: 'Cat',  // 'animal'이라는 키에 'Cat'이라는 값을 저장
      food: 'fish',
      alertMessage: '<h2>경고!!!</h2>',
      imageSource: 'https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg' // Pexels에서 제공하는 이미지 URL
    };
  }
}
</script>

• v-bind 생략가능

:href=""

<!--HTML 코드 작성-->
<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <div v-html="alertMessage"></div>
    <a :href="naverUrl">naver</a>
    <img v-bind:src="imageSource" alt>
</template>


<!--Java Script 코드 작성-->
<script>

export default {
  name: 'App',  // 컴포넌트의 이름

  // 여기서는 컴포넌트들을 등록
  components: {},

  // 컴포넌트의 데이터는 data() 메소드 안에 정의
  data() {
    return {  // 오브젝트 형태로 반환
      animal: 'Cat',  // 'animal'이라는 키에 'Cat'이라는 값을 저장
      food: 'fish',
      alertMessage: '<h2>경고!!!</h2>',
      imageSource: 'https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg', // Pexels에서 제공하는 이미지 URL
      naverUrl: 'https://www.naver.com'
    };
  }
}
</script>



<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <div v-html="alertMessage"></div>
    <a :href="naverUrl">{{food}}</a>
    <img v-bind:src="imageSource" alt="random">
</template>



• 상태 관리가 됨

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <a :href="food">{{food}}</a>
</template>

6. class

• 동적으로 class를 부여하는 방법

• CSS class 준비

<!--CSS 코드 작성-->
<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;
}
input{
  font-size: 20px;
}

.orange {
  color: orange;
}

.salmon {
  color: salmon;
}

.blue{
  color: blue;
}

.not-good {
  text-decoration: line-through;
}
</style>

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <a :href="naverUrl">{{food}}</a>
    <hr /> <!--종료 태그가 없는 태그 작성하는 방법-->
    <h2 class="red">고양이는 {{ food }}를 좋아합니다</h2>
</template>

• 색깔을 동적으로 부여하기

• 배열 문법을 사용하여 클래스 바인딩

<h2 :class="[food === 'fish' ? 'blue' : '', 'common-class']">

• 오브젝트를 사용하여 클래스 바인딩

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <a :href="naverUrl">{{food}}</a>
    <hr /> <!--종료 태그가 없는 태그 작성하는 방법-->
    <h2 v-bind:class="{blue: food == 'fish' }">고양이는 {{ food }}를 좋아합니다</h2>
</template>

• class 명에 -이 들어간 것은 ‘’처리 해주면 인식됨

<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~ {{ animal }}</H1>
    <H2>고양이는 {{ food }}을 좋아합니다</H2>
    <input type="text" v-model="food"/>
    <a :href="naverUrl">{{food}}</a>
    <hr /> <!--종료 태그가 없는 태그 작성하는 방법-->
    <h2 v-bind:class="{blue: food == 'fish', 'not-good': food =='cookie' }">고양이는 {{ food }}를 좋아합니다</h2>
</template>