<1102 내용 정리> Vue - 2

백지윤·2023년 11월 2일
vue
0

Vue

목록 보기
2/6
post-thumbnail

Template Syntax

  • DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용

TEMPLATE SYNTAX의 종류

1. Text Interpolation
2. Raw HTML
3. Attribute Bindings
4. JavaScript Expressions
  1. Text Interpolation
  • 데이터 바인딩의 가장 기본적인 형태
  • 이중 중괄호 구문을 사용
<p>Message:{{msg}}</p>

  1. Raw HTML

    • 콧수염 구문은 데이터를 일반 텍스트로 해석해서 실제 HTML을 출력하려면 v-html 사용
    <div v-html='rawHTML'></div>

const rawHTML = ref('<span style='color:red'>This should be red.</span>')

  2. Attribute Bindings

    • 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind를 사용
    • HTML의 id 속성값을 vue의 dynamicId 속성과 동기화 되도록 함
    • 바인딩 값이 null이거나 undefined인 경우 렌더링 요소에서 제거된다.
    <div v-bind:id='dynamicId'></div>

const dynamicId = ref('my-id)

  3. JavaScript Expressions

    • Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
    • Vue 템플릿에서 JavaScript 표현식을 사용할 수 있는 위치
        1. 콧수염 구문 내부
        1. 모든 directive의 속성값 (v-로 시작하는 특수 속성)

Directive

  • v-접두사가 있는 특수 속성
  • 단일 JavaScript 표현식이어야 한다.
  • 표현식의 값이 변경될 때 DOM에 반응적으로 업데이트를 적용

- Arguments

  • 세미콜론으로 표시되는 인자
  • V-bind의 인자

- Modifiers

  • .(dot)으로 표시되는 접미사

Dynamically data binding

  • 하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩

v-bind 사용처

1. Attribute Bindings
2. Class and Style Bindings

  1. Attribute Bindings

    • HTML 의 속성 값을 Vue의 상태 속성값과 동기화 되도록 함
    • 약어 : ':' (colon)
    <img v-bind:src='imageSrc'>
<a v-bind:href='myUrl'>Move to URL</a>
    • Dynamic attribute name(동적 인자 이름)
    • 대괄호로 감싸서 directive argument에 JavaScript 표현식을 사용할 수도 있음
    • JavaScript 표현식에 따라 동적으로 평가된 값이 최종 argument값으로 사용됨
    <button :[key]='myValue'></button>

  2. Class and Style Bindings

    • 클래스와 스타일은 모두 속성이므로, v-bind를 사용하여 다른 속성과 마찬가지로 동적으로 문자열 값을 할당할 수 있다.
    • 단순히 문자열 연결을 사용하여 이런 값을 생성하는것은 번거롭고 오류 발생이 쉬움
    • Vue는 클래스 및 스타일과 함께 v-bind를 사용할 때 객체 또는 배열을 활용한 개선 사항을 제공

가능한 경우

    1. Binding HTML Classes
      - 1.1 Binding to Objects
      • 객체를 :class 에 전달해서 클래스를 동적으로 전환 할 수 있다.
        • 예시:
          - isActive의 T/F에 의해 active 클래스의 존재가 결정됨
          const isActive = ref(false)

<div :class="{ active: isActive }">Text</div>
        • 객체에 더 많은 필드를 포함하여 여러 클래스를 전환 할 수 있음
        • 예시:
          - :class directive를 일반 클래스 속성과 함께 사용 가능
          	const isActive = ref(false)
const hasInfo = ref(true)

<div class="static" :class="{ active: isActive, 'text-primary': hasInfo }">Text</div>
        • 반드시 inline 방식으로 작성하지 않아도 된다.
    • 1.2 Binding to Arrays

      • :class를 배열에 바인딩 하여 클래스 목록을 적용할 수 있다.

        • 예시 :
        const activeClass = ref('active')
const infoClass = ref('text-primary')

<div :class="[activeClass, infoClass]">Text</div>
        • 배열 구문 내에서 객체 구문으로 사용
        • 예시 :
        <div :class="[{active: isActive}, infoClass]">TEXT</div>

    1. Binding Inline Styles
      - 2.1 Binding to Objects

      • :style은 JavaScript 객체 값에 대한 바인딩을 지원 (HTML style 속성에 해당)

        • 실제 CSS에서 사용하는 것처럼 :style은 kebab-cased 키 문자열도 지원한다.
        <div :style="{ 'font-size' : fontSize + 'px'}">Text</div>
        • 스타일 객체에 직접 바인딩 하는 방법
        const styleObj = ref({
	color: activeColor,
    fontSize : fontSize.valut + 'px'
})

<div :style='styleObj'>TEXT</div>
    • 2.2 Binding to Arrays
      • 여러 스타일 객체의 배열에 :style을 바인딩 할 수 있다.
        • 작성한 객체는 병합되어서 동일한 요소에 적용
        • 예시 :
        const styleObj2 = ref({
	color: 'blue',
    border: '1px solid black'
})
	
<div :style="[styleObj, styleObj2]">TEXT</div>

    Event Handling

v-on

  • DOM 요소에 이벤트 리스너를 연결 및 수신

- handler 종류

  1. Inline Handlers : 이벤트가 트리거 될때 실행될 javascript 코드

    const count = ref(0)
   
<button @click="count++">ADD 1</button>
<p>Count : {{count}} </p>입력하세요

  2. Method Handlers : 컴포넌트에 정의된 메서드 이름

    • inline handlers로는 불가능한 대부분의 상황에서 사용함
    const name = ref('Alice')
const myFunc = function(event) {
	console.log(event)
    console.log(event.currentTarget)
    console.log(`Hello ${name}.value!`)
    
<button @click='myFunc'>Hello</button>
    • Method Handeler는 이를 트리거 하는 기본 DOM Event 객체를 자동으로 수신
      const myFunc = function(event) {
	console.log(event)
    console.log(event.currentTarget)
    console.log(`Hello ${name.value}!`)
}
  • v-on shorthand
    - '@'
    @event = "handler"

INLINE Handlers에서의 메소드 호출

  • 메서드 이름에 직접 바인딩 하는 대신 inline handlers에서 메서드를 호출할 수도 있다.
const greeting = function(message) {
	console.log(message)
}

<button @click='greeting('hello')'>Say Hello</button>
<button @click='greeting('bye')>Say bye</button>
  • Inline Handlers에서 원래 DOM 이벤트에 접근하기
  • $event 변수 사용 -> 메소드에 전달

Event Modifiers

  • Vue는 v-on에 대한 Event Modifiers를 제공해 event.preventDefault()와 같은 구문을 메서드에서 작성하지 않도록 한다.
  • stop, prevent, self 등 다양한 modifiers를 제공
    - 메서드는 DOM 이벤트에 대한 처리보다는 데이터에 관한 논리를 작성하는 것에 집중할 것

Key Modifiers

  • Vue는 키보드 이벤트를 수신할 때 특정 키에 대한 별도 modifiers를 사용할 수 있다
  • 예시 : key가 enter일때만 onSubmit 이벤트를 호출하기
input @keyup.enter='onSubmit'>

Form Input Bindings

  • form을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화 해야하는 경우(양방향 바인딩)

  • 방법
    - 1. v-bind와 v-on 함께 사용

      1. v-model 사용

1. v-bind와 v-on을 함께 사용하는 방법

  • v-bind를 사용하여 input요소의 value 속성 값을 입력값으로 사용
  • v-on을 사용하여 input 이벤트가 발생할 때 마다 input 요소의 value 값을 별도 반응형 함수에 저장하는 핸들러를 호출
const inputText1 = ref('')
const onInput = function (event) {
	inputText1.value = event.currnetTarget.value
}

<p>{{inputText1}}</p>
<input :value='inputText1' @input='onInput'>

2. v-model 사용

  • form input 요소 또는 컴포넌트에서 양방향 바인딩을 만든다
  • v-model을 사용해서 사용자 입력데이터와 반응형 변수를 실시간으로 동기화한다.
const inputText2 = ref('')

<p>{{inputText2}}</p>
<input v-model='inputText2'>
  • v-model 을 사용하여 사용자 입력 데이터와 반응형 변수를 실시간 동기화
  • IME가 필요한 언어는 v-model이 제대로 업데이트가 안됨 -> v-bind, v-on 쓰자

Form Input Bindings

  • v-model은 단순한 text input 뿐만 아니라 Checkbox, radio, select 등 다양한 타입의 사용자 입력 방식과 입력방식과 함께 사용가능하다

  • checkbox 활용
    - 1. 단일 체크박스와 boolean 값 활용

    const checked = ref(false)

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
    	![](https://velog.velcdn.com/images/jyoon6992/post/e69d41f5-f709-4b82-989d-1958bdc5f7f0/image.png)

	- 2. 여러 체크박스와 배열 활용

    • 해당 배열에는 현재 선택된 체크박스의 값이 포함된다.

      const checkedNames = ref([])

<div>Checked Names : {{checkedNames}}</div>

<input type='checkbox' id='alice' value= 'Alice' v-model='checkedNames'>
<label for='alice'>Alice</label>

<input type='checkbox' id='bella' value= 'Bella' v-model='checkedNames'>
<label for='bella'>Bella</label>

			```

  • Select 활용
    - 2. select에서 v-model 표현식의 초기 값이 어떤 option과도 일치하지 않는 경우 select 요소는 "선택되지 않은(unselected)"상태로 렌더링된다.

const selected = ref('')
    
    <div>Selected: {{ selected }}</div>
    
    <select v-model='selected'>
    	<option disabeld value = ''>Please select one</option>
        <option>Alice</option>
        <option>Bella</option>
        <option>Cathy</option>
    </select>

참조

IME(Input Method Editor)

  • 사용자가 입력장치에서 기본적으로 사용할 수 없는 문자(비영어권 언어)를 입력할 수 있도록 하는 운영체제 구성 프로그램
  • 일반적으로 키보드 키보다 자모가 더 많은 언어에서 사용해야함
  • IME가 동작하는 방식과 vue의 양방향 바인딩 동작방식이 상충하기 때문에 한국어 입력시 예상대로 동작 x
profile
백지윤
새싹 BJY
이전 포스트

<1101 내용 정리> Vue - 1

다음 포스트

<1106 내용 정리> Vue - 3

0개의 댓글