Vue.js——事件修饰符

跑马灯效果HTML结构：&lt;div id="app"&gt;&lt;input type="button" value="开启" v-on:click="go"&gt;&l

六道轮回 -- 鼬

252人浏览 · 2019-04-10 07:56:25

六道轮回 -- 鼬 · 2019-04-10 07:56:25 发布

跑马灯效果

HTML结构：


<div id="app">
    <input type="button" value="开启" v-on:click="go">
    <input type="button" value="停止" v-on:click="stop">
    
	<h4>{{ msg }}</h4>
  </div>

Vue实例：
注意：在 VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法，必须通过 this.数据属性名或 this.方法名来进行访问，这里的this，就表示我们 new 出来的 VM 实例对象
注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

<script>
	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({

      el: '#app',
      data: {
        msg: '猥琐发育，别浪~！',
        intervalId: null   // 在data上定义 定时器Id
      },

      methods: {
        go() {
        
          // 如果当前有定时器在运行，则直接return
          if (this.intervalId != null) return;
          
          // 开始定时器
          this.intervalId = setInterval(() => {
            //var start = this.msg.substring(0, 1)
            // 获取到 后面的所有字符
            //var end = this.msg.substring(1)
            // 重新拼接得到新的字符串，并赋值给 this.msg
            //this.msg = end + start
            this.msg = this.msg.substring(0, 1) + this.msg.substring(1)
          }, 500);
        },
        
		// 停止定时器
        stop() {
          clearInterval(this.intervalId);
          // 每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }

    });
</script>

Vue指令之`事件修饰符`

  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }
  </style>

.stop 阻止冒泡

<div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
</div>

.prevent 阻止默认事件

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

.capture 添加事件侦听器时使用事件捕获模式(从外到里)

<div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

<div class="inner" @click.self="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>

.once 事件只触发一次

<a href="http://www.baidu.com" @click.once="linkClick">有问题，先去百度</a>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        }
      }
    });
  </script>

演示： .stop 和 .self 的区别

<head>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }

    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>
</head>

<div id="app">
    <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> 
    
    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->
</div>

<script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^