My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

Vue.js (2) - 추가적인 기능 살펴보기

1) Overview

  1. Vue 객체의 key들(property)
    • filters, watch
  2. directive (지시자) :
    • v-on, v-bind, v-once
  3. 페이지를 리로드하면 데이터가 전부 삭제되기 때문에 데이터를 남겨놓을 수 있는 방법?
    • 브라우저가 가진 로컬데이터

1

1-1. directives

  1. v-bind는 태그의 속성값을 출력하기 위해서 사용한다.

  2. v-once는 처음에 로드됬던 데이터의 값을 그대로 가지고 싶을 때 사용할 수 있다.

    예시)

       
<div id="app">
    <h1 v-once >{{header}}</h1>
    <h2>{{ hello() }}</h2> <!-- hello()를 실행하자는 뜻 -->
    <a v-bind:href="linkSource" v-html="anchor"></a>
    <img v-bind:src="imageSource">
</div>
   

    const app = new Vue({
    el : "#app",
    data : {
        imageSource : "https://images.mypetlife.co.kr/wp-content/uploads/2018/07/27094143/pexels-photo-1220755-1024x682.jpeg",
        linkSource : , // 링크주소
        header : "이것은 제목입니다.",
        anchor : "링크입니다.",
    },
    methods : {
        hello : function(){
            this.header = "제목이 바뀔걸?"
            return this.header
        }
    }
})

    결과화면)

    2

    v-bind:속성명을 통해서 href속성과 src속성을 채워넣었고,

    hello() 함수를 실행하면 header값도 바뀌지만 v-once라고 적혀있기 때문에 h1태그는 기본값 그대로 출력됨을 알 수 있습니다.

    혹은 이걸 더 간편하게 할 수 있는데, 이런 방식을 Shorthand Expression이라고 한다.

    <img :src="imageSource">

  3. v-on

    v-on을 통해서 자바스크립트의 EventListener와 비슷한 효과를 낼 수 있다.

       
<p>{{content}}</p>
<input v-model="content">
<button>추가</button>
<ul>
    <li v-for="todo in todos">{{todo}}</li>
</ul>

    input태그에 값을 집어넣고 button을 클릭하면 todos에 그 값이 추가되어서 content를 넣어주고 싶다.

    • addTodo : todos에 content를 추가하는 함수

      addTodo : function(){
    this.todos.push(this.content)
}
    • 이제 버튼이 클릭될 때 마다 addTodo를 발동시키게 할것입니다.

      v-on으로 javascript의 EventListener를 대신할 수 있습니다.

      • 작성법 : v-on:이벤트명="함수명"

      • 예시

        <input v-model="content">
<button v-on:click="addTodo">추가</button>

        이것도 shorthand expression을 사용해서 생략할 수 있습니다.

        <button @click="addTodo">추가</button>

1-2. 다른 key값들

  1. filter

    filters : {
    capitalize : function(value){
        let str_array = value.split(" ")
        let cap_array = str_array.map((str) => {
            return str.charAt(0).toUpperCase() + str.slice(1)
        })
    	return cap_array.join(" ")
	}
}

    일단 필터는 이런식으로 함수를 만들어서 쓰는데,

    이런 필터를 사용하는 것은 django template language의 filter 사용법과 비슷합니다.

       
<h1 v-once >{{header | capitalize}}</h1>
  2. watch

    데이터의 변화상태를 지켜보는 property

    {데이터}가 변화할 때 {XXX를 하게} 할 수 있습니다.

    watch : {
    todos : { // 데이터
        handler : function(){ // XXX를 하게 : FUNCTION
            alert("Todo 새로 추가됬어용!")
        }
    }
}
    • handler 함수의 인자는 데이터 객체(todos)를 받기 때문에 혹시나 필요하다면 활용할 수 있습니다.

1-3. Local Storage

일단 브라우저에서 localStorage라는 변수를 항상 가지고 있고,

(이 변수는 window 객체에 소속되어있습니다.)

여기에 저장된 데이터는 로컬스토리지 역할을 하기 때문에 만료 기간이 없습니다. (단, 컴퓨터를 다시 켜면 날아감…)

그렇기 때문에 이것을 통해서 browser caching을 주로 할 수 있습니다.

이런 로컬스토리지는 오브젝트 형태로 관리할 수 있기 때문에 오브젝트를 다루듯이 하면 됩니다.

  1. 메서드들

    • getItem(키값)
    • setItem(키값, 밸류값)

    3

    하지만, value값으로는 object나 배열같은 자료형을 넣으면 제대로 저장이 안됩니다.

    4

    그래서 그냥 key-value 쌍의 string만 넣을 수 있으므로 그 점만 유념하시면 됩니다.

    => 그래서 JSON.parse를 통해서 object로 바꾸는 작업을 수행하면 편합니다.

  2. 응용하기

    • Todos에 데이터가 저장될때마다 watch 프로퍼티를 통해서 데이터를 로컬스토리지에 저장하기!

      1. todoStorage 를 만들기

        const STORAGE_KEY = 'vue-app'
        
let todoStorage = {
    save : function(todos) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    },
    fetch : function(){
        let str = localStorage.getItem(STORAGE_KEY || '[]')
        let todos = JSON.parse(str)
        return todos
    }
}

      2. watch함수를 만들기

        watch : {
    todos : {
        handler : function(todolist){
            todoStorage.save(todolist)
        }
    } 
}

      3. 이제 todos를 localStorage에서 나온 것으로 대체하기

        data : {
    todos : todoStorage.fetch(),
    content : ""
},

나중에는 Django 서버랑 교류할 것이기 때문에, todos를 todoStorage 대신에 django 서버를 통해서 데이터베이스의 값을 가져오는 것만 바뀌면 됩니다.

comments powered by Disqus