<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事件
最新推荐文章于 2024-07-23 16:37:55 发布