Vue.js 기초

SunA·2020년 7월 30일
vue
0

Vue

목록 보기
2/2

💡 Vue.js 기본 정리! 💡

MVVM 아키텍쳐의 Vue.js

ViewModel : 데이터 또는 화면이 바뀌는지 확인

  • 화면이 바뀌는것 -> 이벤트 발생 (버튼 클릭, 텍스트 입력) -> 모델을 바꿔줌

Vue.js 인스턴스

  • Vue앱은 Vue 함수로 인스턴스를 만드는 것부터 시작
  • Vue는 생성하는 시점에 객체를 정보로 넘겨줄 수 있다. 
const vm = new Vue({
   // 옵션
});

el 옵션

  • el : "css 선택자" or HTML Element, Vue가 적용될 요소 지정
  • 여러개 있는 경우, 첫번째 요소가 선택
new Vue({
   el : "#app"
});

<div id="app">

</div>

data 옵션

  • data : 객체 or 함수, Vue에서 사용되는 정보를 저장
  • 1개가 아닌 여러개의 데이터를 가져야 하기 때문에 객체 형태로 작성
    • {{ key값 }} : mount 시, value값으로 변경
new Vue({
   el : "#app",
    data : {
        msg : 'Hello'
    }      
});

new Vue({
   el : "#app",
    data() {
        return {
        msg : 'Hello'
        }
    }      
});

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

텍스트

{{ }}

  • 문자열 보간법, 인터폴레이션, 문자열 표현
  • 데이터 바인딩의 기본 형태

v-once

  • 데이터에 대한 것을 딱 한번만 수행하고 반영하지 않음

RawHTML

  • 속성 안의 msg : vue 인스턴스가 관리하는 데이터 속성의 key
new Vue({
    data : {
        msg : 'Hello'
    }      
});
<div>{{msg}}</div>
<div v-text="msg">무시</div>
<div v-html="msg">무시</div>
// Dom 이 기존에 갖고 있던 '무시' 라는 데이터가 무시됨 

<div id="app">
    <div>메세지 : {{msg}}</div>
   <!-- {{}} 은 속성의 값으로 사용 불가능함 -->
    <div v-text="'메세지 : ' + msg">무시된다.</div>
    <div v-html="'메세지 : ' + 'msg'">무시된다.</div>
    <div v-html="'메세지 : ' + msg">무시된다.</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "<h2>Hello Vue~</h2>"
        }
    });
</script>

  • 실행 화면

    image-20200602105830684

JavaScript Expressions

  • 데이터 바인딩 {{ 표현식 }} 내에서 JavaScript 표현식의 사용이 가능
    • 하나의 단일 표현식만 포함될 수 있다.

chrome으로 데이터 변경

  • v-cone는 변경되지 않음 확인하기

image-20200602104955704

v-

vue가 갖는 directive

v-once : 데이터에 대한 것을 딱 한번만 수행하고 반영하지 않음

v-text : 데이터 속성의 html을 escape 처리

v-html : 데이터 속성의 html을 파싱하여 처리

Directives

v-text

  • 데이터 속성의 html을 escape 처리

v-html

  • 데이터 속성의 html을 파싱하여 처리

v-once

  • 데이터에 대한 것을 딱 한번만 수행하고 반영하지 않음

v-model

  • 양방향 바인딩 처리를 위한 사용

    • 양방향 : 화면 입력을 스크립트로, 스트립트의 변화를 화면으로
    • 화면의 변화된 내용을 model에 적용 -> a를 b로 변화하면 model 이 b로 바뀐다.

  • 폼의 input, textarea

  • input인 경우, value 속성에 영향 -> 각 상황에 따라 영향을 주는 속성이 달라짐

    <input type="text" v-model="msg">
    // msg : 단순한 문자열이 아닌 Vue 인스턴스

    <div id="app">
        <input type="text" v-model="msg">   // 양방향 : model의 값을 가져온 뒤, 사용자의 조작을 통해 값이 변경이 되면 뷰의 instance에 직접 접근하여 변경 -> F12를 통해 확인가능
        <div>{{msg}}</div>      // 단방향 : msg의 값을 표시, 직접 바꿀 수 없다.
      <div v-once>{{msg}}</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello'
        }
    });
</script>

v-bind

  • Element 속성 바인딩 처리를 위한 사용

  • : 로 사용 가능

  • 속성의 값이 문자열인 경우 v-bind를 생략할 수 있다.

    속성의 값이 Vue 인스턴스 인 경우 v-bind 작성

    [ ] 는 Vue의 인스턴스로 간주

<div id="app">
    <!-- 속성을 바인딩 합니다. -->
        <div v-bind:id="idValue">v-bind 지정 연습</div> // id 값이 test-id
      <div v-bind:[key]="btnId">버튼</button>

<!-- 약어 -->
    <div :id="idValue">v-bind 지정 연습</div>
   <div :[key]="btnId">버튼</button>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            idValue: 'test-id',
            key: 'id',
            btnId: "btn1"
        }
    });
</script>

v-show

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

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            isExist: 'true'
        }
    });
</script>

v-if / v-else-if / v-else

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

v-for

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

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

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

v-cloak

  • Vue 인스턴스가 준비될 때까지 mustache ({{ }}) 바인딩을 숨기는데 사용
    • 데이터 로딩이 오래 걸리면 화면에 {{ msg }} 로 보인다.
  • Vue 인스턴스가 준비되면 v-cloak는 제거됨
  • cloak : 망또
<style>
    [v-cloak] {display:none};
</style>

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

v-on

template

  • 여러 개의 태그들을 묶어서 처리해야하는 경우
  • v-if, v-for, component 등과 함께 많이 사용
<template v-for="(region, index) in ssafy ">
    <h2>지역 : {{ region.name}}</h2>
   <h3>{{ region.count}}개반</h3>
</template>

ES6

let

  • 중복 선언 불가능

  • 선언된 블럭에서만 사용할 수 있는 블록 변수

  • 호이스팅 대상에서 제외 -> 선언되기 전에 호출 불가

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


// let
var msg = "1"
if (msg == "1"){
   let msg = "2";
   console.log(msg);   // 2   -> 호이스팅 불가
}
console.log(msg);   // 1

const

  • 상수
  • 한번 할당한 값은 변경 불가
  • 선언시 반드시 값을 할당해야 한다

property shorthand

  • 변수명과 property 명이 같은 경우 아래와 같이 표현 가능

image-20200602152807443

concise method

  • 함수명 뒤에 ( ) 를 하면 function 키워드와 : 를 생략하여 함수를 표현할 수 있다.

image-20200602153025546

for ~ of

for in : Key 값

for of : value 값

template string

  • 백틱 ( ` ) 사용
  • jsp의 el과 문법 형식이 동일
  • 문자열과 변수의 결합시 편리함
  • multiline 지원
const name = "홍길동"
const age = 22;
console.log(name+"의 나이는 " + age +"세 입니다.")
console.log(`${name}+"의 나이는 " + ${age} +"세 입니다."`)
`${}`
profile
SunA
꾸준하게 열심히!
이전 포스트

Vue 인스턴스

0개의 댓글