Directives지시문: v-on

v-on

v-on:이벤트 타입 = @이벤트타입

        <button v-on:click="counter++">+1</button>
        <button @click="counter++">+1</button>

 

 

methods: 함수를 사용했을 때

   <div id="app">
       <button v-on:click="greeting">인사</button>
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var myapp=new Vue({
            el:"#app",
            methods:{
//                greeting:function(e){
//                    alert("hello")
//              }
                greeting(e){
                    alert("hi~~")
                }
            }
        })
    </script>

methods 내에서 function 생략 가능

v-on: 내에서 매개변수 생략 가능(매개변수가 없는 경우)

 

 

마우스이벤트

click, mouseover, dblclick

       <div id="app">
           <h1 v-if="visible">title</h1>
           <button @click="visible = !visible">click</button>
           <button @mouseover="overFun">over</button>
           <button @dblclick="alert('double clicked')">dblClick</button>
       </div>
<!--        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
        new Vue({
            el:"#app",
            data:{
                visible:true
            },
            methods:{
                overFun:function(e){
                    console.log(e.type)
                }
            }
        })
    </script>

 

 

이벤트 수정자

v-on:이벤트.수정자

<a href="#" v-on:click.stop=""></a>
<form action="" v-on:submit.prevent=""></form>

 

       <div id="app">
           <input type="text" v-model="inputA" @keyup.enter="addA">
           <ul>
               <li v-for="a in animals"> {{a}} </li>
           </ul>
       </div>

       <script src="https://cdn.jsdelivr.net/npm/vue"></script>
       <script>
           new Vue({
               el: "#app",
               data: {
                   inputA: "",
                   animals: ["lion", "eagle"]
               },
               methods: {
                   addA: function() {
                       this.animals.push(this.inputA);
                       this.inputA = "";
                   }
               }
           })
       </script>

 

응용

 

filter

    <div id="app">
        <h1>filter</h1>
        <input type="text" v-model="searchF" v-on:keyup="search(searchF)">
        <ul>
            <li v-for="f in fruitsFilter">{{f}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                //input과 연결할 변수
                searchF: "",
                fruits: ["apple", "banana", "grapes", "mango", "orange"],
                fruitsFilter: []
            },
            created: function() {
                //뷰 인스턴스가 생성되면서 바로 실행되는 명령어
                this.fruitsFilter = this.fruits.slice();
            },
            methods: {
                //함수 호출에 의해서 실행되는 함수
                search: function(item) {
                    this.fruitsFilter = this.fruits.filter(x => {
                        if(x.indexOf(item) != -1){
                            return true;
                        }
                    })
                }
            }
        })
    </script>