Dev log - 41, Vue.js #2

Vue.js

활용 기법

v-on

• 기존 HTML의 onclick() 상위호환, v-on:메서드

<div id="app">
  <button id="banner-btn" v-on:click="toggleElem">close</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {},
    methods: {
      toggleElem: function() {
        console.log('click!!');
      }     
    }
  });
</script>

• ! 를 붙이면 불타입(true,false)을 토글 형식으로 변경할 수 있음

<div id="app">
  <main v-bind:class="{on:isActive}">
    <button id="banner-btn" v-on:click="toggleElem">close</button>
  </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: { isActive: false },
    methods: {
      toggleElem: function() {
      console.log(`변경 전 : ${this.isActive}`);
      this.isActive = !this.isActive;
      console.log(`변경 후 : ${this.isActive}`);
      }  
    }
  });
</script>

Vue-component

• 태그 구조를 변수처럼 사용하여 쉽게 넣을 수 있는 방법

• 사용 방법

<div id="app">
  <Component 이름></Component 이름>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


ㅡ 전역 Component ㅡ
Vue.Component(Component 이름, {
      template: 'Component 내용'
    });


ㅡ 지역 Component ㅡ
let app = new Vue({
      el: '#app',
      data: {},
      components: {
        'Component 이름': {
          template:'Component 내용'
        }
      }
    });

전역 Component

<main-component></main-component>

Vue.component('main-component', {
      template: '<main><div class="container">container</div></main>'
    });

지역 Component

• el 으로 지정한 태그 안에서만 작동

<local-component></local-component>

let app = new Vue({
      el: '#app',
      data: {},
      components: {
       'local-component': {
         template: '<section>local-component</section>'
       }
     }
   });

• 선언된 변수도 활용 가능

<local-component></local-component>

let cpt = {
      template: '<section>local-component 전역 변수화</section>'
    };

let app = new Vue({
      el: '#app',
      data: {},
      components: {
       'local-component': cpt
     }
   });