Vue.js 기본 문법

Template Syntax

• 보간법 : 
  머스태쉬 구문(중괄호 2개를 겹쳐 씀)안에 데이터를 텍스트 형태로 렌더링함

<span>{{ message }}</span>	//message 안에 데이터를 동적으로 할당

 

 

 

• 바인딩 :
  v-bind 디렉티브를 사용해 HTML 태그에 적는 속성들을 동적으로 바인딩할 수 있다.

<div v-bind:id="dynamicId"></div>	// dynamicId로 선언해 둔 값이 id 값으로 저장됨

 

 

 

 

Dynamic Data Binding

데이터를 동적으로 바꿔가며 HTML 속성을 조작하거나 활용할 수 있다.

 

• 단방향 바인딩 : 동적인 데이터를 화면 상에 반영되도록 하는 바인딩.
  
  
  
• 양방향 바인딩 : 동적인 데이터를 화면 상에 반영되도록 하고, 화면 상에 입력된 값이 데이터를 바꿀 수도 있음.
  
  

<input v-model="message" />

 

 

 

 

 

 

 

Event Handling

v-on 디렉티브를 사용하여 DOM 이벤트를 듣고, 그에 대한 반응으로 메소드를 실행하는 기능

 

// 이벤트 리스너 추가
<button v-on:click="handleClick">Click me</button>


//////////////////////////////////////////////////
// 자바스크립트 파트에서 메소드 정의
methods: {
  handleClick() {
    alert('Button clicked!');
  }
}

 

 

 

 

Event Handling

 

폼 입력 바인딩은 v-model을 사용하여 입력 폼 요소와 애플리케이션 데이터 사이의 양방향 바인딩을 생성

 

// 텍스트 입력
<input v-model="username" placeholder="Enter your name">

// 체크박스
<input type="checkbox" v-model="checked">


// 라디오 버튼
<input type="radio" v-model="picked" value="One">
<input type="radio" v-model="picked" value="Two">


// 셀렉트 박스
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
</select>



<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.prod.min.js"></script>
    <script>
      // Vue 애플리케이션을 생성하고 관리합니다.
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
        	const username = ref('');	// 텍스트 입력 값이 여기에 들어감
            const checked = ref(false);	// 체크박스 true/false 값이 여기에 들어감
			const picked = ref('');		// 라디오버튼 선택 값이 여기에 들어감
            const selected = ref('');	// 셀렉트박스 선택 값이 여기에 들어감

          // setup 함수에서 반환하는 객체는 템플릿에서 사용됩니다.
          return { username, checked, picked, selected };
        },
      });

      // Vue 인스턴스를 #app 요소에 마운트합니다.
      app.mount('#app');
    </script>
</body>
</html>