Vue自学：v-on的修饰符使用

最新推荐文章于 2023-04-18 18:15:46 发布

@阿猫阿狗~

最新推荐文章于 2023-04-18 18:15:46 发布

阅读量108

点赞数

原文链接：https://m.php.cn/blog/detail/25886.html

版权

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue自学：v-on的修饰符使用</title>
  </head>
  <body>
    <!-- vue提供了修饰符来帮助我们处理一些事件 1: .stop-调用了 event.stopPropagation() 阻止了事件冒泡 2: .prevent 调用了 event.preventDefault() 阻止了默认事件 3: {keyCode | keyAlias} - 当时间从特定的按钮上被按的时候，才会触发回调 4: .native - 监听组件根元素的原生事件 5: .once - 只触发一次回调 keyup 按下键盘放下的时候触发 keydown 按下键盘没放的时候触发 .enter 修饰符：触发回车键 修饰符可以串联在一起 -->
    <!-- 案例一：.stop 阻止冒泡事件 -->
    <div id="app" @click="app_click">
      测试测试测试
      <button type="button" @click.stop="btn_click">按钮</button>
    </div>
    <!-- 案例二：.prevent 阻止默认事件 -->
    <div id="app1">
      <form action="baidu" method="post" @click.prevent="submit_click">
        <input type="submit" value="提交" />
      </form>
    </div>
    <!-- 案例三：监听某个键盘的按键的点击 -->
    <div id="app2">
      <input type="" name="" id="" value="" / v-on:keyup.enter="seach">
    </div>
    <!-- 案例四：获取组件开发的监听事件 必须加上.native才能知道是组件开发的 -->
    <cop @click.native="cpnClick"></cop>
    <!-- 案例五：当希望用户的行为只允许触发一次效果时，使用.once可以实现 -->
    <div id="app3">
      <button type="button" @click.once="btt">只允许一次</button>
    </div>
  </body>
</html>

  <script type="text/javascript">
    const vm = new Vue({
 	el: ’# app’,
 	data: {
 	},
 	methods: {
 		app_click() {
 			console.log(‘app_click’)
 		}, btn_click() {
 			console.log(‘btn_click’)
 		}, submit_click() {
 			console.log(‘submit_click’)
 		}
 	}
 })
 const ve = new Vue({
 	el: ’# app1’,
 	data: {
 	},
 	methods: {
 		submit_click() {
 			console.log(‘submit_click’)
 		}
 	}
 })
 const vt = new Vue({
 	el: ’# app2’,
 	data: {
 	},
 	methods: {
 		seach() {
 			alert(‘回车事件触发成功’)
 		}
 	}
 })
 const vn = new Vue({
 	el: ’# app3’,
 	data: {
 	},
 	methods: {
 		btt() {
 			console.log(7);
 		}
 	}
 })
  </script>

@阿猫阿狗~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自学：v-on的修饰符使用

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <scri
复制链接

扫一扫