Vue.js 디렉티브 directive (v-on, v-bind)

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결

 

• v-on

  • 엘리먼트에 이벤트 리스너를 연결

  • DOM에 이벤트가 발생했을때 javascript를 실행

  • 약어 : "v-on" ->> "@"

• html

<div id="app">
    <button v-on:click="hello">Hello</button>
    <!-- 약어표현   v-on:click →→→ @click -->
    <button @click="hello">Hello</button>

    <button @click="helloMsg('Vue')">Hello</button>
</div>

• javascript

new Vue({
    el: '#app',
    methods: {
        hello: function(){
            alert('hello');
        },
        helloMsg: function(msg, e){
            e.stopPropagation();
            alert('hello' + ' ' + msg);
        }        
    }
});

 

 

• v-bind

  • html tag의 속성과 vue 데이터를 연결

  • 약어 : "v-bind" ->> ":"

• html

<div id="app">
    <div v-bind:id="testId"></div>
    <!-- 약어표현   v-bind:class →→→ :class -->
    <div :class="testClass"></div>

    
    <img :src="'https://blog.kakaocdn.net/dn/FuJS0/btqWXalaKLi/3v4Y2bk3J3kmhZaHIa1m2k/img.png'"></img>
    <img :src="imgPath"></img>

    <div :style="{fontSize: '30px', color: 'red'}">hello</div>
</div>

• javascript

new Vue({
    el: '#app',
    data: {
        testId: 'test-id',
        testClass: 'test-class',
        imgPath: 'https://blog.kakaocdn.net/dn/FuJS0/btqWXalaKLi/3v4Y2bk3J3kmhZaHIa1m2k/img.png'
    }
});