Vue-事件处理器

发布于 2020-02-26  180 次阅读 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box" >
        <p>{{count}}</p>

        <button @click="handleAdd1()">add1</button>
        <button @click="handleAdd2">add2</button>
        <button @click="count++">add3</button>
        

        <ul v-for="n in 5">
            <li @click="handleClick">
                {{n}}
            </li>
        </ul>

        <!-- <input type="text" @input="handleInput"/> -->
        <input type="text" @input="handleInput($event)" @keyup.65="handleKeyUp"/>
     <!--    change 内容改变失去焦点 执行
        input  输入value 引发内容改变，执行
 -->
        <button>add</button>


        <ul @click.self="handleUlClick()">
            <!-- .self是事件源 是自己会触发 -->
            <li @click.stop="handleLiClick1()">事件冒泡-11</li>
            <li><a href="http://www.baidu.com" @click.prevent.stop="handleHrefClick()">click</a>
                <!-- .prevent 是阻止默认行为  .stop 阻止冒泡 -->
            </li>
                <!-- <li @click="isFirst && handleLiClick1()">333</li> -->
            <li @click.once="handleLiClick1()">333</li>
            <!-- .once 只会触发一次 -->
        </ul>
    </div>


    <script type="text/javascript">
        //自定义按键修饰符
        
    	
        var vm= new Vue({
            el:"#box",
            data:{
                count:0,
                mytext:"",
                isFirst:true
            },

            methods:{
                handleLiClick1(){
                    this.isFirst = false;
                    console.log("handleLiClick1");
                },
                handleUlClick(){
                    console.log("handleUlClick");
                },

                handleHrefClick(){
                    console.log("handleHrefClick")
                },

                handleKeyUp(ev){
                    console.log(ev.keyCode,"只有按下回车键才会触发一次的事件")
                },


                handleAdd1(){
                    this.count++;
                },
                handleAdd2(){
                    this.count++;
                },
                handleClick(ev){
                    console.log(ev.target);
                },
                handleInput(ev){
                    console.log(ev.target.value);
                    this.mytext= ev.target.value;
                }
            }
        })
    </script>


    <script>
        
        // 捕获阶段-> 处于目标阶段 -> 冒泡阶段
        // obox.addEventListener("click",function(){

        // },true)

        // .stop
        // .prevent
        // .capture
        // .self
        // .once
        // .passive


        // obox.addEventListener('click',function(){

        // },true);

    </script>
</body>
</html>

 

注错之当