Vue 03 grammar

Seungju Hwang·2020년 12월 26일
TILvue.js
0

Vue

목록 보기
3/18
post-thumbnail

Intro

Vue를 사용하기 위한 기본 문법에 대해 알아봅시다!

  • 디렉티브 :v- 접두사가 있는 특수 속성으로 단일js표현식입니다.(v-for는 제외)

🔵 리스트 렌더링

배열을 기반으로 리스트를 렌더링 하자!

v-for

  • key 설정이 필요합니다
<body>
  <div id="app">
    <div v-for="(todo,idx) in todos" :key="idx">
      {{ todo.title }}
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      const app = new Vue({
      el: '#app',
      data: {
        message: 'hello world!!!',
        todos: [
          {id:1, title:'todo1', completed:false},
          {id:2, title:'todo2', completed:true},
          {id:3, title:'todo3', completed:false},
        ]
      },
    })
  </script>
</body>

🔵 조건부 렌더링

조건에 따른 렌더링

v-if

  • v-else를 사용할 경우 반드시 v-if 디렉티브 뒤에 사용해야 한다.
<body>
  <div id="app">
    <div v-for="todo in todos">
      <div v-if="todo.completed == true">완료 : {{ todo.title }}</div>
      <div v-else-if="todo.completed == 'pending'">대기중: {{ todo.title }}</div>
      <div v-else>미완료 : {{todo.title}}</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello world!!!',
        todos: [
          {id:1, title:'todo1', completed:false},
          {id:2, title:'todo2', completed:true},
          {id:3, title:'todo3', completed:false},
		  {id: 4, title: 'todo4', completed: 'pending' },
        ]
      },
    })
  </script>
</body>

v-show

  • display:none; 의 CSS를 적용하여 렌더링은 되지만 가시적으로 볼 수 없게 만든다!
  • v-if디렉티브와 렌더링 & 토글 비용을 비교할 수 있어야한다. ( 렌더링이 자주 되지 않는 경우 v-if가 유리하고 자주 토글이 진행되는 경우는 v-show가 유리하다
<body>
  <div id="app">
    <h2>1. v-if</h2>
    <p v-if="isTrue">
      v-if-true
    </p>
    <p v-if="isFalse">
      v-if-false
    </p>
    <hr>

    <h2>2. v-show</h2>
    <p v-show="isTrue">
      v-show-true
    </p>
    <p v-show="isFalse">
      v-show-false
    </p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        isTrue:true,
        isFalse:false,
      }
    })
  </script>
</body>

🔵 클래스와 스타일 바인딩

class와 css를 조작하기 위해 사용합니다.

v-bind

  • HTML 표준 속성 및 class 바인딩
  • 하위 컴포넌트에게 데이터를 내려줄 때 사용
  • shortcut :
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5. Vue v-bind</title>
  <style>
    .complete {
      color: red;
    }

    .my-background-color {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- HTML 표준 속성 binding -->
    <span :title="myMessage">{{ myMessage }}</span>
    <hr>
    <a :href="myUrl" target="_blank">Go to google!</a>
    <hr>
    <img :src="imageUrl" alt="randomImg">
    <hr>

    <!-- class binding -->
    <ul>
      <li v-for="todo in todos" :class="{ complete: todo.isCompleted }">
        {{ todo.title }}
      </li>
    </ul>
    <hr>

    <h2 :class="[isCompleted,isBackground]">Hello Vue.js</h2>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        myMessage: 'HTML의 title 속성으로 볼 수 있습니다',
        myUrl: 'https://google.com',
        imageUrl: 'https://picsum.photos/200/300',
        todos: [
          {id: 1, title: 'todo1', isCompleted: true},
          {id: 2, title: 'todo2', isCompleted: false},
        ],
        isCompleted: 'complete',
        isBackground: 'my-background-color'
      }
    })
  </script>
</body>

🔵 이벤트 핸들링

이벤트 리스너의 역할을 하는 디렉티브

v-on

  • 이벤트 리스너의 역할을 하는 디렉티브
  • shortcut : @
<body>
  <div id="app">
    <button v-on:click="alertMessage">Click!</button>
    <hr>
    
    <h2>{{ counter }}</h2>
    <!-- shortcut (v-on: -> @) -->
    <!-- <button v-on:click="addOne">+1</button> -->
    <button @click="addOne">+1</button>
    <hr>

    <input type="text" @keyup.enter="onInputChange">
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hell Vue.js',
        counter: 0,
      },
      methods: {
        alertMessage: function () {
          alert('hello, Vue.js')
        },
        addOne: function () {
          // this는 counter에 접근할 수 있어
          this.counter += 1
        },
        onInputChange: function () {
          console.log('enter!')
        }
      }
    })
  </script>
</body>

