Vue.js 정리

아래 내용은 기본적인 Vue 사용법을 알고있음을 가정해 작성함

v-model vs v-bind

v-model 은 데이터를 동적으로로 바인딩할 때 사용(<input v-model="message"> 와 같이 작성하면 실시간으로 message라는 데이터의 값을 변경할 수 잇음)
v-bind 는 속성을 표현식에 동적으로 바인딩할 때 사용 / 축약형으로 :로 대체 가능 (<img :src="img.jpg" 와 같이 작성하면 이미지의 주소를 불러올 수 있음)

조건문 v-show vs v-if

v-show - 항상 렌더링되며 display: none 속성이 추가되고 사라짐으로써 화면에 보여지고 안보임.
v-if - 조건이 true 일 때 렌더링되고 false 일 때 삭제된다.

역할은 동일하지만 v-show는 초기 렌더링 비용이 높고 v-if는 토글 비용이 높으므로,
자주 변경이 되어아 햔다면 v-show, 자주 변경이 되지 않는다면 v-if를 사용.

또한 v-show는 <template>문법에서 사용이 불가하며,
v-if는 v-else-if,v-else로 추가적인 조건을 생성 가능하다.

반복문 v-for

데이터에서 배열이나, 객체의 내용을 반복해서 출력할 때 v-for을 사용.
예를들어 배열의 이름이 stories이면 <li v-for="story in stories>로 stories의 내용을 각각 story로 하나씩 꺼내서 리스트로 나열하겠다는 뜻이며 객체도 마찬가지로 사용 가능하다.
여기서 배열이나 객체의 이름을 복수형의 의미를 담은 단어로 지으면 직관적으로 알아보기 쉽게 사용할 수 있다.

배열에서 데이터의 index를 표시해야 한다면, <li v-for="(story, index) in stories">로 for문을 작성하고, {{ index }}로 각각의 index를 출력할 수 있다.

객체는 key:value로 구성되어 있기 때문에 필요하다면, <li v-for="(story, key, index) in stories">와 같이 사용 가능.

v-on

자바스크립트로 처리하는 이벤트 핸들링을 v-on로 대체해 사용. / v-on을 @로 대체 가능함.
v-on=" "에서 따옴표 안에는 직접 자바스크립트를 사용 하거나, script단에서 만들어 놓은 methods를 사용할 수 있음.

보통 자바스크립트를 사용 시 submit을 하면 event.preventDefault()로 페이지가 새로고침돼서 날아가는걸 막는데 Vue에서 지원하는 @click.prevent로 대체할 수 있다.
이와 같은 종류의 수식어는 .prevent, .stop, .capture, .self가 있음.

methods vs computed

methods는 실행시 함수의 내용을 통해 결과가 바뀌게 할 때 사용할 수 있고,
computed는 이미 함수로 계산된 결과를 가져올 때 사용함.

필터

배열이나 객체에서 각각의 내용을 불러올 때 사용 가능
HTML 코드에 직접 작성하거나, methods, computed 등으로 사용 가능
이름 그대로 원하는 결과값을 필터링해 렌더링하는 것.

사용자 정의 필터도 사용 가능 (Vue.filter())
컴포넌트를 정의할 때와 비슷하지만 두번째 인자에 함수로 원하는 필터 내용을 삽입
HTML에 {{ name | filter-name }}과 같이 사용

Lodash 라이브러리를 사용해 도움을 받을 수도 있음

컴포넌트

Vue.js의 핵심 기능
기본 HTML 엘리먼트를 확장해 재사용이 가능하도록 캡슐화하는데 사용

생성 방법

1. HTML단에 새로 만든 컴포넌트 작성

   //HTML
   <div class="container">
    <list></list>
   </div>
   //JavaScript
   <script type="text/javascript">
    Vue.component('list',{
        template: '<h1>Hello, World!</h1>'
    });
    new Vue({
        el: '.container'
    })
   </script>
   

2. 스크립트단에서 모두 처리

   //JavaScript
   <script type="text/template" id="item-template">
    <h1>Hello, World!</h1>
   </script>
   <script type="text/javascript">
    Vue.component('list', {
        template: '#item-template'
    });
   </script>
   

3. template태그 사용 (권장)

   //HTML
   <template id='item-template'>
    <h1>Hello, World!</h1>
   </template>
   //JavaScript
   <script type="text/javascript">
    Vue.component('list', {
        template: '#item-template'
    });
   </script>
   

같은 템플릿에서 다른 내용을 전달하고 싶을 때 props를 사용함
예시

//HTML
<div class='container'>
    <list writer="Jung"></list>
    <list writer="Kim"></list>
    <list writer="Lee"></list>
</div>
<template id='item-template'>
    <h1>{{ writer }}</h1>
</template>
//JavaScript
<script type="text/javascript">
    Vue.component('list', {
        props: ['writer'],
        template: '#item-template'
    });
    new Vue({
        el: '.container'
    })
</script>

맥북으로 두 개 이상의 기기에서 사운드 출력하는 방법!

블루투스 스피커나 이어폰과 내장스피커를 동시에 출력하고 싶을 때 방법을 작성해봄

soundflower를 사용 / 다운로드 페이지로 이동

각자 맞는 버전에 다운로드 (저는 시에라를 사용해 10.11을 다운 받았음)

dmg파일을 누르면 pkg파일이 생기는데,
클릭하면 확인되지 않은 개발자가 만든 앱이라며 열리지 않음.
이때 우클릭(ctrl 클릭) 후에 열기를 하면 실행 할 수 있음.

압축을 풀고서 Audio MIDI Setup을 실행

다중 출력 기기 탭에서 원하는 기기를 체크
(현재는 연결하지 않은 상태라 뜨지 않음)

이 기기를 사운드 출력에 사용을 누르면 완료

다운로드 페이지에 윈도우용도 있는걸보니 아마 윈도우에서도 되지 않을까 싶음

둘이서 블루투스이어폰으로 각자 이어폰 꼽고 영화보면 개꿀