Vue指令 v-on/条件渲染/修饰符

2.v-on

作用：事件绑定。

2.1 格式：v-on:事件类型="函数名称"

它也有语法糖的写法：省略v-on：使用@符号代替

@事件类型="函数名称"

我们需要将事件函数写在vue实例中的method属性中。

例子

<div id="app">
    <button @click="fn">按下我的座驾</button>
  </div>
  <script src="./js/vue.min.js"></script>
  <script>
    let vue = new Vue({
      el:"#app",
      data:{
        msg:"那我走？"
      },
      methods:{
        fn:function(){
          alert(vue.msg)
        }
      }
    })
  </script>

效果

构造函数两种情况：

1. 当构造函数中有参数，我们没能传是实参是，vue默认会将原生事件对象event传入
2. 那如果方法有参数，我们也需要事件对象进行处理，vue提供了一个特殊变量$event可以阻止a标签的默认行为。

  <div id="app">
    <button @click="fn1('hellow',$event)">按下我的座驾</button>
  </div>
  <script src="./js/vue.min.js"></script>
  <script>
    let vue = new Vue({
      el:"#app",
      data:{
        msg:"那我走？"
      },
      methods:{
        fn:function(){
          alert(vue.msg)
        },
        fn1(n,m){
         console.log(n);
         console.log(m);
        }
      }
    })
  </script>

2.2 修饰符

上面的案例，我们也可以用修饰符来做。在@绑定的事件后添加小圆点‘.’，再跟一个后缀来使用修饰符。

常见的修饰符如下：

stop:阻止冒泡

prevent：阻止浏览器默认行为

once：只触发一次。

这三种的用法

3. 条件渲染

3.1 v-if

true渲染（创建该节点），false不存在该节点（删除该节点）--------DOM不存在

3.2 v-else

与v-if搭配使用，不满足v-if则执行该内容

3.3 v-else-if

多个条件进行判断

3.4 v-show

true渲染（显示该节点），false（隐藏该节点）--------相当于display:black/none;

【注意】

1. v-if,v-else,v-else-if这之间不能加别的内容
2. ,v-else,v-else-if 不能单独使用，必须搭配v-if使用
3. v-if与v-show的区别： 前者为创建和删除，后者为显示和隐藏。但是创建和删除比较消耗资源。所以需要频繁切换时建议使用v-show

v-if与v-show的区别的代码

 <div id="app">
    <p v-if="msg">那我走？</p>
    <p v-show="msg">那你走吧，我就不送了！</p>
  </div>
  <script src="./js/vue.min.js"></script>
  <script>
    let vue = new Vue({
      el:"#app",
      data:{
        msg: false,
      },
    })
  </script>

效果图

v-if,v-else,v-else-if 条件渲染的代码

  <div id="app">
    <p v-if="msg">那我走？</p>
    <p v-show="msg">那你走吧，我就不送了！</p>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">合格</p>
    <p v-else>差</p>
  </div>
  <script src="./js/vue.min.js"></script>
  <script>
    let vue = new Vue({
      el:"#app",
      data:{
        msg: true,
        score:80,
      },
    })

效果图