Vue.js 指令详解与事件处理-优快云博客

<body>
    <!-- blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持
    focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持 -->
     
    <div id="app">
        <input type="text" placeholder="请输入内容" @focus="focus" v-bind:placeholder="placeholder" @blur="blur" @click="click" @dblclick="dblclick" @mousedown="mousedown" @keyup.enter="search" >
        <!-- 鼠标事件 -->
        <!-- <div class="box" :class="{'box-leave':isshow}">
        </div> -->
    </div>


    <script>
     new Vue({
        el:'#app',
       data:{
         placeholder:'请输入你的内容'
       },
       methods:{
       focus(){
        this.placeholder="获得焦点事件"
       },
       blur(){
        this.placeholder="失去焦点事件"
       },
    //    单击
       click(){
    //     console.log('需要单击才能成功');
       },
    //    双击
    dblclick(){
        // console.log('需要双击才会出来');
    },
    mousedown(){
        // console.log('任意点击鼠标键都可以出现');
    },
    search(){
        console.log('输入键盘事件');
    } 
    }
     })
    </script>
    <!-- <script>
      
    //     项目	                 Value
    //   click	        单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
    //   dblclick	    双击鼠标左键时发生，如果右键也按下则不会发生
    //   mousedown	    单击任意一个鼠标按钮时发生
    //   mouseout	    鼠标指针位于某个元素上且将要移出元素的边界时发生
    //   mouseover	    鼠标指针移出某个元素到另一个元素上时发生
    //   mouseup	        松开任意一个鼠标按钮时发生
    //   mousemove	    鼠标在某个元素上时 持续 发生
    </script> -->

vue事件