이벤트수식어 & 키 수식어 & 시스템수식어

.수식어 을 통해 여러 이벤트를 연결할 수 있다.

  • 데이터 로직에 대한 메소드만 사용할 수 있는 이벤트 수식어
  • 키보드 이벤트를 청취

🔵 폼 입력 바인딩

폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성

v-model

  • syntax sugar
  • v-bind v-on 을 사용해서 구현하는 양방향 바인딩을 한번에 처리
<body>
  <div id="app">
    메세지 : {{ message }}
    <div v-for="todo in todos">
      <div v-if="todo.completed">완료 : {{ todo.title }}</div>
      <div v-else>미완료 : {{todo.title}}</div>
    </div>
    <input v-model="userInput" type="text">
    {{ userInput}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        userInput: '홍!',
        message: 'hello world!!!',
        todos: [
          {id:1, title:'todo1', completed:false},
          {id:2, title:'todo2', completed:true},
          {id:3, title:'todo3', completed:false},
        ]
      },
    })
  </script>
</body>

🔵 기타

v-text, v-html

  • v-text는 우리가 사용하는 가장 기본 텍스트 보간법인 {{ }}과 같다.
  • v-html은 원시 HTML을 DOM에 렌더링 한다. -> 신뢰하지 않는 외부의 입력을 받는 경우 절대 사용하면 안된다.
<body>
  <div id="app">
    <ul>
      <li v-text="myMessage"></li>
      <li v-html="myMessage"></li>
      <li>{{ myMessage }}</li>
    </ul>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        myMessage: '<li>hello Vue.js</il>'
      }
    })
  </script>
</body>

filters

  • 텍스트의 형식화를 적용할 수 있는 필터를 지원한다.
  • | 심볼을 사용하고 이전의 데이터가 필터링 로직으로 작성된 함수의 인자로 넘어온다.
  • 여러 개의 필터 요소를 chaining하여 사용할 수 있다.
  • Django의 Template filter와 유사하다.

v-cloak

  • 맨 처음 새로고침할 때 태그가 보임... 세상 불편.. -> 이거 없애주는 것!
<style>
    [v-cloak] {
      display:none;
    }
</style>
<body>
  <div id="app">
    <h1>점심메뉴</h1>
    <button @click="pickOneInLunchMenu">
      pick One
    </button>
    <p v-cloak>{{ pickedLunch }}</p>

🔵 lodash

종종 랜덤 샘플링, 수학적 기능을 자바스크립트를 통해 사용하고자 할 때 사용!

npm install lodash
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lodash</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
  <script>
    console.log('-----------------1. reverse---------------')
    //1. reverse - Vanilla O
    // Vanilla
    const array1 = [1, 2, 3, 4]
    const reversedArray1 = array1.reverse()
    console.log(reversedArray1)

    // Lodash
    const array2 = [1, 2, 3, 4]
    const reversedArray2 = _.reverse(array2)
    console.log(reversedArray2) // [4, 3, 2, 1]


    console.log('-----------------2. sort---------------')
    //2. sort - Weird Operation in Vanilla 
    // Vanilla 
    const numbers1 = [10, 1, 3, 7, 4]
    // JS에선 숫자라도 인자들을 기본적으로 str로 인식
    // numbers1.sort()
    // console.log(numbers1)

    numbers1.sort(function (num1, num2) {
      return num1 - num2
    })
    console.log(numbers1)

    // Lodash
    const numbers2 = [10, 1, 3, 7, 4]
    const sortedNumbers2 = _.sortBy(numbers2)
    console.log(sortedNumbers2)


    console.log('-----------------3-1. range---------------')
    //3. range - Vanilla X
    // Lodash
    const nums1 = _.range(4)
    const nums2 = _.range(1, 5)
    const nums3 = _.range(1, 7, 2)

    console.log(nums1) // [0, 1, 2, 3]
    console.log(nums2) // [1, 2, 3, 4]
    console.log(nums3) // [1, 3, 5]

    console.log('-----------------3-2. random---------------')
    //3-2. random - Vanilla ?
    const randomNum1 = _.random(0, 5)
    const randomNum2 = _.random(5)
    const randomNum3 = _.random(1.2, 5.2)

    console.log(randomNum1)
    console.log(randomNum2)
    console.log(randomNum3)
    

    console.log('-----------------3-3. sampleSize---------------')
    //3-3. sampleSize - Vanilla ?
    const result = _.sampleSize([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 6)
    console.log(result)

    // 정렬까지
    const sortedResult = _.sortBy(result)
    console.log(sortedResult)
  </script>
</body>
</html>
profile
Seungju Hwang
기록하는 습관은 쉽게 무너지지 않아요.
이전 포스트

Vue 02 Basic

다음 포스트

Vue 04 Coding Style Guide

0개의 댓글