Vue.js 를 이해하기위한 쉬운 예제들

---

< button 텍스트 정의하기 >

<!-- App.vue -->

<template>
  
  <button v-text="buttonText"></button>

</template>

<script>

  export default {

    setup() {

      const buttonText = 'Click Me!~';

      return { buttonText }; // 이제 template 에서 buttonText 변수를 사용할수있음!

    },

  }

</script>

 

---

< button 색깔 정의하기  >

<!-- App.vue -->

<template>
  
  <button v-bind:style="myStyle">Button</button>

</template>

<script>

  export default {

    setup() {

      const myStyle = { backgroundColor : 'blue' }; // Camel Case 로 적으면 background-color 로 자동변환됨!

      return { myStyle }; // 이제 template 에서 myStyle 변수를 사용할수있음!

    },

  }

</script>

style 테그를 사용하는대신, template 속에 inline-style 를 script 안에서 정의할수있다.

---

< button 을 클릭했을때 호출될 함수 정의하기 >

<!-- App.vue -->

<template>
  
  <button @click="mouseClick">Button</button>

</template>

<script>

  export default {

    setup() {

      function mouseClick() {

        console.log('Mouse is clicked!');

      }

      return { mouseClick }; // 이제 mouseClick 함수를 template 에서 사용할수있음!

    },

  }

</script>

---