윤주

윤주

꾸준히 기록하자

vue 1

Vue

  • 자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크


장점

  • 가장 적은 러닝커브 (문법 이해가 쉽다)
  • 매우 적은 크기
  • 공식 사이트의 상세한 설명
  • 가장 최근에 릴리즈 시작한 프레임워크
  • React와 Angular의 장점 적용


MVVM (Model-View-ViewModel)패턴

  • ViewModel
    • View를 표현하기 위해 만들어진 View를 위한 모델
  1. View 입력 – (Commane 패턴을 통한 명령) -> ViewModel
  2. ViewModel – (필요한 데이터 요청) -> Model
  3. Model – (요청한 데이터 전달) -> ViewModel
  4. ViewModel : 응답받은 데이터를 가공하여 저장
  5. ViewModel과의 DataBinding을 통해 -> View 자동 갱신

참고


vue

vue.js 인스턴스

Vue 앱은 Vue 함수로 인스턴스를 만드는 것부터 시작

const vm = new Vue({
  // 옵션
});


Vue.js el 옵션

  • el
    • ‘css 선택자’ or HTML Element
    • Vue가 적용될 요소 지정
new Vue({
  el:"#app"
});

<div id="app"></div>
  • html 엘리먼트를 주는 경우는 거의 없다 (아래)
const app = document.querySelector("#app");
new Vue({
  el:"app"
});

<div id="app"></div>


data 옵션

  • data
    • 객체 or 함수
    • Vue에서 사용되는 정보를 저장
  • 객체
new Vue({
  el: '#app';
  data: {
  msg: 'Hello'
  }
});

<div id="app">
  <h2>{{msg}}</h2>
</div>
  • 함수
new Vue({
  el: '#app',
  data() {
    return {
      msg: 'Hello'
    }
  }
});

<div id="app">
  <h2>{{ msg }}</h2>
</div>


텍스트

  • {{ 속성명 }}
    • 데이터 바인딩의 기본 형태
    • <span>메시지 : {{msg}} </span>
  • v-once
    • 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행
    • <span v-once>메시지 : {{msg}} </span>


Raw HTML

  • {{ 속성명 }}, v-text
    • 데이터 속성의 html을 escape 처리
    • <div> {{ msg }} </div>
    • <div v-text="msg">hello</div>
    • 주어진 msg의 값이 <h1>HELLO</h1>일 경우 <h1>HELLO</h1>이 그대로 출력됨
  • v-html
    • 데이터 속성의 html을 파싱하여 처리
    • <div v-html="msg">hello</div>
    • 주어진 msg의 값이 <h1>HELLO</h1>일 경우 <h1> 태그가 적용된 HELLO출력


JavaScript Expressions

  • 데이터 바인딩 내에서 JavaScript 표현식의 사용이 가능

  • 주의할 점

    • 하나의 단일 표현식만 포함될 수 있음
  • {{ number + 1}}
{{ ok ? 'yes' : 'no' }}
{{ message.split('-').reverse().join('') }}
{{ if(ok) {return message} }} // 불가능


Directives

v-text

v-html

v-once

v-model

  • 양방향 바인딩 처리를 위해 사용 (폼의 input, textarea 등)

  • new Vue({
  el: "#app",
  data: {
    msg = 'hello'
  }
});

  • <input type="text" v-model="msg">

v-bind

  • 엘리먼트 속성 바인딩 처리를 위해서 사용

  • v-bind는 약어로 : 로 사용 가능

  • new Vue({
  el: "#app",
  data: {
    idVal: 'test',
    key: 'id'
  }
});

  • <div v-bind:id="idVal">test</div>
<!-- <div id="test">test</div> 와 같다 -->
<div v-bind:[key]="idVal">test</div>
<!-- <div id="idVal">test</div> 와 같다 -->
  
<!-- 약어 사용 -->
<div :id="idVal">test</div>
<div :[key]="idVal">test</div>

v-show

  • 조건에 따라 엘리먼트를 화면에 표시
  • style 속성의 display를 변경
  • <button v-show="isExist">검색</button>

v-if, v-else-if, v-else

  • 조건에 맞는 경우 화면에 요소들을 렌더링

  • <span v-if="age < 10">무료</span>
