공부블로그

Vue기초 - 1. 시작하기 & 사용법 본문

Vue.js

Vue기초 - 1. 시작하기 & 사용법

떠어영 2023. 1. 29. 18:54
  • 시작하기 

기존 사이트에서 Vue를 사용하려면 <script> 요소 중 하나를 페이지에 추가하면 된다. 이 한 줄을 추가하는 것만으로 기존의 사이트에서 Vue를 사용할 수 있고 이 방식을 CDN이라고 한다.

( CDN : 서버의 분산 네트워크. 최종 사용자와 가까운 위치의 에지 서버에 캐시된  콘텐츠를 저장하여 대기 시간을 최소화 )

 

Vue가 자칭 '프로그레시브 프레임워크'임을 강조하는 이유가 바로 이것입니다. JQuery 등의 라이브러리를 사용하는 기존 프로젝트를 Vue로 마이그레이션하려고 할 때 아주 좋은 옵션입니다. 이 방식으로 속성, 커스텀 컴포넌트, 데이터 관리 등 수많은 Vue의 핵심 기능을 사용할 수 있게 됩니다.

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started

 

Vue 시작하기 - Web 개발 학습하기 | MDN

이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 프로

developer.mozilla.org

 

  • 사용법

기본 예제 )  

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sample</title>
  </head>
  <body>
    <div id="app">  <!-- Vue가 마운트 할 요소 -->
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> // CDN
    <script>
    <!-- Vue 인스턴스 -->
      new Vue({ 
	<!-- 인스턴스의 속성을 각각 작성 -->
        el: "#app",
        data: {  
        <!-- 키 : 값 -->
          message: "Hello Vue.js!"
        }
      });
    </script>
  </body>
</html>

 

  • 인스턴스의 속성
    • el : Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용 ( ex. id: #, class: .접두어 사용 )
    • data : Vue인스턴스가 관리하는 데이터, reactivity 반영 ( data 변경 시 화면 자동 반영 )
    • template : 화면에 표시할 요소 ( html, css 등 )
    • props : 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([])
    • methods : 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언
    • computed : 데이터 표현을 더 직관적이고 간결하게 도와주는 속성 ( 종속 대상에 따라 캐싱, Validation처리, 간단한 연산 등에 적합 )
    • watch : data에 정의한 속성의 변경을 계속 지켜보다가 변경될 경우 정의된 동작/액션 실행 ( http 데이터 요청 등 무거운 로직에 적합 )
    • 기타 LifeCycle Hook: Vue 라이프 사이클과 관련된 속성

 

1. 보간법 interpolation - {{ }}  //위의 기본예제처럼 중괄호 두개를 통해 데이터를 연결


2. v-접두사로 시작하는 것들은 모두 vue명령어이다. ( vue directive )

 

    형식 : v-접두사 = “키” // data의 해당 키에 세팅된 값이 연결
    vue와 html이 연동되는 순간에 v-라는 텍스트를 전부 모은 후 html이 아닌 Vue에게만 연관되게 만든다.

  • v - text : 해당 키에 세팅된 텍스트를 연결 
{{ message }} == v-text=“message” <!--두 방식 모두 message에 세팅된 값을 연결한다-->
  • v - if 
<div id="app">
	<p v-if=“bool1”>bool1 값이 참이면 보입니다</p> <!--bool1키에 세팅된 값: true-->
</div>

<script>
	const app = new Vue({
    	el : '#app',
        data: { bool1 : true } 
        })
</script>
  • v - else, v - else - if
<div id="app">
	<!--username키에 세팅된 값: 'master'-->
	<p v-if="username === 'master'">Hello Master</p> 
    <p v-else> Hello User </p>
</div>
<script>
     const app = new Vue({
     	el: '#app',
        data: {
        	username: 'master'
            }
        })
</script>
  • v - for
<div id='app'>
	<ul> <!--teachers키에 세팅된 값: 배열-->
    	<li v-for=‘teacher in teachers'>{{ teacher.name }}</li>
    </ul>
</div>
<script>
	const app = new Vue({
    	el: '#app',
        data: {
        	teachers: [ #배열안에 요소는 객체
            	{name: 'neo'},
                {name: 'tak'}
            ]
        }
    })
</script>
  • v - bind : 표준 html 속성과 vue 인스턴스를 연동할 때 사용, 줄여서 :으로 쓸 수 있다.
<div id='app'>
	<!--googleUrl 키에 세팅된 값: 'https://google.com'-->
	<a v-bind:href="googleUrl">구글</a>
</div>
<script>
	const app = new Vue({
            el: '#app',
            data: {
                googleUrl: 'https://google.com',
            }
        })
</script>

 + 동적 바인딩 

data: {message : ‘오늘의 날짜는’ + new Date( )} <!-- javascript 제공함수-->

 

참고 블로그 : https://han-py.tistory.com/66