4.常用指令

4.1 v-on

v-on 绑定事件监听器。事件类型由参数指定。缩写：@

示例：

      v-bind 实例： <br>
      <button v-on:click="showRed" :title=" title + '你确定没有骗人？' ">按钮</button>

      /**
       创建一个VUE实例，当我们导入VUE的资源后，浏览器的内存中就多了一个VUE的构造函数；
       我们创建的这个 vm 对象就是MVVM中的vm调度者。
      **/
      var vm = new Vue({
        el:'#app',
        // data中的属性，存放的就是el当中需要用到的属性，
        // 这个data 也就是MVVM中的M，Model层用来保存数据
        data:{
          msg:'hello vue',
          html:'<h1> the hello world !</h1>',
          title:'点击这里可以领取红包！'
        },methods:{
          showRed:function(){
            alert("给你的红包0.01!");
          }
        }
      });

效果：

image-20210518153944982

事件修饰符

4.1 .stop 阻止冒泡事件

.stop阻止事件冒泡；示例如下：

 <div id="app">
      <div class="innerHtml" @click="divClick">
        <button class="btn" @click.stop="btnClick">点击我</button>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          msg:'hello vue'
        },methods:{
          divClick:function(){
            console.log("div 被点击了");
          },btnClick:function(){
            console.log("btn 被点击了");
          }
        }
      });
    </script>

<!-- 没有使用stop事件修饰符；点击按钮会冒泡事件再次点击div -->
[Log] btn 被点击了 (event.html, line 31)
[Log] div 被点击了 (event.html, line 29)

<!-- 使用stop事件修饰符；点击按钮会阻止冒泡事件再次点击div -->
btn 被点击了

4.2 .prevent

调用 event.preventDefault() 用于阻止默认事件触发。

    <div id="app">
      <!--
        如果不加事件修饰符，点击该链接后会立刻跳往百度并且打印控制台
        如果加了阻止默认事件修饰符，点击后不会跳转到百度并且会打印日志
     -->
      <a href="http://www.baidu.com" title="click me" @click.prevent="showName">点我看看是什么网站</a>
    </div>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          msg:'hello vue'
        },methods:{
          showName:function(){
            console.log("你点击的是百度！");
          }
        }
      });
    </script>

4.3 .capture

添加事件侦听器时使用 capture 模式。即：从外到里捕捉事件

  <body>
    <div id="app">
      <!-- 
				不使用.capture时点击按钮，默认是先执行按钮的点击事件；在执行外层div的点击事件；
			  使用.capture时点击按钮，先执行外层div的点击事件；在执行内层按钮的点击事件；
			-->
      <div class="innerHtml" @click.capture="divClick">
        <button class="btn" @click="btnClick">点击我</button>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          msg:'hello vue'
        },methods:{
          divClick:function(){
            console.log("div 被点击了");
          },btnClick:function(){
            console.log("btn 被点击了");
          }
        }
      });
    </script>

执行效果：

[Log] div 被点击了 (event.html, line 37)
[Log] btn 被点击了 (event.html, line 39)

4.4 .once 事件只触发一次

.once - 只触发一次回调。

     <!--
       @click.once.prevent="showName"  表示点击调用showName只执行一次；下次就不在执行showName直接跳转；
       @click.prevent.once="showName"  表示只起效一次阻止默认点击事件，下次不在阻止。
      -->
      <a href="http://www.baidu.com" title="click me" @click.once.prevent="showName">点我看看是什么网站</a>

4.5 .self 只阻止自己的事件回调

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。和stop不同的是stop会阻止后续所有的。

      <div class="out" @click="outClick">
        <div class="innerHtml" @click.self="divClick">
          <button class="btn" @click="btnClick">点击我</button>
        </div>
      </div>

[Log] btn 被点击了 (event.html, line 50)
[Log] out div被点击了！ (event.html, line 54)