<span v-else-if="age < 20">7000원</span>
<span v-else-if="age < 65">10000원</span>
<span v-else>3000원</span>

v-for

  • 배열이나 객체의 반복에 사용

  • v-for="요소변수이름 in 배열"

  • v-for="(요소변수이름, 인덱스) in 배열"

  • new Vue({
  el: "#app",
  data: {
    regions:["서울","대전","광주","대구","부산"]
  }
});

  • <ul>
  <li v-for="name in regions">
  	지역 : {{ name }}
  </li>
</ul>

template

  • 여러 개의 태그들을 묶어서 처리해야 한다면 template를 이용하면 편리

  • v-if, v-for, component 등과 함께 많이 사용

  • <template v-for="(region, index) in regions">
  <h2> 지역 {{ index+1 }} : {{ region }} </h2>
</template>

v-cloak

  • Vue 인스턴스가 준비될 때까지 mustache 바인딩을 숨기는데 사용

  • [v-cloak]{display:none} 과 같은 CSS 규칙과 함께 사용

  • Vue 인스턴스가 준비되면 v-cloak는 제거됨

  • <style>
  [v-cloak] {
    display: none;
  }
</style>

  • <div v-cloak>
  {{ msg }}
</div>


ES6 일부 기능

  • let, const
  • property shorthand, concise method
  • for ~ of
  • template string

let

  • 중복선언 불가능

  • ECMA6부터 선언된 블록에서만 사용할 수 있는 블록변수(let)가 제공됨

  • 호이스팅 대상에서 제외

  • var msg = 1;
if (msg === 1) {
  var msg = 2;
  console.log(msg); // 2
}
console.log(msg); // 2

  • var msg = "1";
if(msg == "1") {
  let msg = "2"; // 호이스팅 X
  console.log(msg); // 2
}
console.log(msg); // 1

const

  • 상수로 사용

  • 선언시 값을 할당해야 함

  • 호이스팅 대상에서 제외

  • let 키워드와 값을 변경할 수 없다는 것만 제외하고 동일

  • const msg1 = '상수';
msg1 = '상수2'; // 에러
console.log(msg1); // 상수

  • const msg2; // 에러
msg2 = '선언시 값을 할당해야 한다'; // 에러

property shothand

  • 변수에 입력된 값을 객체에 설정할 때 변수의 이름을 프로퍼티 명으로 설정할 때 (이름이 똑같을 때) 생략 가능

  • const id = 'hong',
  name = '홍길동',
  age = 33;
  
const member1 = {
  id: id,
  name: name,
  age: age,
  info: function () {
    console.log('member1 - info');
  },
};
  
// 변수에 입력된 값을 객체에 설정할 때 변수의 이름을 프로퍼티 명으로 설정하는 상황
const member2 = {
  id,
  name,
  age,
  info: function () {
    console.log('member2 - info');
  },
};

concise method

  • 객체의 함수 function 키워드 제거 가능

  • const member1 = {
  id: id,
  name: name,
  age: age,
  info: function () {
    console.log('member1 - info');
  },
};
  
// 객체의 함수 단축 : function 키워드를 제거
const member3 = {
  id,
  name,
  age,
  info() {
    console.log('member3 - info');
  },
};

for ~ of

  • for~in 와 동일

  • const data = [1, 10, 100];
for (let element of data) {
  console.log(element); // 1, 10, 100
}

template string

  • ``(백틱) 사용

  • jsp의 el과 문법 형식이 동일

  • 문자열과 변수의 결합시 편리

  • multiline 지원

  • const name = "홍길동";
const age = 22;
console.log(name + "의 나이는 " + age + "세 입니다.");
console.log(`${name}의 나이는 ${age}세 입니다.`);



오늘의 느낀 점

  • vue.js 들어만 봤는데 실제로 해보니 어렵고 재밌고 신기하다.
  • 완전 새로운 언어일 줄 알았는데 기존에 있는 것에 추가하여 사용하는 것이어서 신기했다.
  • v-bind를 적용했을 때, 내 이해력이 빠르게 연결되지 않는다.

태그:

카테고리:

업데이트:

참고