Binding(vue.js)

  [데이터를 html에 바인딩]

  <script></script>안에 있는 데이터는 템플릿 블록에 있는 html과 연결한다.
  스크립트를 통해서 데이터 유지관리를 해야한다.
  정적인 속성과 달리 이름 속성값이 변경될 때마다 템플릿의 값도 업데이트 되는 장점을 갖고 있다.

<template>
  <div>{{ name }}</div>
  <p v-text="channel"></p>
  <p v-html="boldFont"></p>
  <p v-bind:id="headingId">Heading</p>
  <button v-bind:disabled="isDisabled">버튼</button>
  <p class="success" v-bind:class="status">Status</p>
</template>

<script>
export default {
  data() {
    console.log(this.isPromoted);
    return {
      name: "vishwas", //사용할 수 있는 객체를 나타낸다.
      channel: "codevolution",
      boldFont: "<b>codevolution</b>",
      headingId: "heading",
      isDisabled: true,
    };
  },
};
</script>

  [v-text, {{}} ]
  텍스트를 바인딩 하는 방법은 2가지가 있다.
  1. 머스테치 {{}}
  2. v-text
  하지만 mustache 구문을 사용하는 것을 추천한다.

  [v-html]
  innerText가 아닌 innerHTML 속성에 연결된다.
  html을 파싱하여 화면에 출력되는데 보안에 취약하다.
  v-html 사용은 권장되지 않는다.

  [v-bind] 

  <template>
    <p v-bind:id="headingId">Heading</p>
    <button v-bind:disabled="isDisabled">버튼</button>
  </template>

  <script>
    headingId: "heading",
      isDisabled: true,
  </script>

 

 

[v-bind:class]

<template>
  <p class="success" v-bind:class="status">Status</p>
  <div v-bind:class="isPromoted && 'promoted'">isPromoted</div>
  <div v-bind:class="isSoldOut ? 'new' : 'sold-out'">soldout</div>
  <div v-bind:class="['new', 'promoted']">newly promoted movie</div>
  <div
    v-bind:class="[isPromoted && 'promoted', isSoldOut ? 'solid-out' : 'new']"
  >
    배열 조건부
  </div>
  <div
    v-bind:class="{
      promoted: isPromoted,
      new: !isSoldOut,
      'sold-out': isSoldOut,
    }"
  >
    객체 조건부
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: "goodJob",
      isPromoted: true,
      isSoldOut: true,
    };
  },
};
</script>

<style scoped>
.promoted {
  font-style: italic;
}
.new {
  color: olive;
}
.sold-out {
  color: red;
}
</style>​

- isPromoted가 true라면 promoted 반환 아니라면 isPromoted반환 

- 배열로 반환, 객체형태로 반환 시킬수도 있다. 조건부 렌더링 가능해진다.

 

 

[v-bind:style]

inline-style도 바인딩이 가능하다.

<template>
  <h2
    v-bind:style="{
      color: heighLightColor,
      'font-size': headerSize + 'px', //동적 스타일변화
      padding: '20px', //직접 주는 경우
    }"
  >
    Inline style
  </h2>
  <h2 v-bind:style="headerStyleObject">object style</h2>
</template>

<script>
export default {
  data() {
    return {
      heighLightColor: "orange",
      headerSize: "50",
      headerStyleObject: {
        color: "purple",
        padding: "10px",
        fontSize: "20px",
      },
    };
  },
};
</script>

동적으로 사용시에 인라인에 데이터를 vinding해준다.

여러개의 인라인 스타일이 있는 경우는 object로 v-bind해준다. 

<template>
  <div v-bind:style="[baseStyleObject, successStyleObject]">success style</div>
  <div v-bind:style="[baseStyleObject, dangerStyle]">success style</div>
</template>

<script>
export default {
  data() {
    return {
      baseStyleObject: {
        fontSize: "50px",
        padding: "10px",
      },
      successStyleObject: {
        padding: "20px",
        color: "green",
        backgroundColor: "lightgreen",
        border: "1px solid green",
      },
      dangerStyle: {
        padding: "20px",
        color: "white",
        backgroundColor: "red",
      },
    };
  },
};
</script>

배열은 이전 스타일의 개채를 재정의한다. 이 전 스타일 객체를 재사용 할 수 있다. 

 

 

 

[v-bind:shothand]

 

v-bind를 생략하고 : 문구로만 바인딩을 할 수 있다.

<template>
  <p :id="headingId">Heading</p>
  <p class="success" :class="status">Status</p>
  <div :class="isPromoted && 'promoted'">isPromoted</div>
  <div :class="isSoldOut ? 'new' : 'sold-out'">soldout</div>
  <div :class="['new', 'promoted']">newly promoted movie</div>
  <div :class="[isPromoted && 'promoted', isSoldOut ? 'solid-out' : 'new']">
    배열 조건부
  </div>
</template>