2023/06/09__Vue.js

뷰(Vue.js)란?

• 2013년 구글의 개발장였던 에반 유(Evan You)에 의해 출시
• 인터렉티브 웹 인터페이스를 개발하기 위한 '프로그레시브 자바스크립트 프레임워크'
• 웹에서 UI 뷰, 비즈니스 로직, 데이터의 관리를 돕는 최고 성능의 컴팩트한 자바스크립트 라이브러리.

 

리액트는 그룹단위 / 뷰는 개인단위 가 이상적

 

Vue.js가 주목 받는 4가지 이유

1. 디자이너와 개발자를 위해 쉽게 설계되었다.
2. MVC(model view controller) 모델을 지원한다.
3. HTML5와 자바스크립트만 알면 되므로 쉽게 시작할 수 있다.
4. 설치하기 쉽고 용량이 작아서 속도가 빠르다.

 

Vue 프레임워크의 특징

• Vuie.js 출발은 가장 늦었지만 다른 프레임워크들의 단점을 보완해 성능이 우수
• 사용성이 매우 뛰어난데 이런 강점을 중심으로 지속적으로 발전

기쁘게 참여하는 커뮤니티 문화

• 신선한 아이디어로 개발을 즐겁고 자유롭게 할 수 있는 커뮤니티 중심

bestofjs.org

• 다양한 관점으로 기술 추이를 분석하여 순위
• 최근 통계를 보면 인기도면에서 뷰가 1등을 차지했었음

 -- Vue.js , Hello World!

뷰의 기본 사용법과 특징

• cdn으로 설정하는 방법
• 머스태시라고 불리는  {{}} 활용법
• data 속성의 바인딩 관계를 이해

data 속성

data 속성은 뷰 안에서 사용할 데이터를 변수명으로 선언하여 관리하는 곳

객체나 함수를 선언하여 데이터를 일고 저장하는 일 수행

    <div id="app">
      <!-- sTitle 값을 받아서 HTML의 엘리먼트 값으로 변환하여 표시함 -->
      <p>{{sTitle}}</p>
      <!-- {{}} 사용 -->
    </div>
js
  new Vue({
        el: "#app",
		data:{
		//{{sTitle}}로 데이터 값을 전달함
			sTitle:'Hello ,World!' // 문자도 올수도 있고 함수도 올수 있다.
			},
         method:{
         //간단한 데이터는 method로 보낼 수 있다.
         }
         
		})

단방향 바인딩과 v-bind디렉티브

데이터 바인딩

• HTML의 어트리뷰트(attribute)값을 수정할 때 v-bind라는 디렉티브를 이용해서 데이터 값을 브라우저 화면에 자동으로 반영하는 것을 의미
• 변수값을 HTML어트리뷰트에 연결함으로써 변수가 새로운 값으로 바뀔 때마다 HTML엘리먼트에 실시간으로 렌더링
• 양방향으로는 v-model

v-bind 디렉티브

• 콜론(:)을 중심으로 왼쪽에는 v-bind를 기입하고, 오른쪽에는 HTML엘리먼트의 어트리뷰트를 선언해서 바인딩으로 만들어진 값을 대입하는 식
• 콜론(:)만 사용하면 v-bind라는 명칭은 생략

양방향 바인딩과 v-model 디렉티브

양방향 데이터 바인딩

• 입력과 동시에 데이터가 동기화되어 표시되는 기능을 수행

v-model 디렉티브

• HTML어트리뷰트에 양방향 데이터 바인딩을 수행
• 콜론(:)을 중심으로 왼쪽에는 v-model을 기입하고 오른쪽에는 HTML 엘리먼트의 어트리뷰트 이름을 작성

v-bind디렉티브

• sDate값을 HTML어트리뷰트에 보내기만 함

<input v-bind:value="sDate"/>

v-model디렉티브

• sMsg값과 입력값이 서로 연동됨

<input v-model:value="sMsg"/>

v-if 디렉티브

• 조건이 충족될 때만 렌더링을 수행하도록 돕는 어트리뷰트

<!-- v-if,else로 직접 bFlag 데이터에 접근하여 조건 판단 -->
      <p v-if="bFlag ==true">앞면!</p>
      <p v-else>뒷면</p>

v-for

• HTML 안에서 반복문으로 배열값을 읽어서 목록의 항목과 인덱스 변수에 저장하도록 돕는 어트리뷰트

  <h1>좋아하는 과일 리스트</h1>
      <!-- v-for반복문으로 fruits과일 배열 데이터를 가져옴 -->
      <ol>
        <li v-for="item in fruits">
          <!-- fruits 안의 fruitsName항목을 하나씩 가져와 html로 렌더링 -->
          {{item.fruitName}}
        </li>
      </ol>

v-on 디렉티브

• 뷰에서 발생하는 이벤트를 지켜보면서 DOM엘리먼트를 제어할 수 있도록 도와주는 어트리뷰트
• 뷰 안에서 사용자가 키보드나 마우스를 제어하는 형식의 이벤트가 발생했을 때 이를 실행하는 함수와 바인딩 할 때 사용

-- 이벤트 핸들러

• 이벤트가 발생했을 때 실행되는 함수

-- 메소드(Methods)

• 이벤트 핸들러 함수를 제작해야 할 때 미리 정의해 두고 사용
• 뷰 객체의 행위를 정의하는 용도, 즉 로직을 실행하는 함수가 필요할 때 이곳에 정의해 두고 사용

methods :{
		//버튼을 눌렀을 때 sTitle의 제목 변경
	fnChangeTitle(){
		//this:Vue 객체의 인스턴스
	this.sTitle = 'hello!'
}

///////////////////
<input type="text" :value="inputValue" />
      <h3>{{inputValue}}</h3>
      <button type="button" v-on:click="plusClick">Click</button>
      
      new Vue({
        el: "#app2",
        data: {
          inputValue: 0,
        },
        methods: {
          plusClick() {
            this.inputValue = this.inputValue + 1;
          },
        },
      });