Vueを知るには-データバインド構文

3933 ワード
テキストリンク
データバインド構文
バニラJavaScriptを使用して変数またはデータをHTMLに適用する方法は次のとおりです.
document.getElementById(어쩌구).innerHTML = 데이터;
しかし、Vueはそうする必要はなく、{{데이터}}の形式でデータを保存する.
HTMLの間でデータを簡単に適用できます.
  • データ属性
    構成部品のdataオプションは関数です.
    この関数は1つのオブジェクトのみを返し、Vueは反応型システムでオブジェクトを囲み、素子例$dataに格納する.
    • //데이터 보관 방식
<script>
  export default {
    name : 'App',
    data(){
      return {
        price1 : 60
      }
    }
  }
</script>
    HTML属性はデータをバインドすることもできます:속성="데이터이름"
  • データアプリケーション
    • <template>
  <div>
    <h4 :style="스타일">XX 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60,
      스타일 : 'color:red'
    }
  }
    データバインド構文を使用する理由
  • htmlハードコーディングでは変更が困難です.
  • リアルタイム変更のweb-appを作成し、可変データを使用するのに適しています.
  • Vueのリアルタイム自動レンダリングに使用します.
    (データ変更はhtmlにリアルタイムで反映される)
    • CSSで縞模様の背景をつくる方法
    【Android】TextViewフォント間隔の変更方法