Vue.js

Vue.js 정리

Vue.js?

MVC에서 V(view) 부분을 담당하는 프레임워크

각각의 컴포넌트의 조합으로 구성

Component

html, css, javascript

.vue 확장자 파일로 하나의 컴포넌트를 묶음

컴포넌트 내부에 데이터와 메서드가 존재

컴포넌트의 데이터와 메서드를 이용하여 컴포넌트를 제어

Quick Start

 <script src="https://unpkg.com/vue"></script>

<div id="app">
    <p></p>
    <button @click="showAlert"></button>
</div>

 new Vue({
     el:'#app',
     data:{
         message:'hello vue js'
     },
     methods:{
         showAlert(){
             alert('h1')
         }
     }
 })

문법

머스타치 구문 : 중괄호 두개 사이에 데이터 이름을 표기

vue.js가 템플릿을 컴파일하면서 데이터의 값을 바인딩

디렉티브 Directive

디렉티브는 ‘v-‘ 접두사가 있는 특수 속성

v-html, v-bind, v-once, v-if, v-for, v-on, v-model ….

주요 디렉티브

v-html

데이터의 값을 HTML 형태로 바인딩

<div id="app4">
    <span v-html="name1"></span>
</div>

<script>
var app4 = new Vue({
    el:'#app4',
    data:{
        name1:'<i>italic</i>'
        //<i>italic</i> html 으로 출력
    }
})
</script>

v-text

데이터의 값을 TEXT 형태로 바인딩

<div id="app4">
    <span v-text="name2"></span>
</div>

<script>
var app4 = new Vue({
    el:'#app4',
    data:{
        name2:'<i>italic</i>'
        //italic으로 출력
    }
})
</script>

v-bind

태그의 속성에 데이터를 바인딩 (생략가능)

v-bind:id=”message”

:id=”message”

v-if

조건문, 조건을 걸어 DOM을 렌더링할지 결정

ex)v-if=”ok”

ok의 값이 ‘true’일 경우 렌더링

<div id="app2">
    <p v-if="seen">seen</p>
</div>

<script>
var app2 = new Vue({
    el: '#app2',
    data:{
        seen:true
    }
})
</script>

v-for : 반복문

ex)v-for=”item in items”

items:배열, item:items의 요소

<div id="app3">
    <ul>
        <li v-for="(todo, index) in todos">
             
        </li>
    </ul>
</div>

<script>
var app3 = new Vue({
    el: '#app3',
    data:{
        todos:[
            {text:'javascript'},
            {text:'Vue'},
            {text:'Angular'}
        ]
    }
})    
</script>

v-on : 이벤트 바인딩

v-on 약어 @ 사용가능

<div id="app4">
    <span v-text="name"></span>
    <span v-html="name2"></span>
    <p></p>
    <button v-on:click="reverseMessage">message reverse</button>
</div>

<script>
var app4 = new Vue({
    el:'#app4',
    data:{
        message:'hello message',
        name:'<i>italic</i>',
        name2:'<i>italic</i>'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})
</script>

v-model : 폼 입력, 양방향 바인딩

주로 데이터 입력을 위한 input 태그에 사용되는 디렉티브

<div id="app6">
    <input type="checkbox" v-model="smile" id="smiles">
    <label for="smiles">feel toggle</label>
    <p v-text="smile ? good : bad">text 뿌려줌</p>
</div>

<script>
var app6 = new Vue({
    el:'#app6',
    data:{
        smile:true,
        good:'good!!',
        bad:'bad T.T'
    }
})
</script>

counter-app

<div id="counter-app">
    <p>8</p>
    <button @click="increase()" :disabled="moreFive">+증가</button>
    <button @click="decrease()" :disabled="lessZero">-감소</button>
</div>

<script>
var counterApp = new Vue({
    el: '#counter-app',
    data:{
        count: 0
    },
    methods:{
        increase: function(){
            this.count++;
        },
        decrease: function(){
            this.count--;
        }
    },
    computed:{
        moreFive: function(){
            return this.count >= 5
        },
        lessZero: function(){
            return this.count <= 0
        }
    }

})
</script>

Codepen 전체코드

원문참고_Tour of Vuejs

Written on July 25, 2017

vuejs framework