You will be fine

<Vue.js> 3. 템플릿 문법(2)

by BFine

공부(2018~2019) - 스킨변경전/Vue.js

반응형

Vue.js 템플릿 문법(2)

1. 이벤트 핸들링

1.1 v-on

  • v-on은 v-on:이벤트="스크립트" 형태로 사용하고 메서드도 바인딩이 가능하다.
  • v-on 대신에 @ 를 써써 생략할 수 있다.
<body>
  <div id="app">
    <div v-on:click ="count" >{{num}}</div>
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      num : 1
    },
    methods : {
      count : function(){
        this.num +=1;
      }
    }
  });
</script>

1.2 이벤트 수식어

  • 상황에 맞는 간단한 이벤트 수식어를 제공한다.
  • 자식태크 -> 부모태크은 캡쳐링, 부모태그 -> 자식태그는 버블링 (HTML DOM 이벤트전파)

2. 모델

  • 폼 입력을 편리하게 도와주는 v-model이라는 디렉티브를 제공한다.
  • v-model은 폼과 데이터를 바인딩하는 디렉티브이고 양방향 형태 를 가진다.
  • 초기에 요소 속성에 정의된 값은 무시하고 데이터값이 우선시 된다.
  • 한글 입력시 한글자가 완성될때만 반영되므로 이때는 v-on:input 을 사용해야한다.
<body>
  <div id="app">
    <input  v-model="msg" value="초기값" >{{msg}}
    // Hello가 화면에 보여진다.
  </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3"></script>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      msg : 'Hello'
    }
  });
</script>

3. 필터

  • 일반텍스트를 서식화 할떄 유용한 기능이다. | 이용하여 사용한다. (여러개 가능)
  • v-bind와 Mustache 이외에 다른 디렉티브는 사용불가능하다.
  • Vue.filter('이름','함수')로 선언하면 전역적 으로 등록할 수 있다.
<body>
  <div id="app">
    <p>{{msg}}</p>
    <p>{{msg|upper}}</p>
  </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3"></script>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      msg : 'hello'
    },
    filters :{
        upper : function(msg){
          return msg.toUpperCase();
        }
    }
  });
</script>

출처

반응형
저작자표시 비영리

'공부(2018~2019) - 스킨변경전 > Vue.js' 카테고리의 다른 글

<Vue.js> 5. 단일파일 컴포넌트  (0) 2019.05.31
<Vue.js> 4. 컴포넌트  (0) 2019.05.31
<Vue.js> 2. 템플릿 문법(1)  (0) 2019.05.23
<Vue.js> 1. 인스턴스  (0) 2019.05.22

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바